@charset "utf-8";
/* CSS Document */

/***************************************************
              레이아웃 * preset
***************************************************/
/* body section */
.body-wrap {
	position: relative;
	overflow: hidden;
}

section,
.section-padding {
	padding: 20px 0;
	position: relative;
}

hr {
	background-color: #e7e7e7;
	border: 0;
	height: 1px;
	margin: 40px 0;
}

.alert hr {
	background: initial;
	margin: initial;
	border-top: 1px solid;
	height: initial;
	margin-bottom: 1rem;
	opacity: 0.2;
}

.main-container {
	min-height: calc(100vh - 174px);
}

/* Header -헤더 */
header
 {
	border-bottom: 1px solid #e7e7e7;
	font-family: 'Pretendard';
	position: sticky;
	top: 0;
	background: #ffffffd8;
	width: 100%;
	z-index: 100;
	height: 67px;
}

header>.container {
	height: 100%;
}

/* 사용자 정보 */
.user-bar {
	padding: 12px 0 0 0;
	text-align: right;
}

	
/* 헤더 */
.navbar-brand {
	margin-right: 4rem;
}

.navbar-brand img {
	height: 32px
}

/*네비게이션*/
.navbar {
	border-radius: 0;
	border: 0;
	margin-bottom: 0;
	justify-content: flex-start;
	height: 100%;
	padding-right: 12px
}

.navbar-expand-lg .navbar-nav .nav-link {
	padding: 0px 20px;
	box-sizing: border-box;
	font-weight: 700;
	font-size: 18px;
}

.nav-link {
	color: #333;
	font-size: 16px;
}

.nav-link:focus,
.nav-link:hover {
	color: var(--bluegray600);
}

.nav-item.on .nav-link{
	color: var(--blue400)
}

.nav-item:hover+.dropdown-menu {
	display: block;
}

.user-info a {
	margin-left: 12px;
	text-align: center;
	cursor: pointer;
}

.user-info a:hover i {
	color: var(--bluegray600);
	transition: 0.2s;
}

/*메인메뉴 (대메뉴) */
.navbar .megamenu {
	padding: 1rem;
}

@media all and (min-width: 992px) {

	.navbar .has-megamenu {
		position: static !important;
	}

	.navbar .megamenu {
		left: 0;
		right: 0;
		width: 100%;
		margin-top: 0;
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu {
		position: fixed;
		top: 67px;
		box-shadow: 0 3px 6px 1px rgb(128 128 128 / 28%);
	}
}



@media (max-width: 1200px) {
	.navbar-brand {margin :0 12px; width: 140px;}
	.navbar-brand img {}	
}
@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{overflow-y: auto; max-height: 90vh; margin-top:10px;}
	/*모바일*/
	.navbar-nav li {padding: 1rem;border-bottom:  1px solid #eee;background: #fff;}
	header :is(.container, .container-fluid) {--bs-gutter-x: 0rem; padding: 0; max-width: none}
	.nav-title {display: none;}
	.navbar .dropdown-menu {border-bottom: none;}
	.list-unstyled {flex-direction: column;}
	.list-unstyled li {width: 100%; border-bottom: none;}
	.navbar-collapse {box-shadow: 0 3px 6px 1px rgb(128 128 128 / 28%); margin-top: 8px;}
	.navbar-nav li.user-info {display: none;}
}

/*container 콘테이너*/
@media (min-width: 1200px) {
	.max-container {
		max-width: 90%;
		padding: 0;
	}

	.navbar .megamenu {
		padding: 0 0.5rem;
	}
}

@media (max-width: 1280px) {
	header .max-container {
		max-width: 100%
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		padding: 0 16px;
	}

	.navbar-brand {
		margin-right: 32px;
	}

	.navbar .megamenu {
		padding: 0rem 0rem;
	}
}

@media (max-width: 1140px) {
	.navbar-expand-lg .navbar-nav .nav-link {
		padding: 0 12px;
	}
}

@media (max-width: 576px) {
	section {
		padding: 20px;
	}

	.row>* {
		padding: 0;
	}
}

@media all and (min-width: 992px) {

	.navbar .has-megamenu {
		position: static !important;
	}

	.navbar .megamenu {
		left: 0;
		right: 0;
		width: 100%;
		margin-top: 0;
	}

}

@media(max-width: 991px) {

	.navbar.fixed-top .navbar-collapse,
	.navbar.sticky-top .navbar-collapse {
		overflow-y: auto;
		max-height: 90vh;
		margin-top: 10px;
	}

	header.before-login {
		height: 60px;
	}

}

/*Footer 하단 푸터*/
footer {
	background-color: var(--gray100);
	min-height: 48px;
	height: auto;
	padding: 6px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

footer .footer-cont {
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1;
}

footer .footer-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1;
}

footer h2 {
	font-size: 12px;
	color: var(--gray500);
	font-weight: 900;
	line-height: 1;
	margin: 0;
}

footer .footer-ptnr-nam {
	font-weight: 700;
}

footer .footer-title p {
	font-size: 12px;
	line-height: 1;
}

footer span {
	font-size: 12px;
	line-height: 1;
	margin-top: 0;
	padding: 0 10px;
	display: inline-block;
	font-weight: 300;
	color: var(--gray400);
	border-right: 1px solid #ccc;
}

footer .footer-cont > div + div {
	margin-top: 1px;
}

footer span:first-child {
	padding-left: 0px;
}

footer span:last-child {
	border-right: none;
}


/*로그인 페이지 */

#content.login {
	margin-top: 0
}

