@charset "utf-8";
/* 온라인 상담 쓰기 — GEO 최적화 페이지(page/geo-service.php) 하단 CONTACT 영역과 같은 디자인 */

.sub-conts-wrap.online-geo { width:100%; padding:0; }
.ol-contact {
	padding:140px 0;
	background:#111 url('/images/sub/geo/contact_bg.jpg') no-repeat center/cover;
	font-family:'Pretendard', sans-serif;
}
.ol-contact * { font-family:inherit; box-sizing:border-box; }
.ol-contact .ol-inner {
	display:grid;
	grid-template-columns:1fr 1.2fr;
	gap:100px;
	max-width:1300px; width:100%; /* 오른쪽 고정 메뉴(즐겨찾기 등)에 가리지 않게 */
	margin:0 auto; padding:0 30px;
}

/* 왼쪽 안내 */
.ol-contact .ol-title h5 {
	padding-bottom:12px;
	color:#fff; font-size:18px; font-weight:400; line-height:normal;
}
.ol-contact .ol-title h2 {
	color:#fff; font-size:56px; font-weight:700; line-height:1.36; letter-spacing:-1.12px;
	word-break:keep-all;
}
.ol-contact .ol-title p {
	padding-top:24px;
	color:#fff; font-size:24px; line-height:1.4; letter-spacing:-0.48px;
	word-break:keep-all;
}
.ol-contact .ol-tel {
	display:inline-flex; align-items:center; gap:10px;
	margin-top:40px; height:64px; padding:0 30px;
	border:1px solid rgba(255,255,255,.4); border-radius:50px;
	color:#fff; font-size:20px;
}
.ol-contact .ol-tel strong { color:#fff; font-weight:700; }

/* 오른쪽 폼 */
.ol-contact .ol-form-wrap {
	padding:50px 40px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,.20);
	background:rgba(255,255,255,.05);
	box-shadow:20px 20px 40px 0 rgba(0,0,0,.20);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
.ol-contact .ol-form-wrap h3 {
	padding-bottom:40px;
	color:#fff; font-size:24px; font-weight:600;
}
.ol-contact .ol-input-wrap li { display:flex; align-items:center; }
.ol-contact .ol-input-wrap li.ol-content { align-items:flex-start; }
.ol-contact .ol-input-wrap li.ol-content label { padding-top:12px; }
.ol-contact .ol-input-wrap li + li { margin-top:20px; }
.ol-contact .ol-input-wrap li label {
	flex:0 0 170px;
	color:#fff; font-size:20px; font-weight:500;
}
.ol-contact .ol-input-wrap li label .required { margin-left:3px; color:#7f9bff; }
.ol-contact .ol-input-wrap li .wr_content { flex:1; width:100%; }
.ol-contact .ol-input-wrap li input[type="text"],
.ol-contact .ol-input-wrap li input[type="tel"],
.ol-contact .ol-input-wrap li input[type="email"],
.ol-contact .ol-input-wrap li select,
.ol-contact .ol-input-wrap li textarea {
	width:100%; height:50px;
	padding:0 16px;
	border-radius:8px;
	border:1px solid rgba(230,230,230,.20) !important;
	background-color:transparent;
	color:#fff; font-size:16px;
	outline:none;
}
.ol-contact .ol-input-wrap li textarea {
	height:160px !important;
	padding:14px 16px;
	resize:vertical;
}
.ol-contact .ol-input-wrap li input::placeholder,
.ol-contact .ol-input-wrap li textarea::placeholder { color:#999; }
.ol-contact .ol-input-wrap li input:focus,
.ol-contact .ol-input-wrap li select:focus,
.ol-contact .ol-input-wrap li textarea:focus { border-color:rgba(255,255,255,.6) !important; }
.ol-contact .ol-input-wrap li select {
	padding-right:40px;
	cursor:pointer;
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 16px center;
	background-size:12px 8px;
}
.ol-contact .ol-input-wrap li select option { background:#222; color:#fff; }
.ol-contact #char_count_desc,
.ol-contact #char_count_wrap { color:#ccc; font-size:14px; }

/* 개인정보 동의 */
.ol-contact .ol-privacy {
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	margin-top:30px;
	color:#fff; font-size:16px;
}
.ol-contact .ol-privacy input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:#0E0ED8; }
.ol-contact .ol-privacy label { color:#fff; cursor:pointer; }
.ol-contact .ol-privacy-more {
	margin-left:auto; padding:0;
	border:0; background:none;
	color:#ccc; font-size:14px; text-decoration:underline; cursor:pointer;
}
.ol-contact .ol-privacy-text {
	flex:0 0 100%;
	margin-top:10px; padding:16px;
	border-radius:8px; background:rgba(0,0,0,.25);
	color:#ddd; font-size:14px; line-height:1.6;
}
.ol-contact .ol-privacy-text[hidden] { display:none; }

.ol-contact .ol-submit { margin-top:50px; }
.ol-contact .ol-submit button {
	width:100%; height:64px;
	border:none; border-radius:60px;
	background:#fff;
	color:#000; font-size:20px; font-weight:600;
	cursor:pointer;
}
.ol-contact .ol-submit button:disabled { opacity:.6; cursor:default; }

@media screen and (max-width: 1240px) {
	.ol-contact .ol-inner { gap:60px; }
}
@media screen and (max-width: 1024px) {
	.ol-contact .ol-inner { padding:0 15px; }
	.ol-contact .ol-title h5 { font-size:16px; }
	.ol-contact .ol-title h2 { font-size:46px; }
	.ol-contact .ol-title p { font-size:22px; }
	.ol-contact .ol-form-wrap { padding:40px 30px; }
	.ol-contact .ol-form-wrap h3 { font-size:22px; }
	.ol-contact .ol-input-wrap li label { flex:0 0 130px; font-size:18px; }
	.ol-contact .ol-input-wrap li input[type="text"],
	.ol-contact .ol-input-wrap li input[type="tel"],
	.ol-contact .ol-input-wrap li input[type="email"],
	.ol-contact .ol-input-wrap li select,
	.ol-contact .ol-input-wrap li textarea { font-size:14px; }
	.ol-contact .ol-submit button { height:58px; font-size:18px; }
}
@media screen and (max-width: 768px) {
	.ol-contact { padding:70px 0; }
	.ol-contact .ol-inner { grid-template-columns:1fr; gap:35px; }
	.ol-contact .ol-title h5 { padding-bottom:9px; font-size:13px; }
	.ol-contact .ol-title h2 { font-size:26px; }
	.ol-contact .ol-title p { padding-top:16px; font-size:15px; }
	.ol-contact .ol-tel { margin-top:20px; height:44px; padding:0 18px; font-size:15px; }
	.ol-contact .ol-form-wrap { padding:25px 20px; border-radius:10px; }
	.ol-contact .ol-form-wrap h3 { padding-bottom:20px; font-size:18px; }
	.ol-contact .ol-input-wrap li { display:block; }
	.ol-contact .ol-input-wrap li + li { margin-top:15px; }
	.ol-contact .ol-input-wrap li label { display:block; padding-bottom:12px; font-size:15px; }
	.ol-contact .ol-input-wrap li.ol-content label { padding-top:0; }
	.ol-contact .ol-privacy { font-size:14px; }
	.ol-contact .ol-submit { margin-top:35px; }
	.ol-contact .ol-submit button { height:46px; font-size:16px; }
}