@charset "UTF-8";
/* ============================================================
   오시는 길 (dental.php?page=7) 전용 스타일
   참고 디자인: https://www.wanplant.com/html/introduce/contact.html
   - 아이콘은 원본과 동일한 icon_font 글리프 사용
     (위치핀 \E85E / 자동차 \E829)  ※ ../fonts/ 에 폰트 파일 필요
   - 모든 선택자를 .contact 하위로 한정하여 전역 스타일 오염 방지.
   ============================================================ */

/* ---------- 폰트: S-CoreDream (원본과 동일한 공개 CDN) ---------- */
@font-face {
	font-family: "S-CoreDream";
	font-weight: 400;
	font-display: swap;
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff") format("woff");
}
@font-face {
	font-family: "S-CoreDream";
	font-weight: 500;
	font-display: swap;
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff") format("woff");
}
@font-face {
	font-family: "S-CoreDream";
	font-weight: 600;
	font-display: swap;
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff") format("woff");
}
@font-face {
	font-family: "S-CoreDream";
	font-weight: 700;
	font-display: swap;
	src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff") format("woff");
}

/* ---------- 아이콘 폰트 (진료시간 페이지와 동일 파일 공용) ---------- */
@font-face {
	font-family: "icon_font";
	font-display: block;
	src: url("../fonts/icon_font.woff2") format("woff2"),
		url("../fonts/icon_font.woff") format("woff");
}

.contact {
	--color_main: #02B0F0;
	--color_sub: #f47a36;  /* 주황 */
	padding: 90px 20px 100px;
	box-sizing: border-box;
	color: #222;
	font-family: "S-CoreDream", "Noto Sans KR", "Malgun Gothic", sans-serif;
	line-height: 1.5;
	/* 어떤 자식도 가로 스크롤을 만들지 못하게 차단
	   (clip 미지원 브라우저는 hidden으로 폴백) */
	overflow-x: hidden;
	overflow-x: clip;
}
.contact * { box-sizing: border-box; }
.contact img { max-width: 100%; height: auto; }
.contact .section_01.center { text-align: center; }
.contact .inwrap {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* ---------- 제목 ---------- */
.contact .title {
	position: relative;
	padding-bottom: 40px;
}
.contact .title h2 {
	font-size: 50px;
	font-weight: 700;
	line-height: 1.2;
	color: #333;
	margin: 0;
}
/* 부제 — 시안 색상 */
.contact .title h5 {
	font-size: 24px;
	font-weight: 400;
	margin: 2rem 0 0;
}

/* ---------- 주소 / 전화번호 / 대중교통 (한 덩어리로 촘촘하게) ---------- */
.contact .section_01 h4 {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.4;
	color: #181818;
	margin: 0;
}
.contact .section_01 h3 {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.4;
	color: #181818;
	margin: 0;
	letter-spacing: 0.5px;
}
/* 전화번호 다음에 오는 "대중교통 이용 시"만 살짝 띄움 */
.contact .color_main { color: var(--color_main); }

/* ---------- 대중교통 ---------- */
.contact .flex {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 50px;
	margin: 10px 0 50px;
}
.contact .flex dl {
	display: flex;
	text-align: left;
	align-items: flex-start;
	gap: 20px;
	font-size: 24px;
	margin: 0;
}
.contact .flex dt {
	flex: none;
	font-weight: 600;
	background: var(--color_main);
	color: #fff;
	padding: 0 20px;
	border-radius: 100px;
	white-space: nowrap;
}
.contact .flex dd { margin: 0; font-weight: 600;}

/* ---------- 지도 ---------- */
.contact #map2 {
	width: 100%;
	border: 1px solid #d3d3d3;
	border-bottom: 0;
	overflow: hidden;
	line-height: 0;
}
/* 다음 지도(로드뷰) 임베드가 컨테이너를 절대 넘지 않도록.
   ※ 지도 높이는 CSS로 강제하지 않음 — JS에서 mapHeight로 렌더링해야
      지도 내부 좌표까지 맞아 마커가 중앙에 온다. */
.contact #map2 .root_daum_roughmap {
	width: 100% !important;
	max-width: 100% !important;
}

.contact .root_daum_roughmap .cont {
	display: none !important;
}

.contact #map2 .root_daum_roughmap .wrap_map { max-width: 100% !important; }

.contact .address {
	background: var(--color_main);
	color: #fff;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;      /* 폭이 모자라면 넘치지 말고 줄바꿈 */
	gap: 20px;
	text-align: left;
}
.contact .address h6 {
	color: #fff;
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}
.contact .address h6 i {
	flex: none;
	font-family: "icon_font";
	font-style: normal;
	background: #fff;
	color: var(--color_main);
	border-radius: 100px;
	margin-right: 10px;
	font-size: 1.5em;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
}
.contact .address h6 i.icon-quick_4::before { content: "\E85E"; }
.contact .address a {
	display: inline-block;
	padding: 10px 40px;
	border: 1px solid #fff;
	color: #fff;
	font-weight: 400;
	margin: 0 5px;
	min-width: 160px;
	font-size: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.contact .address a:hover { background: #fff; color: var(--color_main); }
.contact .address > div { flex: 0 1 auto; }
.contact .address h6 { min-width: 0; }

/* ============================================================
   태블릿 (max-width: 1024px) — 주소바가 한 줄에 안 들어가므로 세로 정렬
   ============================================================ */
@media screen and (max-width: 1024px) {
	.contact .address {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 14px;
	}
	.contact .address h6 { justify-content: center; }
	.contact .address a {
		padding: 8px 24px;
		min-width: 140px;
		font-size: 17px;
	}
}


.contact br.mobile { display: none; }

.wrap_controllers.hide {
	display: none;
}

.contact .parking {
	margin-top: 0.5rem;
}

.contact .parking_img {
	width: 100%;
}



/* ============================================================
   모바일 (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
	.contact { padding: 50px 15px 60px; }
	.contact .title { padding-bottom: 15px; }
	.contact .title h2 { font-size: 28px; }
	.contact .title h5 { font-size: 16px; }

	.contact .section_01 h4 { font-size: 18px; }
	.contact .section_01 h3 { font-size: 26px; }

	.contact .flex { flex-direction: column; gap: 20px; align-items: center; margin: 10px 0 30px; }
	.contact .flex dl {
		font-size: 16px;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
	.contact .flex dt { padding: 0 16px; }

	.contact #map2 { border-radius: 15px 15px 0 0; }

	.contact .address {
		flex-direction: column;
		padding: 20px 10px;
		text-align: center;
		gap: 10px;
	}
	.contact .address h6 { font-size: 15px; justify-content: center; }
	.contact .address h6 i { display: none; }
	.contact .address a {
		min-width: 67px;
		margin: 10px 5px 0;
		padding: 5px 16px;
		font-size: 14px;
	}
	.contact br.mobile { display: block; }
}