@charset "utf-8";

/*
	** UI 관련 기본 CSS
*/


body.prevent {
	overflow: hidden;
}
::backdrop {
	background:rgba(0,0,0,0.5);
}


/* ## title ## */
.title-xl {
	font-size: var(--font-size-36);
	font-weight: 500;
}
.title-lg {
	font-size: var(--font-size-24);
	padding-top: var(--space-sm);
	font-weight: 700;
    color: #041632;
	position: relative;
	/* 디폴트 상위 구분선 있음 */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 48px;
		height: 2px; 
		border-top: 2px solid #041632;
	}
	/* 상위 구분선 없는 타이틀 */
	&.no-line {
		color: #111;
	}
	&.no-line::before {
    	content: none;
  	}
}
.title-md {
	font-size: var(--font-size-24);
	margin-block: var(--space-md) calc(var(--space-sm) * .8);
	font-weight: 700;

	&.blue {
		color: #1C51A1;
	}
	&.title-chip {
		background-color:  #F6FAFF;
		border: 1px solid #AFC8EF;
		padding: 6px 30px;
		border-radius: 30px;
		width: fit-content;
	}
}
.title-sm {
	font-size: var(--font-size-20);
	margin-bottom: var(--space-sm);
	font-weight: 600;

	&.blue {
		color: #1C51A1;
	}
	&.title-chip {
		background-color:  #AFC8EF80;
		padding: 6px 20px;
		border-radius: 30px;
		width: fit-content;
		font-weight: 500;
	}
}
.title-xs {
	font-size: var(--font-size-18);
	margin-bottom: var(--space-xs);
}
.title-desc {
	font-size: var(--font-size-20);
}
.title-mb-0:is(.title-lg,.title-md,.title-sm,.title-xs, .title-desc) {
	margin-bottom:0;
}
@media all and (max-width: 1200px) {
	.title-xl {
		font-size: var(--font-size-30);
	}
}
@media all and (max-width: 1023px) {
	.title-xl {
		font-size: var(--font-size-26);
	}
	.title-lg {
		font-size: var(--font-size-22);
	}
	.title-md {
		font-size: var(--font-size-18);
	}
	.title-xs {
		font-size: var(--font-size-18);
	}
	.title-desc {
		font-size: var(--font-size-18);
	}
}
@media all and (max-width: 767px) {
	.title-xl {
		font-size: var(--font-size-24);
	}
	.title-lg {
		font-size: var(--font-size-20);
	}
	.title-md {
		font-size: calc(var(--font-size-16) * 1.0625);
		/* margin-block: calc(var(--space-md) * 1.75) calc(var(--space-sm) * 1.2); */
	}
	.title-sm {
		font-size: var(--font-size-18);
	}
	.title-desc {
		font-size: var(--font-size-16);
	}
}
@media all and (max-width: 568px) {
	.title-xl {
		font-size: var(--font-size-22);
	}
}

/* ## bullet list */
.bullet-list {
    font-size: var(--font-size-20);

	li {
		padding-left: calc(var(--space-sm) * 1.5);
		position: relative;
		letter-spacing: -1.1px;

		&:not(:last-child) {
			padding-bottom: calc(var(--space-sm) * .5);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0.6em;
			transform: translateY(-50%);
			left: 12px;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: currentColor;
		}
	}
}
@media all and (max-width: 1023px) {
	.bullet-list {
		--font-size-20: 1em;
	}
}

/* 컴포넌트 간 간격 => 추후 spacing.css로 관리할지 */

.bullet-list + .title-lg {
	margin-top: calc(var(--space-sm) * 5);
}
.bullet-list + .table {
	margin-top: calc(var(--space-sm) * .8);
}
.title-md + .table {
	margin-top: calc(var(--space-sm) * .8);
}
.button.button-pill {
	margin-top: calc(var(--space-sm) * 6);
}
.title-lg + .title-desc {
	margin-top: calc(var(--space-sm) * 2.3);
}
.title-desc + .decimal-list {
	margin-top: calc(var(--space-sm) * 1.65);
}
.title-desc + .bullet-list {
	margin-top: calc(var(--space-sm) * 1);
}
.decimal-list + .title-desc {
	margin-top: calc(var(--space-sm) * 1.65);
}
.title-lg + .table {
	margin-top: calc(var(--space-sm) * 2);
}
.img-inn + .title-lg {
	margin-top: calc(var(--space-sm) * 5);
}
.bullet-list + .img-inn {
	margin-top: calc(var(--space-sm) * 2);
}
.table + .title-desc {
	margin-top: calc(var(--space-sm) * 1);
}
.title-lg + .bullet-list {
	margin-top: calc(var(--space-sm) * 2);
}
.title-lg + .title-lg.no-line {
	margin-top: calc(var(--space-sm) * 1);
}
.title-lg + .img-inn {
	margin-top: calc(var(--space-sm) * 2);
}
.title-lg + .card-group {
	margin-top: calc(var(--space-sm) * 2);
}
.title-lg + .title-xl {
	margin-top: calc(var(--space-sm) * 2);
}
.title-xl + .title-desc {
	margin-top: calc(var(--space-sm) * 0.4);
}
.bullet-list + .table-note {
	margin-top: calc(var(--space-sm) * 1.75);
}
@media all and (max-width: 767px) {
	.button.button-pill {
		margin-top: calc(var(--space-sm) * 3);
	}
}
@media all and (max-width: 767px) {
	.title-lg + .title-xl {
		margin-top: calc(var(--space-sm) * 1.4);
	}
	.button.button-pill {
		margin-top: calc(var(--space-sm) * 2);
	}
}

