:root {
  --primary-color: #3c7cde;
  --secondary-color: #f9fafb;
  --border-color: #d1d5db;
  --text-color: #333;
  --text-color-02: #545557;
  --text-color-03: #3c7cde;
  --title-gray: #959595;
  --title-black: #222222;
  --title-name-blue: #3b85e6;
  --gray-light: #f3f4f6;
  --gray-dark: #6b7280;
  --blue-light: #e6efff;
  --green: #208925;
  --red: #9e3b3b;
  --th-blue: #437de9;
  --title-blue: #437de9;
  --radius-075: 0.75rem;
  --radius-1: 1rem;
  --radius-2: 2rem;
  --radius-3: 3rem;
  --white: #e6efff;
  --bg-color: #fff;
  --font-color: #333;
  --disabled-color: #ccc;
  --error-color: #d9534f;
  --today-outline: #007bff;
  --focus-outline: #333;
}

* {
  font-family: 'Noto Sans KR', 'Noto Sans Korean', 'Roboto', sans-serif;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  box-sizing: border-box;
  letter-spacing: -0.1rem;
}
html {
  font-size: 62.5%; /* 기본값: 1rem = 10px */
}

/*
@media screen and (max-width: 1600px) {
  html {
    font-size: 56.25%;
  }
  
  .nav-fin-main {
    height: 100%;
  }
  
  .nav-fin-container, .nav-fin-container, .nav-fin-steps-box, .nav-fin-content.active, .nav-fin-tab-box {
    transform: translateX(0) scale(0.9) !important;
    transform-origin: top center;
  }
  
  .tts-toggle {
    right: 4rem !important;
    top: 10rem !important;
  }
}

@media screen and (max-width: 1366px) {
  html {
    font-size: 50%; 
  }
}
*/

body {
  font-size: 1.6rem;
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  background-color: #eef2f6;
  color: var(--text-color);
  overflow-x: hidden;
}

/* font */
.fs-11{font-size: 1.1rem;}
.fs-12{font-size: 1.2rem;}
.fs-13{font-size: 1.3rem;}
.fs-14{font-size: 1.4rem !important;}
.fs-15{font-size: 1.5rem;}
.fs-16{font-size: 1.6rem;}
.fs-18{font-size: 1.8rem; line-height: 3.2rem;}
.fs-20{font-size: 2rem;}
.fs-21{font-size: 2.1rem;}
.fs-22{font-size: 2.2rem;}
.fs-24{font-size: 2.4rem;}
.fs-26{font-size: 2.6rem;}
.fs-28{font-size: 2.8rem;}
.fs-32{font-size: 3.2rem !important;}
.fs-34{font-size: 3.4rem;}

@media only screen and (max-width: 850px) {
    .fs-14{font-size: 1.2rem !important; line-height: 2.2rem;}
    .fs-16{font-size: 1.3rem; line-height: 2.3rem;}
    .fs-18{font-size: 1.4rem; line-height: 2.4rem;}
    .fs-19{font-size: 1.5rem; line-height: 2.5rem;}
    .fs-20{font-size: 1.6rem; line-height: 2.6rem;}
    .fs-21{font-size: 1.7rem; line-height: 2.7rem;}
    .fs-22{font-size: 1.8rem; line-height: 2.8rem;}
    .fs-23{font-size: 1.9rem; line-height: 2.9rem;}
    .fs-24{font-size: 2rem; line-height: 3rem;}
    /*.fs-20{font-size: 1.8rem; line-height: 1.5;}*/
    .fs-32{font-size: 2rem;}
    .fs-34{font-size: 2rem;}
}

