@charset "UTF-8";

/* ============================================================
   해외홈페이지신청 (pageCode=30)
   Canvas: 1100×2400px  |  Prefix: ha-
   css_left = canvas_left - 30
============================================================ */

/* --- Container --- */
.ha-container {
	position: relative;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	overflow: hidden;
}

/* --- Canvas --- */
.ha-canvas {
	position: relative;
	max-width: 100%;
	min-height: 2400px;
	height: auto;
	overflow: hidden;
	font-family: 'Noto Sans KR', sans-serif;
	background-image: url('../../images/apply/overseas-apply/image_25240.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-bottom: 100px;
}

/* ============================================================
   HERO SECTION
============================================================ */

/* 히어로 섹션 Flex 래퍼 */
.ha-hero-flex-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 90px 40px 25px;
	position: relative;
	z-index: 3;
}

/* Hero text group wrapper */
.ha-hero-group {
	position: relative;
	width: 680px;
	display: flex;
	flex-direction: column;
}

/* Sub hero image */
.ha-hero-sub-img {
	position: relative;
	width: 287px;
	height: 143px;
	margin-top: 112px;
	/* 202px - 90px */
	overflow: hidden;
}

/* Hero title */
.ha-hero-title {
	position: relative;
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: left;
	margin: 0 0 6px;
	padding: 0;
	text-shadow: 0 0 5px #333333;
}

.ha-hero-title span {
	color: #fffc00;
}

/* Body text */
.ha-hero-body {
	position: relative;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #000000;
	text-align: left;
	margin: 0 0 30px;
	padding: 0;
}

.ha-hero-body span {
	color: #ffffff;
}

/* IDC text */
.ha-idc-text {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #FFFFFF;
	text-align: left;
	margin: 0;
	padding: 0;
	text-shadow: 0 0 3px #333333;
}

.ha-idc-text span {
	color: #FFFC00;
}

/* ============================================================
   CONTENT FLEX WRAPPER
============================================================ */
.ha-content-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	width: 100%;
	padding: 0 15px;
	/* 작은 화면에서의 좌우 여백 확보 */
	box-sizing: border-box;
}

/* ============================================================
   REGIONAL BOXES (green border, bg image)
============================================================ */

/* Common region box */
.ha-region-box {
	position: relative;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center top;
	border: 3px solid #6F8C02;
	border-radius: 15px;
	box-shadow: 0 0 0 #999999;
	overflow: visible;
	width: 100%;
	max-width: 990px;
	box-sizing: border-box;
}

/* West USA box */
.ha-west-box {
	height: 310px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25245.png');
	z-index: 6;
}

/* Central USA box */
.ha-central-box {
	height: 310px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25254.png');
	z-index: 7;
}

/* East USA box */
.ha-east-box {
	height: 260px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25252.png');
	z-index: 8;
}

/* Region box inner — flex column */
.ha-region-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 8px 22px 12px;
	box-sizing: border-box;
}

/* Title Wrap */
.ha-region-title-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
}

/* Phone icon */
.ha-region-icon {
	position: relative;
	width: 15px;
	height: 15px;
	margin-top: 6px;
	/* 텍스트 첫 줄 중앙에 맞춤 */
	flex-shrink: 0;
}

.ha-region-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Region title */
.ha-region-title {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #FFFFFF;
	text-align: left;
	margin: 0;
	padding: 0;
	text-shadow: 0 0 3px #333333;
}

.ha-region-title span {
	color: #c1e43d;
}

/* Phone text */
.ha-region-phone {
	position: relative;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #000000;
	text-align: left;
	margin: 0 0 10px;
	padding: 0;
}

/* Table wrapper */
.ha-region-table-wrap {
	position: relative;
}

/* Region table */
.ha-region-table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #BEBEBE;
	text-align: center;
}

.ha-region-table td {
	margin: 0;
	border: 1px solid #BEBEBE;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 15px;
	text-align: center;
	line-height: 150%;
	padding: 12px 10px 10px 12px;
}

.ha-region-table thead td {
	background-color: #95a654;
	color: #343f09;
	font-weight: bold;
}

.ha-region-table tbody td {
	background-color: #FFFFFF;
	color: #000000;
}

.ha-region-table .ha-td-avail {
	color: #ff5400;
	font-weight: bold;
	width: 20%;
}

.ha-region-table .ha-td-time {
	width: 30%;
}

.ha-region-table .ha-td-note {
	width: 20%;
}

/* ============================================================
   PROCESS SECTION
============================================================ */