/* ## tab ## */
.tab-box {
	margin-bottom: var(--space-md);
}
.tab-list {
	display: flex;
	align-items: center;
}
.tab-item {
	flex: 1;
}
.tab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--height);
	padding: 0 10px;
	width: 100%;
	background: #f8f8f8;
	transition: var(--transition);
}
.tab-btn.active {
	background: var(--color-primary);
	color: #fff;
}
[data-tab-cont] {
	display: none;
	transition: var(--transition);
}
[data-tab-cont].active {
	display: block;
}
@media all and (max-width: 1023px) {
	.tab-btn {
		height: var(--height);
	}
	.t-tab-scroll .tab-btn {
		white-space: nowrap;
	}
	.t-tab-scroll {
		overflow-x: auto;
		overflow-y: hidden;
	}
}
@media all and (max-width: 767px) {
	.tab-btn {
		height: var(--height);
	}
	.m-tab-scroll .tab-btn {
		white-space: nowrap;
	}
	.m-tab-scroll {
		overflow-x: auto;
		overflow-y: hidden;
	}
}


/* ## table ## */
.table table {
	width: 100%;
	table-layout: fixed;
	text-align: center;
}
.table tr + tr {
	border-bottom: 1px solid var(--color-border);
}
.table thead {
	border-bottom: 2px solid var(--color-border);
}
.table thead :is(th):not(:first-child) {
	border-color: #fff;
}
.table thead :is(th):first-child {
	border-right: 1px solid #fff;
}
.table tbody :is(th) {
	background: #F2F2F2;
	font-weight: 700;
}
.table :is(th, td) {
	padding: 12px 16px;
	word-break : break-word;
	font-size: var(--font-body);
	font-weight: 400;
	border-right: 1px solid var(--color-border);
}
.table tr > :is(th, td):last-child {
	border-right: none;
}
.table tr > :is(th, td):first-child {
	border-left: none;
}
.table .table-title {
	background: #F2F2F2;
	font-weight: 600;
}
.table .section-link {
	color: #1C51A1;
	font-weight: 700;
}
.table-stripe tbody tr:nth-child(even) {
	background: #f8f8f8;
}
.table-sticky {
	max-height: 200px;
	overflow-y: auto;
}
.table-sticky .table-sticky-row {
	position: sticky;
	left: 0;
	top: 0;
	width: 100%;
}
@media all and (max-width: 1023px) {
	.table :is(th, td) {
		/* --font-size-20: 1em; */
		font-size: 16px;
	}
	.t-table-scroll {
		overflow-x: auto;
	}
	.t-table-scroll table {
		width: 1100px;
	}
}
@media all and (max-width: 767px) {
	.table :is(th, td) {
		/* --font-size-20: 0.85em; */
		padding: 10px;
	}
	.m-table-scroll {
		overflow-x: auto;
	}
	.m-table-scroll table {
		width: 800px;
	}
}

/* ## table ## */
.table.table-type02 tr {
	border-bottom: 1px solid #ECF1F9;
}
.table.table-type02 thead :is(th):not(:first-child) {
	border-left: 1px solid #A7C4EB;
}
.table.table-type02 :is(th, td) {
	padding: 18px 16px;
	border-left: 1px solid #A7C4EB;
	word-break : break-word;
	font-size: var(--font-size-20);
	font-weight: 400;
}
.table.table-type02 tbody :is(th) {
	background: transparent;
	font-weight: 500;
}
.table.table-type02:not(:has(tfoot)) tbody tr:last-child {
	border-bottom-color: #1C51A1;
}
/* tbody th 시작인 경우 보더 삭제 */
.table.table-type02 tbody :is(td):first-of-type {
	border-left: none;
}
/* tbody th 시작인 경우 보더 삭제 */
.table.table-type02 tbody :is(th):first-of-type {
	border-left: none;
}
.table.table-type02 .table-title {
	border-top: 1px solid #1C51A1;
	background: #F6FAFF;
	font-weight: 500;
}
/* tfoot */
.table.table-type02 tfoot tr{
	background-color: #F6FAFF;
	border-bottom: 1px solid #A7C4EB;
}
.table.table-type02 tfoot tr td {
	color: #111111;
	font-weight: 500;
}


/* ## radio ## */
.radio {
	--radio-size: 18px;
	--radio-border-radius: 100%;
}
.radio {
	display: inline-flex;
	align-items: center;
}
.radio-label {
	display: inline-flex;
	position: relative;
	cursor: pointer;
}
.radio-input,
.radio-check {
	width: var(--radio-size);
	height: var(--radio-size);
	border-radius: var(--radio-border-radius);
	overflow: hidden;
}
.radio-input {
	position: absolute;
	left: 0;
	top: 0;
}
.radio-check {
	position: relative;
	border: 1px solid #ddd;
	flex: 0 0 var(--radio-size);
	transition: var(--transition);
}
.radio-check::before {
	display: block;
	content:"";
	width: calc(var(--radio-size)  / 2);
	height: calc(var(--radio-size) / 2);
	position: absolute;
	left: -50%;
	top:50%;
	transform:translate(-50%, -50%);
	border-radius: var(--radio-border-radius);
	transition: var(--transition);
	background: var(--color-primary);
}
.radio-text {
	margin-left:8px;
	margin-right:20px;
}
.radio-input:checked + .radio-check {
	border-color:var(--color-primary);
}
.radio-input:checked + .radio-check::before {
	left: 50%;
}