#login header {
	display: none;
}

#login #content {
/* 기존: height: calc(100vh - 140px); 를 아래와 같이 변경 */
    min-height: calc(100vh - 182px); /* 고정 height 대신 min-height 사용 */
    height: auto !important;         /* 높이가 유동적으로 변하게 함 */
    
    /* 기존: display: flex; 를 유지하되 모바일 대응 추가 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;         /* 세로 정렬 보장 */
}

#login .login-cont-box {
	width: 80%;
	max-width: 1100px;
	box-sizing: border-box;
}

#login .logo-box {
	height: 40px;
	display: flex;
	justify-content: space-between;
}
#login .logo-box h6 {
	min-width: 90px	
}
#login .logo-box .form-select {
	min-width: 120px
}

#login .logo-box img {
	height: 44px;
}

#login .login-box {
	display: flex;
	gap: 24px;
}

#login .login-box>div {
	flex: 1;
}

#login .login-cont-box .img-box {
	width: 50%;
	overflow: hidden;
}

#login .login-cont-box .img-box .img01 {
	max-width: 600px;
	height: 100%;
	background-image: url('../images/content/login_01.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-animation: kenburns-bottom 3s ease-out both;
	animation: kenburns-bottom 3s ease-out both;
}


@-webkit-keyframes kenburns-bottom {
	0% {
		-webkit-transform: scale(1.25) translateY(0);
		transform: scale(1.25) translateY(0);
		-webkit-transform-origin: 50% 84%;
		transform-origin: 50% 84%;
	}

	100% {
		-webkit-transform: scale(1) translateY(0px);
		transform: scale(1) translateY(0px);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
}

@keyframes kenburns-bottom {
	0% {
		-webkit-transform: scale(1.25) translateY(0);
		transform: scale(1.25) translateY(0);
		-webkit-transform-origin: 50% 84%;
		transform-origin: 50% 84%;
	}

	100% {
		-webkit-transform: scale(1) translateY(0px);
		transform: scale(1) translateY(0px);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
}

#login .login-box h2 {
	font-weight: 900;
	color: var(--gray800)
}

.login-input-box {
	border: 1px solid var(--gray200);
	width: 100%;
	margin-top: 16px;
	padding: 24px;
}

.login-input-box .input-box {
	display: flex;
	align-items: center;
	gap: 24px;
}

.login-input-box .input-box h6 {
	width: 120px;
}

.login-input-box .save-id {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.login-input-box .save-id input {
	width: 16px;
	height: 16px;
	border: 1px solid #ccc
}

.login-input-box .save-id label {
	color: var(--gray400);
	letter-spacing: -0.5px;
}

.login-input-box .save-id input:checked+label {
	color: var(--gray500);
	font-weight: bold;
}


/**********************************
		모바일 랜딩 페이지
**********************************/
.landing {
	min-width: 280px;
}
#login.login02 #content,
.landing #content {
	min-height: calc(100vh - 242px);
	height: auto;
}
#login.login02 header,
.landing header {
	height: 60px;
	display: flex;
    align-items: center;
    justify-content: space-between;
	border-bottom: none;
	padding: 14px 32px 14px 16px;
}
#login.login02 header .user-info,
.landing header .user-info {
	color: var(--gray800);
	font-size: 16px;
}

#login.login02 header img,
.landing header img
 {
	height: 32px;
}
#login .login-cont-box.page02 {
	margin-top : 0px	
}
#login.login02 .login-cont-box .img-box {
	height: 320px;
}
#login .login-cont-box .img-box .img02 {
	max-width: 600px;
	height: 100%;
	background-image: url('../images/content/login_02.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-animation: kenburns-bottom 3s ease-out both;
	animation: kenburns-bottom 3s ease-out both;
}
#login .login-cont-box .img-box .img03 {
	max-width: 600px;
	height: 100%;
	background-image: url('../images/content/login_03.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-animation: kenburns-bottom 3s ease-out both;
	animation: kenburns-bottom 3s ease-out both;
}

