.container {max-width: 1400px; margin: 0 auto; background: #fff; } 
.formContent01 h2 {color: rgba(0,0,0,1); font-size: 1.2em; margin-bottom: 15px;} 
.formContent01 p, .formContent01 span {margin: 5px 0; color: #555;} 
.container2 {background: #f9f9f9;padding: 15px;border-left: 5px solid rgba(0,0,0,1);margin-bottom: 20px;border-radius: 5px;max-height: 200px; overflow-y: auto; font-size:14px;}
.container2 h3{margin-top:10px;}
.container2 .container2_tit{font-size:16px;}
.agree {margin: 20px 0; display: flex; justify-content: flex-end; align-items: center;} 
.agree label {margin: 0 10px;} 
.personal {margin-bottom: 30px;} 
table.register {width: 100%; border-collapse: collapse;} 
table.register tr{border-bottom:1px solid #ccc;}
table.register tr:nth-last-child(1){border-bottom:none;}
table.register td {padding: 10px; vertical-align: middle;} 
table.register td.tit {color: #111; font-weight: bold; font-size: 1.2em; padding: 15px 0; text-align: left; border-bottom:1px solid #111;} 
table.register td.article1 {width: 150px; background: #f4f4f4; font-weight: bold;} 
table.register td.article1 span{color:rgba(243, 39, 53, 1);}
table.register td.article2 {background: #f9f9f9; display:flex; flex-wrap: wrap; gap:5px;} 
.textbox {/* width: calc(100% - 20px); */ width:auto; min-width:200px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em;} 
.input-num-size {width: auto;} 
.register-txt {text-align: left; font-size: 0.9em; color: rgba(0, 0, 0, 1); padding: 10px 0; font-weight:600;} 
.question {flex-direction: column;}
.question p {margin-bottom: 10px; font-weight: 600; color: rgba(0,0,0,1); font-size:18px; padding-bottom:10px;} 
.question label {display: block; margin-bottom: 10px; font-size: 1em; color: #555;} 
.btn_chk {text-align: center; padding-top: 20px;} 
.submit_btn {background-color: rgba(200,32,45,1); color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em;} 
.submit_btn:hover { background-color: rgba(0,0,0,1);} 
.submit_btn2 {color: #777;  border-radius: 5px; padding: 10px 20px; cursor: pointer; font-size: 1em; margin-left: 20px;} 
.submit_btn2:hover {color: #555;} 

.btn-postcode {background-color: #111; color: #fff; border:1px solid #efefef; padding: 10px 20px;/*  border: none;  */border-radius: 5px;font-size: 1em;cursor: pointer;/* transition: background-color 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */}
.btn-postcode:hover {background-color: #fff;  border:1px solid #111; color:#111;}
.btn-postcode:active {background-color: #fff;  border:1px solid #111; color:#111; /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */}

.sub_title {background: url('../img/back_bg02.jpg') no-repeat bottom center; background-size: cover; padding-top: 80px; text-align: center;} 
.sub_title .sub_title_in {padding: 40px 0;}
.sub_title .sub_title_in img{width:600px;}

@media (max-width: 1024px) {
	.sub_title .sub_title_in{padding:20px 0;}
	.sub_title .sub_title_in img{width:50%;}
}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.container {padding: 10px;}
	.formContent01 h2 {font-size: 1.3em;}
	table.register td.article1{width:80px;}
	.textbox, .input-num-size {width: calc(100% - 10px); margin-top: 5px;}
	.agree {flex-direction: column; align-items: flex-start;}
	.agree label {margin: 5px 0;}
	table.register td {padding: 5px;}
	.submit_btn, .submit_btn2 {width: 100%; margin: 10px 0;}
	.btn-postcode{width:100%; padding:10px 0; margin-top:10px;}
}

/* 작은 모바일 화면 */
@media (max-width: 480px) {
	.container {margin: 5px; padding: 8px;}
	table.register td.article1 {width: 70px; font-size: 12px; padding: 8px 6px;}
	table.register td {padding: 6px;}
	.textbox {padding: 10px; font-size: 16px;}
	.container2 {font-size: 11px; max-height: 150px; padding: 10px;}
	.submit_btn {padding: 12px; font-size: 15px;}
}

/* 다크모드 지원
@media (prefers-color-scheme: dark) {
	.container {background: #1a1a1a; color: #fff;}
	table.register td.article1 {background: #2a2a2a; color: #fff;}
	table.register td.article2 {background: #1a1a1a;}
	.textbox {background: #2a2a2a; color: #fff; border-color: #444;}
	.container2 {background: #2a2a2a; color: #fff;}
}
 */
 
/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
	.textbox {
		border-width: 2px;
	}
	
	.submit_btn {
		border: 2px solid #fff;
	}
	
	table.register td.article1 {
		border: 1px solid #000;
	}
}

/* 포커스 표시 개선 */
.textbox:focus-visible,
.submit_btn:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid #667eea;
	outline-offset: 2px;
}

/* 스크롤바 스타일링 */
.container2::-webkit-scrollbar {
	width: 8px;
}

.container2::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}

.container2::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.container2::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* 인쇄 스타일 */
@media print {
	.submit_btn,
	.btn-postcode {
		display: none;
	}
	
	.container {
		box-shadow: none;
		border: 1px solid #000;
	}
	
	.container2 {
		max-height: none;
		overflow: visible;
	}
}

/* 중도금 대출 안내 버튼 스타일 */
.tax_payment_guide {
	margin: 50px 0;
	width: 100%;
	text-align: center;
}

/* 두 버튼을 나란히 배치하는 컨테이너 */
.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.btn_tax_payment {
	display: inline-block;
	text-decoration: none;
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	color: white;
	padding: 25px 40px;
	border-radius: 12px;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: 600;
	box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
	border: none;
	min-width: 280px;
	flex: 0 1 auto;
}

/* 중도금 대출 안내 버튼 (파란색 계열) */
.btn_tax_payment.btn_info {
	background: linear-gradient(135deg, #3498db, #2980b9);
	box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.btn_tax_payment.btn_info:hover {
	background: linear-gradient(135deg, #2980b9, #1f5f8b);
	box-shadow: 0 12px 35px rgba(52, 152, 219, 0.4);
}

/* 중도금 대출 신청 예약 신청 버튼 (주황색 계열) */
.btn_tax_payment.btn_reservation {
	background: linear-gradient(135deg, #ff6b35, #f7931e);
	box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.btn_tax_payment.btn_reservation:hover {
	background: linear-gradient(135deg, #e55a2b, #e67e22);
	box-shadow: 0 12px 35px rgba(255, 107, 53, 0.4);
}

/* 호버 효과 */
.btn_tax_payment:hover {
	background: linear-gradient(135deg, #e55a2b, #e67e22);
	box-shadow: 0 12px 35px rgba(255, 107, 53, 0.4);
}

/* 활성 상태 */
.btn_tax_payment:active {
	transform: translateY(0);
	box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

/* 글자 애니메이션 효과 */
.btn_tax_payment .text {
	display: inline-block;
	position: relative;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform-origin: center;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* 글자 글로우 애니메이션 */
@keyframes textGlow {
	0%, 100% {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
	}
	50% {
		text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
	}
}

.btn_tax_payment .text {
	animation: textGlow 3s ease-in-out infinite;
}

/* 부드러운 밑줄 애니메이션 */
.btn_tax_payment .text::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #fff, transparent);
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transform: translateX(-50%);
	border-radius: 1px;
}

.btn_tax_payment:hover .text::after {
	width: 100%;
}

/* 화살표 애니메이션 */
.btn_tax_payment .arrow {
	font-size: 20px;
	font-weight: bold;
	margin-left: 15px;
	vertical-align: middle;
	transition: transform 0.3s ease;
	display: inline-block;
}

.btn_tax_payment:hover .arrow {
	transform: translateX(5px);
}

/* 클릭 유도 펄스 애니메이션 */
@keyframes gentlePulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

.btn_tax_payment:hover {
	animation: gentlePulse 2s ease-in-out infinite;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
	.button-container {
		gap: 20px;
		flex-direction: column;
	}
	
	.btn_tax_payment {
		padding: 22px 35px;
		min-width: 280px;
		width: 100%;
		max-width: 320px;
	}

	.btn_tax_payment .text {
		font-size: 16px;
	}

	.btn_tax_payment .arrow {
		font-size: 18px;
		margin-left: 12px;
	}
}

@media (max-width: 480px) {
	.button-container {
		gap: 15px;
	}
	
	.btn_tax_payment {
		padding: 20px 30px;
		min-width: 260px;
		max-width: 300px;
	}

	.btn_tax_payment .text {
		font-size: 15px;
	}

	.btn_tax_payment .arrow {
		font-size: 16px;
		margin-left: 10px;
	}
}