/* ## checkbox ## */
.checkbox {
	--checkbox-size: 18px;
	--checkbox-border-radius:1px;
}
.checkbox {
	display: inline-flex;
	align-items: center;
}
.checkbox-label {
	display: inline-flex;
	position: relative;
	cursor: pointer;
	line-height: 1.2;
}
.checkbox-input,
.checkbox-check {
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border-radius: var(--checkbox-border-radius);
	overflow: hidden;
}
.checkbox-input {
	position: absolute;
	left:0;
	top:0;
}
.checkbox-check {
	position: relative;
	border:1px solid #ddd;
	flex:0 0 var(--checkbox-size);
	transition: var(--transition);
	background-color: var(--White);
}
.checkbox-check::before {
	display: block;
	content:"\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 600;
    font-size: 12px;
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-200%, -50%) rotate(-90deg);
	transition: var(--transition);
	color: #fff;
}
.checkbox-text {
	margin-left:8px;
	margin-right:20px;
}
.checkbox-input:checked + .checkbox-check {
	background:var(--color-primary);
	border-color:var(--color-primary);
}
.checkbox-input:checked + .checkbox-check::before {
	transform:translate(-50%, -50%);
}
.checkbox-type02.checkbox-label {
    width: 100%;
    background: #fff;
    border-radius: 15px;
    padding:20px;
    align-items: center;
    gap:0 15px;
    border:1px solid transparent;
}
.checkbox-type02.checkbox-label:hover {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}
.checkbox-type02.checkbox-label::before {
    display: block;
    content:"\f058";
    font-weight: 400;
    font-family: "Font Awesome 6 Sharp";
    color: #dedede;
    font-size: var(--font-size-22);
    border-radius: 100%;
    line-height: 1;
    height: 21px;
}
.checkbox-type02 .checkbox-text {
    flex:1 1 auto;
    margin:0;
}
.checkbox-type02 .checkbox-text :is(.title, .desc) {
    display: block;
}
.checkbox-type02 .checkbox-text .title {
    font-weight: 600;
}
.checkbox-type02 .checkbox-text .desc {
    color: var(--color-primary);
    margin-top:3px;
}
.checkbox-type02.checkbox-label:has( .checkbox-input:checked) {
    background:#f2f8ff;
    border-color: var(--color-primary);
}
.checkbox-type02.checkbox-label:has( .checkbox-input:checked)::before {
    background: var(--color-primary);
}
.form-group .checkbox-type02  {
    padding:13px 20px 14px;
}
@media all and (max-width: 767px) {
    .checkbox-type02.checkbox-label {
        padding:15px;
    }
    .checkbox-type02 .checkbox-text .title {
        font-weight: 400;
    }
    .checkbox-type02 .checkbox-text .desc {
        font-size: var(--font-size-15);
    }
}

/* ## File ## */
.file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.file .file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file .file-name {
}
.form-download-box {
    display: none;
}
.form-download-box.active {
    display: block;
}
.form-download-btn.active .icon-custom {
    transform:rotate(180deg);
    margin-top:2px;
}
.form-download-list {
    display: flex;
    flex-wrap: wrap;
    gap:5px 20px;
    margin-top:10px;
}
.form-download-list .btn {
    display: inline-flex;
    gap:0 5px;
    color: #595959;
}
.form-download-list .btn:hover {
    text-decoration: underline;
    color: var(--color-primary);
}
.form-download-list .btn::before {
    display: block;
    content:"\e4e7";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}
@media all and (max-width: 767px) {
    .form-download-list {
        margin-top:10px;
    }
    .form-download-list .btn {
        font-size: var(--font-size-15);
    }
}

/* ## switch ## */
.switch-label {
	--switch-size: 28px;
	--switch-radius: 25px;
	--switch-deactive-color:#dfdfdf;
}
.switch-label {
	display: inline-flex;
	align-items: center;
	position: relative;
}
input[type="checkbox"].switch-input {
	appearance: none;
	position: relative;
	background: var(--switch-deactive-color);
	border-radius: var(--switch-radius);
	width: calc(var(--switch-size) * 2);
	height: var(--switch-size);
	cursor: pointer;
}
.switch-input::before {
	display: block;
	content: "";
	position: absolute;
	left: 4px;
	top:50%;
	transform: translateY(-50%);
	width: calc(var(--switch-size) - 8px);
	height: calc(var(--switch-size) - 8px);
	border-radius: var(--switch-radius);
	background: #fff;
	transition: var(--transition);
}
input[type="checkbox"].switch-input:checked {
	background: var(--color-primary);
}
.switch-input:checked::before {
	left: calc(100% - calc(var(--switch-size) - 4px));
}
.switch-text {
	margin-left: 10px;
}
@media all and (max-width: 767px) {
	.switch-label {
		--switch-size: 24px;
	}
}