#login.login02 .login-cont-box .start-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.landing .accordion-body {
	height: 240px;
	overflow-y: scroll;
}
.landing .accordion-button {
	height: 40px;
	padding: 4px 12px;
}
.accordion-button {
	background-color: var(--bluegray200);
}
.landing .accordion-button.type02,
.landing .accordion-button.type02:not(.collapsed){
	background-color: var(--blue100);
}


.landing .accordion-button:not(.collapsed) {
	background-color: var(--bluegray200);
	box-shadow: none;
	color: var(--gray900);
	font-weight: bold;
	border-radius: 0;
}
.landing .accordion-item:first-of-type, 
.landing .accordion-item:first-of-type > .accordion-header .accordion-button,
.landing .accordion-item:last-of-type,
.landing .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
	border-radius: 0;
}
.landing .accordion-item:not(:first-of-type) {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.landing #content {
	display: flex;
    align-items: center;
    justify-content: center;
}
.landing #content .cont-box{
	width: 80%;
    max-width: 1100px;
    box-sizing: border-box;
} 
.landing .form-check input:checked + label {
	color: var(--gray900);
	font-weight: 700;
}

.landing .foot-btn-box {
	margin: 24px auto 16px;
	margin: 24px auto 16px;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-content: space-between;
	flex-direction: row;
	gap: 4px;
}
.landing .foot-btn-box button {
	min-width: 160px;
	width: 100%;
}

.landing #content .cont-box.responsive-box {
	max-width: 600px;
	margin: 16px auto;
}

.landing .responsive-box .input-group {
	gap: 8px;
}

.landing .selct-item-wrap {
    margin-top: 12px;
    display: flex;
    gap: 1%;
    justify-content: center;
}

.landing .certified-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.landing .selct-item-wrap input {
	display: none;
}