.under{text-decoration: underline;}
.fc-blue-light{color: #003994 !important;}
.fc-blue{color: #003994 !important;}
.fc-yellow{color: #ffe440 !important;}
.fc-black{color: #000 !important;}
.fc-red{color: #E40000 !important;}
.fc-gray{color: #666666 !important;}
/*.fc-green{color: #39b549 !important;}*/
.fc-green{color: #208925 !important;}
.fc-violet{color: #91268f !important;}
.fc-orange{color: #C54D0F !important;}
.fc-pink{color: #e9058e !important;}
.fc-white{color: #fff !important;}
.fc-light{color: #707070 !important;}
.fc-main-blue-color{color:var(--primary-color) !important;}

/* 스크린리더 전용 텍스트 */
.visually-hidden {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden;
}

/* label + input 데이터값 표시 스타일 */
input.read-only-display {
  border: none !important;
  background: transparent !important;
  color: #000 !important;
  font-size: 1.6rem !important;
  cursor: default !important;
  outline: none !important;
  border-radius: 0.5rem;
}

input.read-only-display:focus {
  border: none !important;
  outline: none !important;
  border-radius: 0.5rem;
}

input.read-only-display:focus:focus-visible {
  border: none !important;
  outline: none !important;
  border-radius: 0.5rem;
}

/* label + input 데이터값 표시 스타일 + 적합여부 기본 */
input.verify {
  background: var(--gray-dark) !important;
  color: #FFF !important;
  width: 100% !important;
  height: 5rem !important;
  text-align: center;
}

/* 적합 */
input.verify.active {
  background: var(--green) !important;
}

/* common */
* {
	-webkit-overflow-scrolling: touch;
	word-break: keep-all;
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

*:focus:focus-visible {
	outline: 3px solid #E40000;
	border: 2px solid #fff;
	border-radius: 0.3rem;
	box-sizing: border-box;
	box-shadow: none;
	z-index: 1;
}

input[type=text].datepicker {
	display: inline-flex;
	position: relative;
	background: url(../../img/calendar.svg) no-repeat right 0.8rem center;
}

input[type=text], input[type=email], input[type=password], input[type=tel],
	textarea, select {
	-webkit-appearance: none;
	border: 0.1rem solid #ddd;
  border-radius: 0.5rem;
	background-color: #fff;
	height: 4.8rem;
	padding: 0 1rem;
	font-size: 1.6rem;
	box-sizing: border-box;
	font-family: 'Noto Sans KR', sans-serif;
	width: 100%;
	vertical-align: middle;
	color: #333;
}

input[type=tel] {
	text-align: right;
}

input[type=text]:disabled, input[type=password]:disabled, select:disabled
	{
	background-color: #ECECEC;
	opacity: 1;
}

textarea {
	width: 100%;
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
	height: 30rem;
	font-size: 1.4rem;
	background: none;
	border: none;
	border: 1px solid #ddd;
}

select::-ms-expand {
	display: none;
}


button {
	outline: none;
	box-shadow: none;
	border: none;
	background: none;
	font-family: 'Noto Sans KR', sans-serif;
	cursor: pointer;
	transition: all 0.2s ease;
}

/*button:hover {*/
	color: #0a64bf;
}

/*button.active {*/
	color: #0a64bf;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

em {
	font-style: normal;
}

caption, legend {
  position: absolute;
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

input[type=radio], input[type=checkbox] {
	outline: none;
}

input:focus:focus-visible, textarea:focus:focus-visible, select:focus:focus-visible {
	outline: 3px dashed #E40000;
	border: 2px solid #fff !important;
	border-radius: 0;
	box-sizing: border-box;
	box-shadow: none;
}

input[type=radio]:focus:focus-visible, input[type=checkbox]:focus:focus-visible{
	outline: 0px dashed #E40000;
	border: 0px solid #fff !important;
}

input[type=radio]:focus:focus-visible+label:before, input[type=checkbox]:focus:focus-visible+label:before{
	outline: 3px dashed #E40000;
	border: 2px solid #fff !important;
	border-radius: 0;
	box-sizing: border-box;
	box-shadow: none;
}

input.error {
	border: 1px solid #E60021;
}

input::placeholder {
  font-size: 1.6rem !important;
  color: var(--gray-dark); 
}

input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder {
  font-size: 1.6rem !important;
}

label {
	outline: none !important;
}

select {
	visibility: visible !important;
	background: #fff url(../../img/ico-arrow-bottom.svg) no-repeat right 1rem
		center;
	padding-right: 3.5rem;
	color: #555;
	background-size: 2.4rem 2.4rem;
}

input[type=radio] {
	width: 0rem;
	height: 0rem;
	position: absolute;
	margin-top: 0.82rem;
	/* opactiy: 0; */
}

.radio-position input[type=radio] {
	margin-top: 0.8rem;
	margin-left: 0.1rem;
}

input[type=radio]+label:before {
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 0.1rem solid #ddd;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	z-index: 1;
	margin-right: 0.6rem;
	vertical-align: top;
}

input[type=radio]+label:after {
	content: "";
	display: block;
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	/* background-color: #ddd; 웹접근성 markup 라디오 안쪽 색 제거 */
	left: 0.5rem;
	top: 0.5rem;
	z-index: 1;
	transition: all 0.2s ease;
}

input[type=radio]+label {
	line-height: 2rem;
	display: inline-flex;
	vertical-align: top;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	white-space: nowrap;
	font-size: 1.6rem;
	align-items: center;
}

input[type=radio]:checked+label {

}

input[type=radio]:checked+label:after {
	opacity: 1;
	background-color: #003994;
}

input[type=radio]:disabled+label:before {
	border: solid .1rem #dcdfe2;
	background-color: #f2f3f5;
	cursor: default;
}

input[type=radio]:disabled+label {
	cursor: default;
}

input[type=checkbox] {
	width: 0rem;
	height: 0rem;
	position: absolute;
	margin-top: 0.81rem;
}

input[type=checkbox]+label {
	display: inline-flex;
	position: relative;
	height: 3.6rem;
	cursor: pointer;
	align-items: center;
	vertical-align: middle;
	font-size: 1.6rem;
	color: #333;
	line-height: 1.3;
}

input[type=checkbox]+label:before {
	content: "";
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: solid 1px #ddd;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	z-index: 1;
	margin-right: 0.4rem;
	vertical-align: top;
	box-sizing: border-box;
	flex: none;
}

input[type=checkbox]:checked+label:before {
	background: url(../../img/ico-checked.svg) no-repeat;
	border: none;
	background-size: 2rem;
}

input[type=checkbox]:disabled+label:before {
	border: solid 0.1rem #dcdfe2;
	background-color: #f2f3f5;
	cursor: default;
}

input[type=checkbox]:disabled+label {
	cursor: default;
}

/* common */
.flex{display: flex;}
.wrap{flex-wrap: wrap;}
.just-center{justify-content:center;}
.just-between{justify-content:space-between;}
.align-center{align-items: center;}
.align-bottom{align-items: flex-end;}
.text-left{text-align: left !important;}

/* table */
table.table-default{ border-top: 2px solid #000;margin-bottom: 3rem;}
table.table-default.left td{text-align: left;}
table.table-default thead th{background: #F2F6FB; border-bottom: 1px solid #ddd; padding: 1rem 0; border-right: 1px solid #ddd; line-height: 140%; word-break: break-all;}
table.table-default thead tr:first-of-type th:last-of-type {border-right: none;}
table.table-default thead tr:last-of-type th:last-of-type{border-right: none;}
/*table.table-default tbody th{background: #FAFAFA; border-bottom: 1px solid #ddd; text-align: center; padding: 1rem;border-right: 1px solid #ddd; }*/
table.table-default tbody th{background: #F2F6FB; border-bottom: 1px solid #ddd; text-align: center; padding: 1rem;border-right: 1px solid #ddd; font-weight: 500; }
table.table-default tbody td{border-bottom: 1px solid #ddd; text-align: center; padding: 2rem 1.5rem;border-right: 1px solid #ddd; word-break: break-all;}
table.table-default tbody td:last-of-type {border-right: none;}
table.table-default tbody td.center{text-align: center;}
table.table-default tbody td.bg-blue{background-color: #F2F6FB;}
table.table-default thead tr
table.table-default tbody tr td:last-of-type{border-right: none;}
table.table-default tfoot tr td{background: #FAFAFA; border-bottom: 1px solid #ddd; text-align: center; padding: 1rem 0;border-right: 1px solid #ddd;}
table.table-default tfoot tr td:last-of-type{border-right: none;}
table.table-default thead tr.b-R-line th.b-R-line {border-right: 1px solid #ddd;}
table.table-default thead th.b-R-line {border-right: 1px solid #ddd !important;}
@media only screen and (max-width: 600px) {
  .out-five-year table.table-default tbody td {
    padding: 2rem 1px;
  }
}

/* 간단한 fade-in 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* file-download */
.file-download {
  display: inline-block;
  padding:10px 15px;
  background-color: #1279ef;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: all 1s ease;
}
.file-download:hover {
  background-color: #0b61c3;
  color: white;
}

/* select-box */
.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.8rem;
  width: 100%;
  font-size: 1.6rem;
  border-radius: 0.5rem;
  padding: 0 1rem;
  background: #fff;
  border: 0.1rem solid #ddd;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}

.dropdown.focus-visible .dropdown-toggle {
  outline: 2px solid #E40000;
}

.dropdown-text {
  flex-grow: 1;
  text-align: left;
}

.dropdown-arrow {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  font-size: 1.4rem;
  width: 100%;
  max-height: 25rem;
  overflow-y: auto;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  display: none;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f0f0f0;
  outline: none;
}

.dropdown-form-group {
  position: relative;
  width: 100%;
}

/* slide-box*/
/*클래스명 수정*/
.navi-slide-box{margin-bottom: 2.5rem;}
.navi-slide-box-head {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 1.5rem;
  background-color: #ffffff;
  width: 100%;
  height: 5.4rem;
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-size: 1.8rem; 
  padding: 2rem; 
  cursor:default;
  font-size: 1.9rem;
  color: var(--title-black);
  transition: border-radius 0.2s;
}
.navi-slide-box-head.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}

.change_text{
	font-size: 1.9rem;
	color: var(--title-black);
}

.navi-slide-box-head .img-angle{font-size: 1.9rem; color: var(--title-black);}

.navi-slide-box-head.active:before {
  content: '';
  display: block;
  position: absolute;
  background: #dddddd;
  height: 0.1px;
  width: 95%;
  top: 5.2rem;
}
.navi-slide-box-head .img-angle img{margin-left: 5px; transition: all 0.4s ease; transform: rotateZ(180deg);}

.navi-slide-box-con {
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  padding: 1rem 2rem 2.5rem 2rem; 
  display: none;
}
.navi-slide-box-con *{
  line-height: 3.2rem;
}
.navi-slide-box-con p{
  line-height: 2.6rem;
  margin-top: 0.5rem;
  text-indent: -1rem;
  padding-left: 1rem;
}
.navi-slide-box-head.active .navi-slide-box-con{display: block;}
.navi-slide-box-head.active .img-angle img{transform: rotateZ(0);}


@media only screen and (max-width: 600px) {
  .navi-slide-box{margin-top: 2.4rem;}
  .navi-slide-box-head{height:5rem; font-size: 1.4rem; padding: 0 1.2rem;}
  .navi-slide-box-con{padding:2rem 1.5rem;}
  .navi-slide-box-con *{line-height: 2.2rem;}
  .navi-slide-box-con p{line-height: 2.2rem;}
  .navi-slide-box-head.active .img-angle img {
    width: 50%;
  }
}


.nav-fin-header {
  border-bottom: 1px solid var(--border-color);
}

.tts-toggle {
  align-items: center;
  gap: 1rem;
  background-color: #d9eeff;
  padding: 1rem 2rem 2rem 2rem;
  border-radius: 11px;
  position: absolute;
  display: flex;
  right: 12rem;
  flex-wrap: wrap;
  flex-direction: column;
  top: 3rem;
  /* transform: translate(0, 100%); */
  opacity: 0;
  transition: all 3s ease;
  display: none; /* 사용여부에 음성지원 따라 비활성 */
}

.tts-toggle.index {
  top: 13rem;
}

.tts-toggle.show {
  opacity: 0.95;
  display: none; /* 사용여부에 음성지원 따라 비활성 */
}

.tts-toggle div {
  height: auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 1rem;
  border-radius: 5px;
  flex-direction: column;
  width: 100%;
  background-color: #ebf6ff;

}

.tts-controller-title {
  text-align: center;
  color: #06319f;
  font-size: 1.8rem;
}

.tts-controller-sub-title {
  color:#000;
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.tts-radio-group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  color: #000;
}
.tts-radio-group input[type="radio"] + label {
  margin-right: 4px;
  font-size: 1.4rem;
}
.ttsRate {
  width: 10rem;
}

.mobile-close {
	display: none;
}

@media only screen and (max-width: 600px) {
	/* #introBox, #introBox.show {
		display: none;
	} */
	
	#tts-controller, #tts-controller.show {
		display: none;
	}
	
	.nav-fin-top{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.mobile-close {
		display: inline-flex;
		font-size: 30px;
		padding: 10px;
	}
}

.nav-fin-top {
  background-color: #ffffff;
  padding: 3rem 0 2rem 0;
}

.nav-fin-sub {
  background-color: #fafbff;
  padding: 2.7rem 0 3.1rem 0;
}

.nav-fin-container {
  max-width: 1280px;
  width: 90%;
  margin: 0 auto;
}

.footer-logo {
  margin-bottom: 3rem;
}

.footer-cnt .call{
  font-size: 2rem;
  margin-bottom: 2.7rem;
  font-weight: 500;
}

.footer-cnt .addr{
  margin-bottom: 1rem;
}

.nav-fin-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.nav-fin-logo img{
  width: 378px;
  height: 42px;
}

.nav-fin-subtitle {
  font-size: 3.3rem;
  color: var(--title-black);
  font-weight: 500;
}

.nav-fin-subtext {
  color: var(--text-color-02);
  margin-top: 0.25rem;
  font-weight: 500;
}

.nav-fin-main {
  position: relative;
  padding: 3rem 1rem 8rem 1rem;
  transform-origin: left center;
  backface-visibility: hidden;
  perspective: 1500px;
  transition: transform 0.6s ease-in-out;
}

.slide-out-left {
  transform: rotateY(-90deg);
}

.slide-out-right {
  transform: rotateY(90deg);
}


.nav-fin-steps-box {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.nav-fin-steps {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.nav-fin-step {
  padding: 2.9rem 0;
  font-size: 2.5rem;
  border-radius: var(--radius-2);
  border: 4px solid var(--border-color);
  background-color: #fff;
  color: var(--title-gray);
  font-weight: 700;
  width: 100%;
  position: relative;
  text-align: center;
}

.nav-fin-step:hover {
	cursor: pointer;
}

.nav-fin-step.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.nav-fin-step.active span.title{
  color: var(--title-black);
}

.nav-fin-tab-box {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.nav-fin-tab {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.nav-fin-tab button {
  padding: 2.9rem 0;
  font-size: 2.5rem;
  border-radius: var(--radius-2);
  border: 4px solid var(--border-color);
  background-color: #fff;
  color: var(--title-gray);
  font-weight: 700;
  width: 100%;
  position: relative;
  text-align: center;
  transition: all 3s ease;
}

.nav-fin-tab button.active {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.nav-fin-tab button.active span.title{
  color: var(--title-black);
}

.nav-fin-content {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 0rem;
  align-items: flex-start;
  background: #fff;
  padding: 5rem;
  border-radius: 2rem;
  flex-direction: column;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

/* 중앙에 위치한 활성 상태 */
.nav-fin-content.active {
  opacity: 1;
  transform: translateX(0);
}

/* 오른쪽으로 사라질 때 */
.nav-fin-content.exit-right {
  opacity: 0;
  transform: translateX(50px);
}

/* 왼쪽으로 사라질 때 */
.nav-fin-content.exit-left {
  opacity: 0;
  transform: translateX(-50px);
}

.nav-fin-content-group {
  width: 100%;
  display: flex;
  margin: 0 auto;
  gap:2rem;
}

.nav-fin-content-group:focus {
  outline: none;
}

.nav-fin-content-group.result-group {
  flex-direction: column;
  gap:0;
}

.nav-fin-content-group.step02 .nav-fin-input-group {
  width: 64rem;
}

.nav-fin-form {
  flex: 2;
  background-color: #ffffff;
}

.nav-fin-fieldset {
  margin-bottom: 2rem;
  border: none;
}

.nav-fin-fieldset legend {
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

.nav-fin-text-group {
  margin-bottom: 3rem;
}

.nav-fin-text-group.result-title-group {
  text-align: center;
}

.nav-fin-btn-group {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
  align-items: center;
}

.nav-fin-btn-group.result-text-group {
  flex-direction: column;
  font-weight: 500;
  margin-top: 2rem;
}

.nav-fin-btn-group.result-text-group .result-list{
  gap:0.5rem;
}

.btn-group-text {
  font-size: 2.5rem;
  color: var(--title-black);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.nav-fin-button-box {
  display: flex;
  gap:1rem;
}

.nav-fin-input-group {
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 7rem;
}

.nav-fin-input-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
  color: #555;
  width: 18rem;
}

.nav-fin-input-group .radio-name {
  width: 13rem;
  color: #555;
}

.in-five-year, .out-five-year {
  display: none;
}

.in-five-year.active, .out-five-year.active {
  display: block;
}

/*
.nav-fin-input {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 0.5rem;
  border: none;
  border-bottom: 2px solid #ccc;
  background: transparent;
  color: #333;
  transition: border-color 0.3s;
  outline: none;
}
*/

.nav-fin-input::placeholder {
  color: #aaa;
  font-size: 0.95rem;
}

.nav-fin-input:focus {
  border-bottom-color: var(--primary-color);
}

.nav-fin-agree-group {
  margin-bottom: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.nav-fin-agree-group .agree-txt{
  color: var(--primary-color);
}

.nav-fin-business-number {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.nav-fin-business-number.holder-right input{
  text-align: right;
}

.nav-fin-business-number.holder-right input::placeholder {
  padding-right: 0.5rem;
}

.nav-fin-address-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  width: 100%;
}

.nav-fin-bottom-group {
  display: flex;
  margin: 0 auto;
  padding: 2rem 0;
}

.nav-fin-button {
  padding: 1.3rem 0;
  width: 9.5rem;
  font-size: 1.6rem;
  border-radius: 1rem;
  background-color: #e5e7eb;
  color: var(--text-color-02);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-fin-button.active {
  background-color: var(--th-blue);
  color: var(--white);
}

.nav-fin-button.active:hover {
  background-color:#2660cd;
  color: var(--white);
}

.nav-fin-button:hover {
  background-color: #d1d5db;
  color: var(--text-color);
}

.nav-fin-button.address-btn {
  background-color: var(--primary-color);
  color: var(--white);
}

.nav-fin-button-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.nav-fin-button-secondary {
  background-color: #4b5563;
  color: var(--white);
}

.nav-fin-button-primary:hover {
  background-color: #2c65bc;
  color: var(--white);
}

.nav-fin-button-secondary:hover {
  background-color: #383f4a;
  color: var(--white);
}

.nav-fin-button-period {
  background-color: var(--primary-color);
  color: var(--white);
}
.nav-fin-button-period:hover {
  background-color: #2c65bc;
  color: var(--white);
}

.nav-fin-button-end {
  background-color: #4b5563;
  color: var(--white);
}

.nav-fin-button-end:hover {
  background-color: #383f4a;
  color: var(--white);
}

.nav-fin-buttons {
    display: flex;
    margin: 0 auto;
    gap: 4rem;
}

.nav-fin-buttons button {
  padding: 1.5rem 7.5rem;
  border-radius: 3rem;
  font-size: 1.9rem;
}

.nav-fin-buttons button:focus {
  border-radius: 3rem;
}

.nav-fin-buttons button:hover{
  color: var(--white);
}

.nav-fin-radio-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.nav-fin-radio-group label{
  width: 10rem;
}

/*
.nav-fin-radio-group input[type="radio"] {
  position: absolute;
  left: -1rem;
  top: 0;
  width: 20px;
  height: 20px;
  appearance: none;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  transition: 0.2s;
}

.nav-fin-radio-group input[type="radio"]:checked {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  width: 16px;
  height: 16px;
}
*/

.nav-fin-sidebar {
  flex: 1;
  /*height: 67rem;*/
  height: 100%;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  padding: 2.9rem 2rem;
  border-radius: var(--radius-1);
  position: sticky;
  top: 2.35rem;
  will-change: top;
  margin-bottom: 5rem;
  transition: top 0.3s ease-in-out;
}

.nav-fin-sidebar.no-sticky {
  position: relative;
  padding: 5.5rem 2rem;
}

.nav-fin-sidebar.step-02 {
  flex: 1.5;
  margin-top: 7rem;
}

.nav-fin-sidebar h3 {
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
  margin-top: 0;
}

.nav-fin-sidebar h3.result-h3-title {
  font-size: 2.6rem;
  margin-bottom: 0;
}

.nav-fin-sidebar h3 .sidebar-title {
  color: var(--title-blue);
}

.result-all-web {
  display: block;
}

.result-all-mobile {
  display: none;
}

.result-false-guide {
  display: none;
}

.nav-fin-table {
  width: 100%;
  border-collapse: collapse;
  /*border: 1px solid var(--border-color);*/
  margin-bottom: 1.5rem;
}

.nav-fin-table th {
  background-color: var(--gray-light);
  font-weight: bold;
}

.nav-fin-table th,
.nav-fin-table td {
  text-align: center;
}

.nav-fin-table th{
  padding: 1.5rem 0;
}

.nav-fin-table td{
  padding: 1rem;
}

/*.nav-fin-table th{
  border: 1px solid #e5e7eb;
}*/

.nav-fin-table td {
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: #f8f8f8;
}

.nav-fin-table td:nth-last-child(1) {
  border-right: transparent;
}

.nav-fin-footer {
  background-color: #1f2937;
  color: #d1d5db;
  text-align: left;
  padding: 5.5rem 6.3rem;
  font-size: 1.6rem;
  z-index: 1;
  position: relative;
}

.nav-fin-table thead th{
  background-color: var(--th-blue);
  color: var(--white);
}

.nav-fin-table thead th:nth-child(n){
  border-right: 1px solid #fff;
}

/* .nav-fin-table tbody tr[class^="rec-"] td:first-child, .nav-fin-table tbody tr[class^="rev-"] td:first-child {
  background-color: #f2f2f2;
} */

.nav-fin-table tbody tr[class^="rev-"] td:first-child {
  background-color: #f2f2f2;
}

.nav-fin-table.table-side tbody tr:nth-child(n) td:first-child {
  background-color: #f2f2f2;
  border-right: 1px solid #fff;
}

.nav-fin-table.table-side tr.active th, .nav-fin-table.table-side tr.active td {
  background-color: #d9e5fb !important;
}

.nav-fin-table.rec-result tbody td.active{
  background-color: #d9e5fb !important;
}

/*.result-all-web .nav-fin-table tr:first-child {
  border-bottom: 1px solid #fff;
}*/

.result-all-web .nav-fin-table td[class^="rec-"]{
  background-color: #f2f2f2;;
}

.result-all-web .nav-fin-table tbody td[class^="td-name-"]{
  background-color: #d9e5fb !important;
}

.result-all-web .nav-fin-table tbody td[class^="td-text-"]{
  background-color: #f8f8f8;
}

.result-all-web .nav-fin-table thead th{
  background-color: #d9e5fb !important;
  color: var(--text-color);
  font-size: 1.6rem;
  font-weight: 400;
  border-bottom: 1px solid #fff;
}

.result-all-web .nav-fin-table .tbody-th-blue{
  background-color: var(--th-blue) !important;
  color: var(--white);
  border-bottom: 1px solid #fff;
  border-right: none;
  font-weight: 500;
}

.nav-fin-sidebar-content .result-content-text {
  display: flex;
  justify-content: center;
}

.nav-fin-sidebar-content span[id^="fund-rec-01-"].on, .nav-fin-sidebar-content span[id^="fund-rev-02-"].on {
  display: block;
}

.nav-fin-sidebar-content span[id^="fund-rec-01-"].off, .nav-fin-sidebar-content span[id^="fund-rev-02-"].off {
  display: none;
}

.nav-fin-table span[id^="fund-rec-"], .nav-fin-table span[id^="fund-rev-"], .nav-fin-table button[id^="fund-rec-"], .nav-fin-table button[id^="fund-rev-"] {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0 auto;
}

/* ON 상태일 때 */
.nav-fin-table span[id^="fund-rec-"].on, .nav-fin-table span[id^="fund-rev-"].on, .nav-fin-table button[id^="fund-rec-"].on, .nav-fin-table button[id^="fund-rev-"].on {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

/* OFF 상태일 때 */
.nav-fin-table span[id^="fund-rec-"].off, .nav-fin-table span[id^="fund-rev-"].off, .nav-fin-table button[id^="fund-rec-"].off, .nav-fin-table button[id^="fund-rev-"].off {
    background-color: var(--red);
    color: white;
    cursor: default;
}

.rec-list {
  border: none;
  padding: 0;
}

.rec-list > div:not(.rec-empty-msg) {
  opacity: 0;
  transform: translateY(60px); /* 더 아래서 시작 */
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding: 1.3rem;
  font-size: 1.6rem;
  color: var(--primary-color);
  display: none;
  background-color: #d9eeff;
  margin: 1rem 0;
  border-radius: 1rem;
}

.rec-empty-msg {
  padding: 1.3rem;
  font-size: 1.6rem;
  color: #666;
  display: block;
  text-align: center;
}

.agree-title{
  display: flex;
  font-size: 2.9rem;
  font-weight: 700;
  background-size:0.5rem auto;
  padding-left: 1.2rem;
  margin-left: -1.4rem; 
  line-height: initial;
  justify-content: center;
  color: var(--primary-color);
}

.guide-title{
  font-size: 2.9rem;
  font-weight: 700;
  background-size:0.5rem auto;
  padding-left: 1.2rem;
  margin-left: -1.4rem; 
  line-height: initial;
  display: flex;
  gap: 0.5rem;
}

.sub-title{
  font-size: 2.9rem;
  font-weight: 700;
  background: url(../../img/bg-title.svg) no-repeat 0 65%;
  background-size:0.5rem auto;
  padding-left: 1.2rem;
  margin-left: -1.4rem; 
  line-height: initial;
}

.sub-title-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--title-name-blue);
  margin-top: 3rem;
}

.result-title-name {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--title-blue);
  margin-top: 3rem;
}

.sub-text-name {
  font-size: 1.9rem;
  color: var(--title-black);
  margin-bottom: 0.8rem;
}

.bottom-line {
  /*width: 100%;*/
  padding-bottom: 4rem;
  border-bottom: 1px solid #dddddd;
}

.bottom-line.bold {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #87888a;
}

.bottom-green-line {
  /*width: 100%;*/
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--green);
}

.bottom-green-line.bold {
  /*width: 100%;*/
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--green);
  color: var(--green);
}

.bottom-blue-line {
  /*width: 100%;*/
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--primary-color);
}

.bottom-blue-line.bold {
  /*width: 100%;*/
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--primary-color);
  color: var(--title-name-blue);
}

/* btn */
.btn{display: inline-flex; border-radius: 5px; box-sizing: border-box; transition: all 0.2s ease; align-items: center; justify-content: center; font-size: 1.6rem; flex: none;}
.btn img{margin-left: 0.5rem; margin-top: 0.2rem;}
.btn:disabled{background: #ADADAD; color: #333333;}
.btn:focus{box-shadow: none;}
.btn-s{ height: 4rem; min-width: 13.5rem; border-radius: .6rem; font-weight: 300; padding: 0 1.6rem; font-size: 1.4rem;}
.btn-xs{ height: 2.4rem; min-width: 8rem; min-width: 6.2rem; font-size: 1.2rem; font-weight: 300; border-radius: .2rem;}
.btn-m{height:3.8rem; min-width: 9.5rem; font-weight: 400; padding-left: 1.5rem; padding-right: 1.5rem; line-height: 100%;}
.btn-m i,.btn-l i{margin-left: 1rem; font-size: 1.2rem; line-height: 100%; position: relative; margin-top: 0.2rem;}
.btn-m img,.btn-l img{margin-left: 1rem;}
.btn-w-18{width: 18rem;}
.btn-l{height: 5.6rem; font-size: 1.8rem; min-width: 16rem; padding: 0 1rem;}
.btn-wide{width: 40rem !important; margin-left: 0 !important; margin-right: 0 !important;}

.btn-blue{color: #fff !important; background-color: #003994;}
.btn-blue:hover{background-color: #2F436B}
.btn-white{background-color: #fff; border: 1px solid #ddd;}
.btn-white:hover{border: 1px solid #333333;}
.btn-black{color: #fff !important; background-color: #000;}
.btn-orange{color: #fff !important; background-color: #EB6B00 !important;}
.btn-orange.btn-wide {font-size: 2.3rem; font-weight: 700;}
.btn-orange:hover{background: #FF5C00 !important;}
.btn-red{color: #fff !important; background-color: #E40000;}
.btn-skyblue{color: #fff !important; background-color: #0079A2;}
.btn-skyblue:hover{background-color: #2f95c0;}
/* 20230302 추가 */
.btn-navy{color: #fff !important; background-color: #003994;}

.btn-list a{margin-right: 0.5rem; margin-top: 1.6rem;}
.btn:disabled{background-color: #f5f5f5; color: #888888 !important; border: .1rem solid #dddddd; cursor: default;}

@media only screen and (max-width: 600px) {
    .btn-s{ height: 3.8rem; min-width: inherit; font-size: 1.2rem;}
    .btn-m{height: 3rem; min-height: 3rem; font-size: 1.4rem;}
    .btn-l{height:3.8rem; font-size: 1.6rem; min-width: 0;}
    .btn-wide{width:100% !important;}
    .m-full{width: 100% !important; margin-top: 0.8rem; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important;}
    .m-select{width: 100% !important; margin-top: 0.8rem; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important;}
    .btn-list a{margin-top: 0.5rem;}
}

/* sound */
.speakBtn {
  background-color: var(--gray-dark);
  color: white;
  border: none;
  padding: 4px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.speakBtn img {
  width: 3rem;
  height: 3rem;
  display: flex;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* 슬라이드 전환용 오버레이 */
.page-flip-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: rotateY(0deg);
  transform-origin: left center;
  transition: transform 0.7s ease, opacity 0.7s ease;
  backface-visibility: hidden;
  perspective: 2000px;
}

/* 책장 넘기기 */
.page-flip-overlay.flip-left {
  opacity: 1;
  transform: rotateY(-120deg);
}

.page-flip-overlay.flip-right {
  opacity: 1;
  transform: rotateY(120deg);
}

@keyframes slideIn {
    to {
      transform: translateX(0);
    }
  }

  .slide-out-left {
    animation: slideOutLeft 0.6s forwards ease-in-out;
  }

  .slide-out-right {
    animation: slideOutRight 0.6s forwards ease-in-out;
  }

  @keyframes slideOutLeft {
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes slideOutRight {
    to {
      transform: translateX(100%);
    }
  }

/* mobile */
@media only screen and (max-width: 600px) {
  
  /* 기본 설정 */
  body {
    font-size: 1.4rem;
    padding: 0;
    margin: 0;
  }

  img {
    width: 100%;
    height: auto;
  }

  .nav-fin-container {
    width: 95%;
    padding: 0 1rem;
  }

  .nav-fin-content {
    padding: 3rem 2rem;
  }

  .nav-fin-content-group {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .nav-fin-content-group.step02 .nav-fin-input-group {
    width: 100%;
  }

  .nav-fin-top,
  .nav-fin-sub,
  .nav-fin-main {
    padding: 2rem 1rem;
  }

  /* 단계 표시 */
  .nav-fin-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .nav-fin-step {
    font-size: 1.8rem;
    padding: 1.5rem 1rem;
  }

  /* 탭 표시 */
  .nav-fin-tab {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .nav-fin-tab button {
    font-size: 1.8rem;
    padding: 1.5rem 1rem;
  }

  .nav-fin-subtitle {
    font-size: 2.4rem;
    line-height: 1.4;
  }

  .nav-fin-subtext {
    font-size: 1.4rem;
  }

  /* 입력 그룹 */
  .nav-fin-input-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .nav-fin-input-group label {
    width: 100%;
    font-size: 1.4rem;
  }

  .nav-fin-input {
    width: 100%;
    font-size: 1.4rem;
    height: 4.2rem;
  }

  .nav-fin-business-number,
  .nav-fin-address-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .nav-fin-business-number.mobile-row {
    flex-direction: row;
    align-items: center;
  }

  .nav-fin-business-number.mobile-col {
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 8rem;
  }

  /* 버튼 박스 */
  .nav-fin-button-box {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .nav-fin-button {
    width: 100%;
    padding: 1.2rem;
    font-size: 1.5rem;
  }

  .nav-fin-button-box .nav-fin-button {
    text-align: center;
  }

  .nav-fin-btn-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .nav-fin-btn-group.result-text-group .result-list {
    display: inline-block;
    text-align: left;
  }

  .btn-group-text {
    font-size: 1.6rem;
  }

  .result-all-web {
    display: none;
  }

  .result-all-mobile {
    display: block;
  }

  .agree-title{
    font-size: 2.4rem;
    max-width: 30rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .guide-title {
    font-size: 2.4rem;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 2px;
  }

  .sub-title {
    font-size: 2.2rem;
    margin-left: 0;
  }

  .sub-title-name {
    font-size: 1.9rem;
    margin-top: 2rem;
  }

  .sub-text-name {
    font-size: 1.6rem;
  }

  .result-title-name {
    font-size: 2.2rem;
  }

  .nav-fin-agree-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .nav-fin-logo img {
    width: 90%;
  }

  /* 버튼 영역 */
  .nav-fin-buttons {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .nav-fin-buttons button {
    width: 100%;
    padding: 1.3rem;
    font-size: 1.7rem;
    border-radius: 2rem;
  }

  /* 사이드바 */
  .nav-fin-sidebar {
    width: 100%;
    position: static;
    top: auto;
    height: auto;
    padding: 2rem 1.5rem;
  }

  .nav-fin-sidebar.no-sticky {
    padding: 2.5rem 2rem;
  }

  .nav-fin-sidebar.step-02 {
    margin-top: 0;
  }

  .nav-fin-sidebar h3 {
    font-size: 2rem;
  }

  .nav-fin-table th,
  .nav-fin-table td {
    font-size: 1.4rem;
    padding: 0.8rem 0.5rem;
  }

  /* 푸터 */
  .nav-fin-footer {
    padding: 2rem 1rem;
    font-size: 1.3rem;
    text-align: center;
  }

  .footer-cnt .call {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .footer-logo img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
}

/* 접근성: 모션 감소 사용자의 경우 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
  .nav-fin-main {
    transition: none !important;
    transform: none !important;
  }
  .page-flip-overlay {
    transition: none !important;
  }
}

/*적합자금 찾기 목록 결과*/
.nav-list-table{
	table-layout: fixed;
	color: #444;
	text-align: center;
	border-top: 2px solid #000;
}

.nav-list-table th{
	position: relative;
	padding: 1.6rem 0.5rem;
	color: #222;
	font-weight: 400;
	background: #FAFAFA;
	border-bottom: 1px solid #ddd;
	font-weight: 600;
	height: 5.8rem;
}

.nav-list-table th:before{
	content: "";
	position: absolute;
	left: 0;
	top: 30%;
	width: 1px;
	height: 40%;
	background: #ddd;
}

.nav-list-table td{
	padding: 1.5rem 0.5rem;
	border-bottom: 1px solid #ddd;
	color: #666;
	cursor: pointer;
}

.sub-table td{
	border-bottom: none;
}