/* ## button ## */
.button {
	--button-height:var(--height);
	--button-padding: 20px;
	--button-font-size:1em;
}
.button-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10px;
	margin-top:var(--space-md);
}
.button-wrap.button-wrap-full .button {
	flex: 1 1 auto;
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--button-height);
	padding:0 var(--button-padding);
	border-radius: var(--border-radius);
	background:#eee;
	border:1px solid #eee;
	transition: var(--transition);
	cursor: pointer;
	line-height: 1;
}
.button.button-color-primary {
	border-color:var(--color-primary);
	background-color: var(--color-primary);
	color: #fff;
}
.button.button-color-secondary {
	border-color:var(--color-secondary);
	background-color: var(--color-secondary);
	color: #fff;
}
.button.button-color-black {
	border-color:#111;
	background-color: #111;
	color: #fff;
}
.button.button-line-primary {
	border-color: var(--color-primary);
	background-color: #fff;
	color: var(--color-primary);
}
.button.button-size-md {
	height: calc(var(--button-height) * 0.9);
	padding:0 calc(var(--button-padding) * 0.9);
	font-size: calc(var(--button-font-size) * 0.95);
}
.button.button-size-sm {
	height: calc(var(--button-height) * 0.8);
	padding:0 calc(var(--button-padding) * 0.5);
	font-size: calc(var(--button-font-size) * 0.9);
}
/* 공통 라운드형 CTA용 버튼 */
.button.button-pill {
	display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 10px);
    padding: clamp(8px, 1.5vw, 15px) clamp(14px, 3vw, 30px);
    border-radius: 40px;
    border: 2px solid var(--title-text-color);
	background-color: #fff;
	width: fit-content;
	margin-inline: auto;

	span {
		font-size: clamp(16px, 2vw, 20px);
		font-weight: 700;
		color: var(--title-text-color);
	}

	svg {
		width: clamp(18px, 2vw, 24px);
    	height: clamp(18px, 2vw, 24px);
	}

	&:hover {
		box-shadow: none;
	}
}
.button:hover {
	box-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
@media all and (max-width: 1023px) {
	.button {
		--button-height:var(--height);
	}
}
@media all and (max-width: 767px) {
	.button {
		--button-height:var(--height);
	}
	.button-wrap {
		margin-top:var(--space-sm);
		gap:5px;
	}
}

/* ## button ## */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-width: 120px;
    height: 49px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: var(--font-label);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.btn:focus-visible {
    outline: 3px solid var(--Blue-800);
    outline-offset: 3px;
}

.btn_primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--White);
}

.btn_primary:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: var(--White);
}

.btn_outline {
    border-color: var(--color-primary);
    background-color: var(--White);
    color: var(--color-primary);
}

.btn_outline:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-light);
    color: var(--color-primary-hover);
}

.btn_outline_secondary {
    border-color: var(--Black-600);
    background-color: var(--White);
    color: var(--Black-600);
}

.btn_outline_secondary:hover {
    border-color: var(--Black-600);
    background-color: #fafafa;
    color: var(--Black-600);
}

.btn_sm {
    min-width: 0;
    height: 36px;
    gap: 6px;
    padding: 0 14px;
}

.btn_md {
    min-width: 150px;
    height: 51px;
    padding: 0 28px;
}

.btn_lg {
    min-width: 150px;
    height: 60px;
    padding: 0 28px;
}

.btn i {
    font-size: 0.8em;
}

.btn.link::after {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.125 7.875L15.75 2.25M15.75 6V2.25H12M15.75 10.5V14.25C15.75 14.6478 15.592 15.0294 15.3107 15.3107C15.0294 15.592 14.6478 15.75 14.25 15.75H3.75C3.35218 15.75 2.97064 15.592 2.68934 15.3107C2.40804 15.0294 2.25 14.6478 2.25 14.25V3.75C2.25 3.35218 2.40804 2.97064 2.68934 2.68934C2.97064 2.40804 3.35218 2.25 3.75 2.25H7.5' stroke='%232AA3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    content: "";
}

.btn.download::after {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 12.75V14.25C2.25 14.6478 2.40804 15.0294 2.68934 15.3107C2.97064 15.592 3.35218 15.75 3.75 15.75H14.25C14.6478 15.75 15.0294 15.592 15.3107 15.3107C15.592 15.0294 15.75 14.6478 15.75 14.25V12.75M12.75 8.25L9 12L5.25 8.25M9 12V3' stroke='%232AA3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    content: "";
}


@media (max-width: 767px) {
    .btn {
        min-width: 0;
        height: 47px;
        padding: 0 16px;
		flex-shrink: 0;
    }

    .btn_md {
        height: 49px;
        padding: 0 20px;
    }

    .btn_sm {
        height: 34px;
        padding: 0 12px;
    }

    .btn_lg {
        height: 58px;
        padding: 0 20px;
    }
}