.landing .selct-item-wrap label {
	width: 49.5%;
	max-width: 200px;
	height: 160px;
	opacity: 0.5;
	border: 1px solid var(--gray200);
	display: flex;
	gap: 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	border-radius: 8px;
	cursor: pointer;
}
.landing .selct-item-wrap label.type02 {
	height: 100px;
	gap: 8px
}
.landing .selct-item-wrap label.type02 i {
	font-size: 32px;
}
.landing .selct-item-wrap label img {
	width: 80px;
}
.landing .selct-item-wrap input:checked + label {
	opacity: 1;
	border: 3px solid var(--blue400);
	color: var(--blue400);
	transition: 0.2s;
}

.landing .progress-wrap .item-box .text p {
	margin-top: 12px;
	color: var(--gray900);
	margin-bottom: 8px;

}
.landing .selct-item-wrap + .upload-file {
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid var(--gray200);
    margin-top: 12px;
    display: flex;
    align-items: center;
    padding: 12px 12px 0 12px;
}
.landing .selct-item-wrap + .upload-file .flex-box {	
    width: calc(100% - 100px);
}
.landing .selct-item-wrap + .upload-file .flex-box>p {
    min-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.landing .progress-wrap .item-box .progress-text {
	color: var(--blue400);
	font-weight: 600;
	margin-top: 16px;
}

.landing .data-list {
	border-top: 1px solid var(--gray200);
	margin-top: 24px;
	padding-top: 24px;
	padding-bottom: 12px;
}

.landing .data-list ul {
	max-width: 480px;
	margin: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landing .data-list ul  li {
    display: flex;
	opacity: 0.75;
    justify-content: space-between;
    align-items: center;
}

.landing .data-list ul li p {
	color: var(--gray200);

}

.landing .data-list ul li.success {
	opacity: 1;
	font-weight: 700;
	color: var(--blue400)
}

.landing .data-list ul li.success p {
	color: var(--blue300)
}

.landing .switch-wrap-list {
	margin-top: 24px;
}

.landing .switch-wrap-list>.input-group {
	margin-bottom: 12px;
	padding-left: 24px;
}
.landing .switch-wrap,.count-input-wrap {
	display: flex;
	gap: 0;
	width: 280px;
}
.landing .switch-wrap input[type='radio'] {
	display: none;
}

.landing .switch-wrap h6 {
	width: 120px;
}
.landing .switch-wrap label {
	border: 1px solid var(--gray400);
	padding: 12px 32px;
	width: 140px;
	cursor: pointer;
}
.landing .switch-wrap label:hover {
	background-color: var(--gray100);
}
.landing .switch-wrap label:nth-child(2) {
	border-right: 0;
	border-radius: 6px 0 0 6px;
}
.landing .switch-wrap label:nth-child(4) {
	border-radius: 0 6px 6px 0;
}
.landing .switch-wrap input:checked + label {
	background-color: var(--gray600);
	border-color: var(--gray600);
	color: var(--gray000);
}
.landing .count-input-wrap {
    justify-content: flex-end;
}
.landing .count-input-wrap div {
	display: flex;
    align-items: center;
    gap: 8px;
}

.landing .alert-box {
	height: 42px;
	background-color: var(--bluegray200);
	font-size: 18px;
	line-height: 1;
	padding: 12px;
	color: var(--gray800);
	font-weight: 700;
}

.landing .alert-box + p {
	color: var(--gray800)
}

/*
.landing .import-box {

	font-size: 20px;
	border: 2px solid #139AA4;
	color: #007E87;
	background-color: #EAFCFE;
	font-weight: 900;
	padding: 8px 12px;
	text-align: center;
	margin: 12px 0;
	box-shadow: 0 1px 0 1px #139AA4;

}
*/
/* [추천 1 - 한 줄 버전] 차분한 박스 + 내용 강조 */
.landing .import-box {
    font-size: 22px;           /* 기준 폰트 크기 */
    border: 1px solid #DDE2E6; /* 은은한 회색 테두리 */
    color: #33373A;            /* 기본 텍스트 색상 */
    background-color: #F4F7F9; /* 매우 밝은 회색/파란색 배경 */
    font-weight: 700;          /* 굵기 */
    padding: 16px 20px;        /* 내부 여백 */
    text-align: center;        /* --- 수정: 가운데 정렬 --- */
    margin: 16px 0;            /* 외부 여백 */
    border-radius: 8px;        /* 둥근 모서리 */
    box-shadow: none;          /* 기존 그림자 제거 */
}

/* "환급 예상 금액 :" (레이블) */
.landing .import-box span[data-lang="importBox"] {
    /* display: block; --- 제거 (한 줄로 만들기 위해) --- */
    font-size: 22px;           /* --- 수정: 폰트 크기 통일 --- */
    font-weight: 500;
    color: #5A6A75;            /* 차분한 회색톤 */
    /* margin-bottom: 4px; --- 제거 --- */
    margin-right: 8px;         /* --- 추가: 오른쪽 여백 --- */
}

/* 금액 (숫자) - Thymeleaf가 렌더링 */
.landing .import-box span[data-th-text] {
    font-size: 22px;           /* --- 수정: 폰트 크기 통일 --- */
    font-weight: 700;
    color: #33373A;            /* (마이너스 금액이므로) 붉은색 유지 */
}

/* '원' (단위) */
.landing .import-box span[data-lang="importBoxUnit"] {
    font-size: 22px;           /* --- 수정: 폰트 크기 통일 --- */
    font-weight: 700;
    color: #33373A;            /* (마이너스 금액이므로) 붉은색 유지 */
    margin-left: 2px;
}

	
/**** 반응형 *****/
@media (max-width: 960px) {
	footer {
		padding: 16px;
	}
	#login #content {
		padding-bottom: 16px;
	}
	#login .login-cont-box,
	.landing #content .cont-box {
		width: 90%;
	}
	#login .logo-box {
	 flex-direction: column;
     align-items: flex-start;
	 height: auto;
	}
	#login .logo-box .input-item {
		width: 100%;
		align-items: flex-start;
		background-color: var(--bluegray500);
		padding: 8px;
		border-radius: 4px;
	}
	#login .logo-box .input-item h6 {
		color: var(--gray000);
		padding: 0 8px
	}
	#login .logo-box .input-item select {
		width: 100%;
	}
	#login .login-box {
		display: block;
	}

	#login .login-cont-box .img-box:not(.type02) {
		display: none;
	}
	#login.login02 .login-cont-box .img-box.type02 {
		width: 100%;
		height: 200px;
		margin-bottom: 12px;
}
}