/* Process box */
.ha-process-box {
	position: relative;
	width: 100%;
	max-width: 990px;
	min-height: 205px;
	background-color: #FFFFFF;
	background-image: url('../../images/apply/overseas-apply/boxBG_25253.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center top;
	border: 3px solid #6F8C02;
	border-radius: 15px;
	z-index: 9;
	display: flex;
	flex-direction: column;
	padding: 10px 22px 15px;
	box-sizing: border-box;
}

/* Process title */
.ha-process-title {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 12px;
	padding: 0;
	text-shadow: 0 0 3px #333333;
}

/* Step rows */
.ha-step-row {
	display: flex;
	align-items: center;
	gap: 0;
}

.ha-step-row1 {
	margin-bottom: 4px;
}

/* Step box common */
.ha-step-consult,
.ha-step-apply,
.ha-step-invoice,
.ha-step-payment,
.ha-step-data,
.ha-step-make,
.ha-step-open {
	position: relative;
	height: 40px;
	background-color: #FFFFFF;
	background-repeat: repeat-x;
	background-size: auto;
	background-position: center bottom;
	border: 1px solid #549E77;
}

.ha-step-consult {
	width: 200px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25267.png');
}

.ha-step-apply {
	width: 373px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25261.png');
}

.ha-step-invoice {
	width: 275px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25271.png');
}

.ha-step-payment {
	width: 200px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25275.png');
}

.ha-step-data {
	width: 200px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25282.png');
}

.ha-step-make {
	width: 200px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25280.png');
}

.ha-step-open {
	width: 200px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25277.png');
}

/* Step text */
.ha-step-text {
	position: absolute;
	top: 9px;
	left: 1px;
	width: 100%;
	height: 35px;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #387100;
	text-align: center;
	margin: 0;
	padding: 0;
}

/* Arrow elements */
.ha-arrow-1to2,
.ha-arrow-2to3,
.ha-arrow-4to5,
.ha-arrow-5to6,
.ha-arrow-6to7 {
	position: relative;
	width: 46px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	flex-shrink: 0;
}

.ha-arrow-1to2 {
	background-image: url('../../images/apply/overseas-apply/boxBG_25270.png');
}

.ha-arrow-2to3 {
	background-image: url('../../images/apply/overseas-apply/boxBG_25269.png');
}

.ha-arrow-4to5 {
	background-image: url('../../images/apply/overseas-apply/boxBG_25279.png');
}

.ha-arrow-5to6 {
	background-image: url('../../images/apply/overseas-apply/boxBG_25276.png');
}

.ha-arrow-6to7 {
	background-image: url('../../images/apply/overseas-apply/boxBG_25274.png');
}

/* ============================================================
   OPEN HOMEPAGE LIST SECTION
============================================================ */

/* Open list box */
.ha-list-box {
	position: relative;
	width: 100%;
	max-width: 990px;
	min-height: 401px;
	background-color: #FFFFFF;
	background-image: url('../../images/apply/overseas-apply/boxBG_25286.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center top;
	border: 3px solid #6F8C02;
	border-radius: 15px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	padding: 10px 38px 15px;
	box-sizing: border-box;
}

/* List title */
.ha-list-title {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 15px;
	padding: 0;
	text-shadow: 0 0 3px #333333;
}

/* Country item wrapper */
.ha-country-item {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

/* Country icon (장식 — small inline) */
.ha-usa-icon,
.ha-canada-icon {
	position: relative;
	width: 15px;
	height: 15px;
	overflow: hidden;
	margin-bottom: 2px;
}

.ha-usa-icon img,
.ha-canada-icon img {
	width: 100%;
	height: 100%;
	float: left;
}

/* Country label */
.ha-usa-label,
.ha-canada-label {
	position: relative;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.4;
	color: #387100;
	text-align: left;
	margin: 0 0 6px;
	padding: 0;
}

/* Church list */
.ha-usa-list,
.ha-canada-list {
	position: relative;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.4;
	color: #444444;
	text-align: left;
	margin: 0;
	padding: 0;
}

/* ============================================================
   BOTTOM BAR & BUTTONS
============================================================ */

/* Bottom decorative bar */
.ha-bottom-bar {
	position: relative;
	margin: 60px auto 0;
	width: 1040px;
	height: 58px;
	background-image: url('../../images/apply/overseas-apply/boxBG_25294.png');
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	z-index: 38;
}

/* Button group */
.ha-btn-group {
	position: relative;
	margin: 20px auto 0;
	display: flex;
	justify-content: center;
	gap: 40px;
	z-index: 39;
}

/* Left button */
.ha-btn-open {
	position: relative;
	width: 369px;
	height: 85px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #277aaf;
	border: 2px solid #1d618d;
	border-radius: 45px;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.3s;
}

.ha-btn-open:hover {
	background-color: #1d618d;
}

.ha-btn-open-text {
	position: relative;
	width: 298px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.6;
	color: #FAFF69;
	text-align: center;
	margin: 0;
	padding: 0;
	text-shadow: 0 0 3px #333333;
	z-index: 1;
}

/* Right button */
.ha-btn-build {
	position: relative;
	width: 369px;
	height: 85px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #1c8458;
	border: 2px solid #146241;
	border-radius: 45px;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.3s;
}

.ha-btn-build:hover {
	background-color: #146241;
}

.ha-btn-build-text {
	position: relative;
	width: 298px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.6;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
	padding: 0;
	text-shadow: 0 0 3px #333333;
	z-index: 1;
}

/* ============================================================
   반응형 800px
============================================================ */
@media screen and (max-width: 800px) {

	/* Canvas: fixed width → fluid */
	.ha-canvas {
		width: 100%;
		height: auto;
		position: relative;
		overflow: visible;
	}

	/* Container */
	.ha-container {
		padding: 0 15px;
	}

	/* Hero group: absolute → relative flow */
	.ha-hero-flex-wrap {
		flex-direction: column;
		padding: 20px 0;
	}

	.ha-hero-group {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		padding: 0 40px;
		margin-bottom: 20px;
	}

	.ha-hero-sub-img {
		display: none;
	}

	.ha-hero-title {
		font-size: 26px;
		color: #333333;
		text-shadow: none;
		margin-bottom: 10px;
	}

	.ha-hero-body {
		font-size: 15px;
		color: #333333;
		margin-bottom: 10px;
	}

	.ha-idc-text {
		font-size: 15px;
		color: #333333;
		text-shadow: none;
		margin-bottom: 0;
	}

	/* Region boxes */
	.ha-west-box,
	.ha-central-box,
	.ha-east-box {
		height: auto;
		background-image: none;
		padding: 0;
	}

	.ha-region-inner {
		height: auto;
		padding: 15px;
	}

	.ha-region-title-wrap {
		justify-content: flex-start;
		margin-bottom: 8px;
	}

	.ha-region-title {
		font-size: 16px;
		color: #387100;
		text-shadow: none;
		text-align: left;
		margin-bottom: 0;
	}

	.ha-region-icon {
		margin-top: 4px;
		/* 16px 폰트에 맞게 조정 */
	}

	.ha-region-phone {
		margin-bottom: 10px;
	}

	.ha-region-table-wrap {
		overflow-x: auto;
	}

	.ha-region-table {
		width: 100%;
		min-width: 500px;
	}

	/* Process section */
	.ha-process-box {
		min-height: auto;
		background-image: none;
		padding: 15px;
	}

	.ha-process-title {
		font-size: 16px;
		color: #387100;
		text-shadow: none;
		text-align: left;
		margin-bottom: 15px;
	}

	/* Step rows: 화살표 숨기고 세로 스택 */
	.ha-step-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ha-arrow-1to2,
	.ha-arrow-2to3,
	.ha-arrow-4to5,
	.ha-arrow-5to6,
	.ha-arrow-6to7 {
		display: none;
	}

	.ha-step-consult,
	.ha-step-apply,
	.ha-step-invoice,
	.ha-step-payment,
	.ha-step-data,
	.ha-step-make,
	.ha-step-open {
		width: 100%;
		height: 40px;
		margin-bottom: 8px;
		background-image: none;
	}

	.ha-step-text {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		line-height: 40px;
	}

	/* Open list section */
	.ha-list-box {
		min-height: auto;
		background-image: none;
		padding: 15px;
	}

	.ha-list-title {
		font-size: 16px;
		color: #387100;
		text-shadow: none;
		text-align: left;
		margin-bottom: 15px;
	}

	.ha-usa-icon,
	.ha-canada-icon {
		display: none;
	}

	.ha-usa-label,
	.ha-canada-label {
		margin-bottom: 8px;
	}

	.ha-usa-list,
	.ha-canada-list {
		overflow: visible;
		margin-bottom: 15px;
		line-height: 1.8;
	}

	/* Bottom bar: 숨김 */
	.ha-bottom-bar {
		display: none;
	}

	/* Button group */
	.ha-btn-group {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		flex-direction: column;
		align-items: center;
		padding: 0 15px;
		box-sizing: border-box;
		gap: 10px;
	}

	.ha-btn-open,
	.ha-btn-build {
		width: 100%;
		max-width: 400px;
		height: 60px;
	}

	.ha-btn-open-text,
	.ha-btn-build-text {
		width: 100%;
		font-size: 18px;
	}
}