/* ## badge ## */
.badge {
	--badge-height:var(--height);
	--badge-padding: 20px;
	--badge-font-size:1em;
}
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding:0 20px;
	height: var(--badge-height);
	border-radius: var(--border-radius);
	background-color: #eee;
	border:1px solid #eee;
}
.badge.badge-color-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.badge.badge-color-warning {
	background-color: #d32626;
	border-color: #d32626;
	color: #fff;
}
.badge.badge-line-primary {
	background-color: #fff;
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.badge.badge-line-gray {
	background-color: #fff;
	border-color: #c9c9c9;
	color: #878787;
}
.badge.badge-size-md {
	height: calc(var(--badge-height) * 0.7);
	padding:0 calc(var(--badge-padding) * 0.7);
	font-size: calc(var(--badge-font-size) * 0.9);
}
.badge.badge-size-sm {
	height: calc(var(--badge-height) * 0.6);
	padding:0 calc(var(--badge-padding) * 0.5);
	font-size: calc(var(--badge-font-size) * 0.85);
}
@media all and (max-width: 1023px) {
	.badge {
		--badge-height:var(--height);
	}
}
@media all and (max-width: 767px) {
	.badge {
		--badge-height:var(--height);
	}
}


/* ## select ## */
.select {
	--select-height: var(--height);
	--select-space:20px;
}
.select {
	display: inline-flex;
	align-items: center;
	position: relative;
}
.select-btn {
	display: inline-flex;
	align-items: center;
	width: 100%;
	height: var(--select-height);
	text-align: left;
	border:1px solid #c9c9c9;
	padding:0 calc(var(--select-space) * 2) 0 var(--select-space);
	position: relative;
}
.select-btn::after {
	display: block;
	content:"\f107";
	font-family:"Font Awesome 6 Pro";
	font-weight: 300;
	position: absolute;
	right:var(--select-space);
	top:50%;
	transform:translateY(-50%);
	transition: var(--transition);
}
.select-btn.active::after {
	transform:translateY(-50%) rotate(180deg);
}
.select-list {
	width: 100%;
	background: #fff;
	border:1px solid #c9c9c9;
	position: absolute;
	left:0;
	top:calc(var(--select-height) + 5px);
	border-radius: var(--border-radius);
	z-index: 5;
}
.select-option {
	display: block;
	width: 100%;
	text-align: left;
	padding:12px 20px;
	border-bottom:1px solid #c9c9c9;
	border-radius: 0;
}
.select-option:last-child {
	border-bottom: 0;
}
[data-select-list] {
	display: none;
}
[data-select-list].active {
	display: block;
}


/* ## modal ## */
.modal {
	max-width: 700px;
	width: calc(100% - 40px);
	border:none;
	padding:0;
	overflow: hidden;
	border-radius: var(--border-radius);
}
.modal-box {
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
.modal-header {
	position: sticky;
	left: 0;
	top:0;
	padding:20px 60px 20px 40px;
	background: var(--color-primary);
	display: flex;
	align-items: center;
}
.modal-title {
	font-size: var(--font-size-20);
	color: #fff;
}
.modal-body {
	padding:30px 40px;
}
.modal-close {
	position: absolute;
	right:15px;
	top:10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-26);
	color: #fff;
}
.modal-close::before {
	display: block;
	content:"\f00d";
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
}
@media all and (max-width: 767px) {
	.modal-header {
		padding:15px 45px 15px 20px;
	}
	.modal-title {
		font-size: var(--font-size-18);
	}
	.modal-close {
		width: 30px;
		height: 30px;
		right:10px;
		font-size: var(--font-size-24);
	}
	.modal-body {
		padding:20px;
	}
}


/* ## tooltip ## */
.tooltip {
	position: relative;
	display: inline-flex;
}
.tooltip-btn {
	font-size: var(--font-size-18);
	color: #555;
}
.tooltip-text {
	font-size: var(--font-size-13);
	padding:3px 10px;
	border-radius: var(--border-radius);
	background: #555;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	top:calc(-100% - 8px);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 5;
}
.tooltip-text::after {
	display: block;
	content:"";
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #555;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:-5px;
}
.tooltip-btn:hover + .tooltip-text {
	opacity: 1;
	visibility: visible;
}


/* ## loading ## */
.loading {
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 500;
	width: 40px;
	height: 40px;
	border: 4px solid var(--color-primary);
	border-bottom-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: loading 1.2s linear infinite;
}
.loading.active {
	display: flex;
}
.loading.inner {
	position: absolute;
	width: 30px;
	height: 30px;
	border-width: 3px;
}
@keyframes loading {
	0% {transform: translate(-50%, -50%) rotate(0deg);}
	100% {transform: translate(-50%, -50%) rotate(360deg);}
}


/* ## count ## */
.count {
	display: inline-flex;
	align-items: center;
	border-radius: var(--border-radius);
}
.count-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex:0 0 32px;
	height: 32px;
	border:1px solid #eee;
	border-radius: 100%;
	color: #707070;
}
.count-value {
	display: block;
	flex:0 0 50px;
	text-align: center;
}


/* ## alert ## */
.alert {
	border:none;
	max-width: 350px;
	width: calc(100% - 40px);
	border-radius: var(--border-radius);
	padding:0;
}
.alert-text {
	padding:50px 30px;
	text-align: center;
}
.alert-btn-box {
	display: flex;
	align-items: center;
}
.alert .button {
	border-radius: 0;
	flex:1 1 auto;
}
@media all and (max-width: 767px) {
	.alert-text {
		padding:35px 25px;
	}
}