@media screen and (max-width: 960px) {
    #login #content {
        display: block;              /* 모바일에서 flex 해제: 요소들이 순서대로 쌓임 */
        padding-top: 50px;           /* 상단 여백 확보 */
        padding-bottom: 50px;        /* 하단 여백 확보 */
    }

    .login-cont-box {
        margin: 0 auto;
        display: block;
    }

    /* 푸터가 본문 뒤에 자연스럽게 오도록 설정 */
    .footer {
        position: relative !important; 
        bottom: auto !important;
        margin-top: 50px;
    }
}


@media (max-width: 580px) {
	.landing .switch-wrap, .count-input-wrap {
		width: 240px;
	}
	.landing .switch-wrap label {
		width: 120px;
		padding: 12px 0;
	}
}


@media (max-width: 420px) {
	.landing .switch-wrap, .count-input-wrap {
		width: 200px;
	}
	.landing .switch-wrap label {
		width: 100px;
	}
	.landing .switch-wrap-list>.input-group {
		padding-left: 8px
	}
	footer {
		height: auto;
	}
	.landing .foot-btn-box button {
		min-width: auto
	}
}

@media (max-width: 320px) {
	footer .footer-title {
    	align-items: flex-start;
    	flex-direction: column;
		margin: 16px 0;
}
#login.login02 header, .landing header {
	    	align-items: flex-start;
    	flex-direction: column;
		height: auto;
}
}