@charset "utf-8";

/* =====================================================================
   회사소개 About Us (To-Be) — en/sub/about.php 전용
   - 원본 시안 : MD_manual/⑥ EN · To-Be 회사소개 · PC ( en sub about.php)
   - .about .top.tobe 범위로 한정 (History / 헤더 / 푸터 영향 없음)
   - 국문 페이지(theme/basic/css/about.css)와 내용이 같으므로 수정 시 함께 반영
   ===================================================================== */

.about .top.tobe {
	display: flex;
	flex-direction: column;
	min-height: 800px;
}

.about .top.tobe .top_bg {
	height: auto;
	bottom: 0;
}

.about .top.tobe .cont {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: 10px;
}

.about .top.tobe .inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about .top.tobe .intro_txt {
	max-width: 1374px;
	padding-bottom: 60px;
	color: #fff;
	word-break: keep-all;
}

.about .top.tobe .intro_txt h2 {
	margin: 0;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.about .top.tobe .intro_txt p {
	margin: 0;
	font-size: 18px;
	line-height: 27px;
	color: #fff;
}

.about .top.tobe .intro_txt p.t1 {
	padding-top: 110px;
}

.about .top.tobe .intro_txt p.t2 {
	margin-top: 56px;
}

.about .top.tobe .intro_txt .hl {
	font-weight: 700;
	color: #4fcbde;
}

.about .top.tobe .intro_contact {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 45px;
	padding: 0 22px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50px;
	background: transparent;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}

.about .top.tobe .intro_contact .ico {
	font-size: 18px;
	line-height: 1;
}

.about .top.tobe .intro_contact:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.about .top.tobe .intro_contact:focus-visible {
	outline: 2px solid #4fcbde;
	outline-offset: 3px;
}

@media screen and (max-width: 1440px) {
	.about .top.tobe {
		min-height: 700px;
	}

	.about .top.tobe .intro_txt h2 {
		font-size: 48px;
	}
}

@media screen and (max-width: 1024px) {
	.about .top.tobe {
		min-height: 600px;
	}

	.about .top.tobe .intro_txt h2 {
		font-size: 38px;
	}

	.about .top.tobe .intro_txt p.t1 {
		padding-top: 70px;
	}

	.about .top.tobe .intro_txt p.t2 {
		margin-top: 36px;
	}
}

@media screen and (max-width: 768px) {
	.about .top.tobe {
		min-height: 500px;
	}

	.about .top.tobe .intro_txt p {
		font-size: 16px;
		line-height: 1.6;
	}

	.about .top.tobe .intro_txt p.t1 {
		padding-top: 50px;
	}

	.about .top.tobe .intro_txt p.t2 {
		margin-top: 24px;
	}
}

@media screen and (max-width: 640px) {
	.about .top.tobe .cont {
		padding-bottom: 40px;
	}
}

@media screen and (max-width: 480px) {
	.about .top.tobe .intro_txt h2 {
		font-size: 32px;
	}
}