/* ## rating ## */
.rating {
	position: relative;
	color: #ddd;
	display: inline-flex;
	gap:2px;
}
.rating-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-18);
}
.rating-star::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 6 Pro";
	content:"\f005";
	font-weight: 900;
}
.rating .range {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	opacity: 0;
	padding:0;
	cursor: pointer;
}
.rating.active {
	width: 0;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-primary);
	overflow: hidden;
	pointer-events: none;
	white-space: nowrap;
}
.rating.disabled {
	pointer-events: none;
	cursor: none;
}




/* ## agree ## */
.agree-box {
	width: 100%;
	margin:5px 0;
}
.agree-box pre {
	max-height: 200px;
	padding: 20px;
	background: #f5f5f5;
	white-space: pre-line;
	overflow-y: auto;
	margin:0;
	font-family: inherit;
	font-size: var(--font-size-15);
}
.agree-check {
	text-align: right;
	margin-top:var(--space-xs);
}
.agree-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.agree-header .button {
	height: 30px;
	font-size: var(--font-size-13);
}
.agree-body {
	background: #f9f9f9;
	color: #252525;
	padding:15px 20px;
	font-size: var(--font-size-14);
	max-height: 150px;
	overflow-y: auto;
	display: none;
	margin-top:10px;
}
.agree-body.active {
	display: block;
}
@media all and (max-width: 767px) {
	.agree-box {
		margin:3px 0;
	}
	.agree-header .checkbox-text {
		font-size: var(--font-size-15);
	}
	.agree-body {
		margin-top:8px;
		padding:15px;
	}
	.agree-header .button {
		height: 28px;
	}
}



/* ## paging ## */
.paging {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-md);
}
.paging-pages {
	display: flex;
	align-items: center;
	gap: 4px;
}
.paging-pages :is(a, span) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	/* background: #eee;
	border:1px solid #eee; */
    border-radius: 50%;
	font-size: var(--font-size-16);
	transition: var(--transition);
}

.paging-pages a:focus-visible {
	color: var(--Blue-800);
	background: #f4fdff;
	outline: 3px solid var(--Blue-800);
	outline-offset: -3px;
}

.paging-pages span {
	font-weight: 600;
	background: var(--color-primary);
	color: #fff;
}
.paging-first::before,
.paging-prev::before,
.paging-next::before,
.paging-last::before {
	display: block;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	color: var(--Black-800);
}
.paging-first::before {
	content: "\f100";
}
.paging-prev::before {
	content: "\f104";
}
.paging-next::before {
	content: "\f105";
}
.paging-last::before {
	content: "\f101";
}
@media all and (max-width: 767px) {
	.paging-pages {
		gap: 3px;
	}
	.paging-pages :is(a, span) {
		width: 36px;
		height: 36px;
	}
}



/* ## search ## */
.search-wrap {
	width: auto;
	margin: 0;
	padding: 0;
	text-align: center;
	background: none;
}
.search-box {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}
.search-field {
	width: clamp(100px, 7.3vw, 140px);
	flex: 0 0 clamp(100px, 7.3vw, 140px);
}
.search-field select,
.search-form .form-input {
	width: 100%;
	height: clamp(40px, 3.13vw, 48px);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: var(--White);
	font-size: var(--font-label);
}
.search-form {
	display: grid;
	width: clamp(330px, 27.09vw, 391px);
	grid-template-columns: minmax(0, 1fr) clamp(76px, 5.21vw, 100px);
	gap: 8px;
}
.search-form .form-input { 
	padding: 0 16px; 
	font-weight: 500;
}
.search-btn {
	width: auto;
	height: clamp(40px, 3.13vw, 48px);
	border-radius: 4px;
	background: var(--color-primary);
	color: var(--White);
	font-size: var(--font-label);
	font-weight: 500;
}
.search-btn::before {
	display: none;
}
@media all and (max-width: 767px) {
	.search-wrap {
		width: 100%;
	}
	.search-wrap form,
	.search-box { width: 100%; }
	.search-field {
		width: 110px;
		flex: 0 0 110px;
	}
	.search-form {
		width: auto;
		min-width: 0;
		flex: 1;
		grid-template-columns: minmax(0, 1fr) 64px;
	}
}

@media all and (max-width: 480px) {
	.search-box { flex-wrap: wrap; }
	.search-field,
	.search-form {
		width: 100%;
		flex-basis: 100%;
	}
}

/* ## program search ## */

.search-program {
    padding: 30px;
    text-align: center;
    background: #e2edf9;
    border: none;
    border-radius: 30px;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 10px;
}
.search-program .search-box {
    background: #fff;
    border-radius: 30px;
    padding: 5px 15px;
    display: flex;
    width: auto;
    position: relative;
}
.search-program .search-box select,
.search-program .search-box .form-input {
    border: none;
    border-radius: 0;
}
.search-program .search-box .search-form {
    min-width: 450px;
    padding-left: 20px;
}
.search-program .search-box .search-field {
    position: relative;
}
.search-program .search-box .search-field::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 30px;
    background: #ddd;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}
.search-program .search-box .search-btn::before {
    font-size: 1.2em;
    color: #666;
}
.search-detail-btn {
    position: absolute;
    right: -70px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}
.search-detail-btn:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.search-detail-btn::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 0.7em;
    color: #555;
}
.search-tag-box a {
    padding: 5px;
    display: inline-block;
    color: var(--color-primary);
}
.search-tag-box a:hover {
    text-decoration: underline;
}
@media all and (max-width: 767px) {
    .search-program {
        padding: 15px;
        border-radius: 15px;
    }
    .search-program .search-box {
        border-radius: 15px;
    }
    .search-program .search-box .search-form {
        padding-left: 0;
        width: 100%;
        min-width: auto;
    }
    .search-program .search-box .search-form::before {
        width: 100%;
        height: 1px;
        top:0;
    }
    .search-detail-btn {
        display: none;
    }
    .search-tag-box a {
        padding: 3px;
        font-size: 0.9em;
    }
}

/* ## list-sort-style ## */
.list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sort-box {
    display: flex;
    gap: 10px;
}
.sort-txt {
    padding: 0 10px;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: pointer;
    background: #eee;
    color: #888;
    line-height: 35px;
    white-space: nowrap;
}
.sort-txt:hover {
    color: var(--color-primary);
}
.sort-txt.active {
    background: var(--color-primary);
    color: #fff;
}
.sort-ico-box {
    display: flex;
    gap: 5px;
    border-left: 1px solid #ddd;
    padding-left: 10px;
}
.sort-ico {
    display: inline-flex;
    font-size: 0em;
}
.sort-ico::after {
    content: "\e196";
    font-size: 18px;
    font-family: "Font Awesome 6 Sharp";
    font-weight: 900;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.sort-ico.view-block::after {
    content: "\e196";
}
.sort-ico.view-list::after {
    content: "\f03a";
}

.sort-ico:hover:after {
    background: #efefef;
}
.sort-ico.active::after {
    color: #fff;
    background: var(--color-primary);
    border: 1px solid #ddd;
}
@media all and (max-width: 767px) {
    .list-top {
        flex-flow: column;
        align-items: flex-start;
    }
}

/* ## form ## */

legend {
    display: none;
}
.form {
	border: 1px solid var(--color-border);
	border-radius: 16px;
}
.form-row {
	display: flex;
	align-items: stretch;
	/* padding: 15px 0; */
	border-bottom: 1px solid var(--color-border);
}
.form-row:last-child {
	border-bottom: none;
}
.form-row:last-child .form-title{
	border-radius: 0 0 0 16px;
}
.form-row:first-child .form-title{
	border-radius: 16px 0 0 0; 
}
.form-title {
	flex: 0 0 140px;
	padding: 15px 0;
	background: #f2f2f2;
	min-height: 84px;
    display: flex;
    align-items: center;
    padding-left: 24px;
	font-weight: 600;
	font-size: var(--font-body);
}
.form-item {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 5px;
	padding: 15px 0;
}
.form-group {
	display: flex;
	align-items: center;
	width: 100%;
	gap:10px;
	margin-bottom:5px;
	padding-inline: 20px;
}
.form-group.wrap {
    flex-wrap: wrap;
}
.form-group.column {
    flex-flow: column;
    align-items: flex-start;
}
.form-group:last-child {
	margin-bottom:0;
}
.form-group.form-size-md {
	width: 80%;
}
.form-group.form-size-sm {
	width: 50%;
}
.form-group.form-size-xs {
	width: 30%;
}
.form-input {
	width: 100%;
	border-radius: 4px;
}
.form-group.form-group-button .button {
	flex:0 0 auto;
}
.form-group.form-info {
    font-size: 0.9em;
}
.form-required::after {
	display: inline-flex;
	align-items: center;
	content:"*";
	color: #f24147;
	margin-left:5px;
}
@media all and (max-width: 1023px) {
	.form-group:is(.form-size-md,.form-size-sm,.form-size-xs) {
		width: 100%;
	}
	.form-info {
		font-size: var(--font-size-14);
	}
}
@media all and (max-width: 767px) {
	.form {
		border: none;
	}
	.form-row {
		display: block;
		border: none;
	}
	.form-title {
		display: block;
		margin-bottom:5px;
		min-height: auto;
		padding-left: 0;
		background: none;
		padding: 0;
	}
	.form-group {
		gap:5px;
		padding: 0;
	}
	.form-item {
		padding-top: 0;
	}
}



/* ## share ## */
.share-box {
	position: relative;
	display: inline-flex;
}
.share-open {
	width: 45px;
	height: 45px;
}
.share-item {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	background:#fff;
	border:1px solid #dfdfdf;
	transition: 0.2s ease-in-out;
	opacity: 0;
	visibility: hidden;
	z-index: 5;
}
.share-item.active {
	top: 0;
	opacity: 1;
	visibility: visible;
}
.share-list li {
	position: relative;
}
.share-list li::after {
	display: block;
	content:"";
	width: 15px;
	height: 1px;
	background:#dfdfdf;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.share-lnk {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	text-align: center;
	position: relative;
	color: #555;
	line-height: 1;
	font-size: var(--font-size-18);
}
.share-lnk:hover {
	color: var(--color-primary);
}
.share-lnk:where(.kakao,.band,.blog)::after {
	content:"";
	display: block;
	width: 100%;
}
.share-lnk.kakao::after {
	height: 20px;
	background:url("https://project.impacsys.kr/imPublish/img/icon-kakao.svg") no-repeat center top;
}
.share-lnk.band::after {
	height: 22px;
	background:url("https://project.impacsys.kr/imPublish/img/icon-band.svg") no-repeat center top;
}
.share-lnk.blog::after {
	height: 20px;
	background:url("https://project.impacsys.kr/imPublish/img/icon-blog.svg") no-repeat center top;
}
.share-lnk:where(.kakao,.band,.blog):hover::after {
	filter: invert(40%) sepia(73%) saturate(3463%) hue-rotate(201deg) brightness(104%) contrast(101%);
}
.share-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 45px;
	font-size: var(--font-size-20);
	color: #707070;
}
@media all and (max-width: 767px) {
	.share-open {
		width: 35px;
		height: 33px;
	}
	.share-lnk {
		width: 35px;
		height: 33px;
		font-size: 1em;
	}
	.share-lnk.kakao::after {
		height: 17px;
	}
	.share-lnk.band::after {
		height: 18px;
	}
	.share-lnk.blog::after {
		height: 17px;
	}
	.share-list li::after {
		width: 12px;
	}
	.share-close {
		height: 33px;
		font-size: var(--font-size-18);
	}
}



/* ## list-style ## */
.dash-list {
	padding-left: 7px;
}
.dash-list li {
	list-style: "-";
	padding-left: 5px;
	line-height: 1.5;
}
.dash-list li:not(:last-child) {
	margin-bottom: 3px;
}

/*
	** 팝업
*/
.popup-wrap .popup-header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}
.popup-wrap .popup-header h1 {
    font-size: 1.2em;
    font-weight: 600;
}
.popup-wrap .popup-header .logo {
    height: 30px;
}
.popup-wrap .popup-header .logo img {
    height: 100%;
}
.popup-wrap .popup-body {
    padding: 20px;
}
.popup-wrap .popup_btns.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background-color: #fff;
    margin: 0;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* 카드 공통 */
.card-group {
    gap: 20px;
    display: grid;
    grid-template-columns: 1fr;
}
.card-group + .card-group {
	margin-top: 20px;
}
.card-group.cols-2{
    grid-template-columns: repeat(2, 1fr);
}
.card-group.cols-3{
    grid-template-columns: repeat(3, 1fr);
}
.card-group.cols-4{
    grid-template-columns: repeat(4, 1fr);
}
.card-group.cols-5{
    grid-template-columns: repeat(5, 1fr);
}
.card-group .card-box.full-row{
    grid-column: 1 / -1;
}
.card-group.gap-lg { 
	gap: 20px; 
}
.card-group.gap-sm { 
	gap: 10px; 
}
@media (max-width: 1023px){
	.card-group.cols-4{
		grid-template-columns: repeat(2, 1fr);
    }
	.card-group.cols-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px){
    .card-group.cols-3{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px){
    .card-group{
        grid-template-columns: 1fr;
    }
	.card-group.cols-4{
        grid-template-columns: 1fr;
    }
	.card-group.cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 550px){
	.card-group.cols-2{
		grid-template-columns: 1fr;
	}
	.card-group.cols-5 {
        grid-template-columns: 1fr;
    }
}

.card-box {
    flex: 1;
    padding: 24px 20px 30px;
    border: 1px solid #A7C4EB;
    border-radius: 20px;
    min-width: 0;
}
.card-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2a44;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #c7d7ef;
}
.card-title.none-border {
    border-bottom: none;
    margin: 0;
}
.card-desc {
    font-weight: 500;
    /* font-size: 18px; */
}
.card-table {
    width: 100%;
    margin-top: 20px;
}
.card-table th,
.card-table td { 
    border: 1px solid #A7C4EB;
    padding: 7px 0;
    font-size: 18px;
    text-align: center;
}
.card-table th {
    background: #F6FAFF;
    font-weight: 600;
    border-bottom: none;
}
.card-table td {
    font-weight: 400;
}
.card-box .bullet-list {
    font-weight: 400;
	font-size: var(--font-size-18);
}
.card-box .bullet-list > ul {
    padding-left: 22px;
}
.card-box .bullet-list.pl-0 > ul {
    padding-left: 0;
}
@media all and (max-width: 767px) {
	.card-title {
		font-size: 18px;
	}
	.card-desc {
		font-size: 16px;
	}
	.card-box .bullet-list {
		font-size: var(--font-size-16);
	}
}

@media all and (max-width: 568px) {
	.card-title {
		font-size: 17px;
		padding-bottom: var(--space-xs);
	}
}


/* ## utils */
.flex { 
	display: flex;
}
.flex-col { 
	display: flex;
	flex-direction: column;
}
.flex-wrap { 
	flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}
.flex-2 { 
	flex: 2 !important;
}
.flex-3 { 
	flex: 3 !important;
}
.flex-4 { 
	flex: 4 !important;
}
.flex-5 { 
	flex: 5 !important;
}

.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}

.items-start { 
	align-items: flex-start;
}
.items-end { 
	align-items: flex-end;
}
.items-center { 
	align-items: center;
}
.items-stretch { 
	align-items: stretch;
}