/*body {margin:0; padding:0; padding-top:50px; font-family:Arial, sans-serif; background:#fafafa;}*/
body {margin:0; padding:0; padding-top:50px; 
font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', '맑은 고딕', sans-serif;
background:#fafafa;}

html {
	scroll-behavior: smooth; /* 전체 부드러운 스크롤 */
}
/* 헤더 */
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
	background:#fff;
	border-bottom:1px solid #eee;
	box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.header-inner {
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:90px;
}
/* 기본 숨김 (PC에서는 안보임) */
.mobile-topbar{
	display:none;
}

.logo img {height:40px;}
nav {display:flex; gap:40px; margin-left:30px; flex:1;}
nav a {text-decoration:none; color:#333; font-size:18px; font-weight:bold;}

/* 전화번호 */
.header-call{
	display:flex;
	align-items:center;
	gap:8px;
	color:#2c6fa3;
	font-weight:bold;
	font-size:20px; /* 메뉴보다 살짝 크게 */
	white-space:nowrap;
}

/* 아이콘 파란색 */
.call-icon{
	width:20px;
	height:20px;
	display:inline-block;
	background:#2c6fa3;
	mask:url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/telephone-fill.svg') no-repeat center / contain;
	-webkit-mask:url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/icons/telephone-fill.svg') no-repeat center / contain;
}

/* 메인슬라이드 */
.slider{
	position:relative;
	height:755px;
	overflow:hidden;
}

.slide{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	display:flex;
	align-items:center;
	justify-content:center;

	text-decoration:none;
	color:#333;

	opacity:0;
	transition:opacity 0.5s;
}

.slide.active{
	opacity:1;
}


.slide1{ background:#FFEDE3; }
.slide2{ background:#EAFCFD; } /* 연한 민트 (거의 흰색에 가까운 청록) */
.slide3{ background:#E8E4FF; } /* 연한 라벤더 (보라빛 파스텔) */
.slide4{ background:#F7F1DF; } /* 연한 베이지 (따뜻한 아이보리톤) */
.slide5{ background:#E6F3FF; } /* 밝은 하늘색 (쿨톤 파스텔 블루) */
.slide6{ background:#E6F7EE; } /* 연한 그린 */


.arrow {position:absolute; top:50%; transform:translateY(-50%); font-size:30px; cursor:pointer; color:#fff;}
.arrow.left {left:20px;}
.arrow.right {right:20px;}

/* 푸터 */
footer {margin:0; padding:0;}
.legal-box {width:100%; background:#e6e6e6; padding:40px 0;}
.inner {max-width:1200px; margin:0 auto; padding:0 20px; font-size:13px; line-height:1.6; color:#555;}
.legal-box p {margin:4px 0;}

.mobile-topbar.hide{
	display:none;
}

/* =====================
   스크롤 시 상태 제어
===================== */
/* topbar 숨김 */
body.topbar-hide .mobile-topbar{
  display:none;
}

/* 헤더를 위로 끌어올림 */
body.topbar-hide header{
  top:0 !important;
}

nav a.active{
	color:#2c6fa3; /* 메뉴 클릭시 */
}



/* ============================================================================================
	모바일 
============================================================================================ */

/* 기본 숨김 */
.menu-btn{ display:none; }
.mobile-menu{ display:none; }

@media(max-width:768px){


	/* body 여백 (topbar + header 포함) */
	body{
		padding-top:94px;
	}

	/* =====================
	 상단 모집번호 바
	===================== */
	.mobile-topbar{
		display:flex;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:24px;
		background:#f3f3f3;
		font-size:12px;
		color:#555;
		align-items:center;
		justify-content:center;
		z-index:10000;
	}

	/* =====================
	 헤더
	===================== */
	header{
		top:24px;   /* 기본은 topbar 아래 */
		flex-direction:row;
		align-items:center;
		padding:5px 10px;
	}

	.header-inner{
		height:auto;        /* 고정값 제거 */
		padding:3px 0;
	}

	.logo img{
		height:36px;
	}

	nav{display:none;}
	.header-call{display:none;}

	/* =====================
	 슬라이드
	===================== */
	.slider{
		height:300px !important;
	}

	.slide{
		font-size:20px;
	}

	/* =====================
	푸터
	===================== */
	.inner{
		font-size:11px;
		line-height:1.5;
	}

	/* header 기준 */
	header{
		position:fixed;
		top:24px;
		left:0;
		width:100%;
		height:60px;
		z-index:9999;
	}

	.header-inner{
		height:100%;
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}

	/* 햄버거 (완전 분리) */
	.menu-btn{
		position:absolute;
		right:35px;
		top:60%;
		transform:translateY(-50%);

		display:flex;
		flex-direction:column;
		gap:4px;

		width:24px;
		height:20px;

		z-index:10000;
	}

	.menu-btn span{
		height:2px;
		background:#333;
		border-radius:2px;
	}


	/* 메뉴 */
	.mobile-menu{
			position:fixed;
			top:0;
			right:-100%;
			width:70%;
			height:100%;
			background:#fff;
			z-index:99999;

			display:flex;
			flex-direction:column;
			padding-top:100px;
			gap:0;

			transition:0.3s;
			
	}

	.mobile-menu a{

		display:flex;
		align-items:center;
		color:#333;
		font-size:18px;
		font-weight:600;

		height:60px;      
		padding:0 20px;

		line-height:1;      
		text-decoration:none;
		border-bottom:1px dashed #ddd;

	}

	.mobile-menu a:last-child{
		border-bottom:none;
	}


	.mobile-menu.active{
		right:0;
	}
	.menu-close{
		position:absolute;
		top:30px;
		right:20px;
		font-size:24px;
		cursor:pointer;
	}
}


/* =========================
   기본 (PC)
========================= */
.mslider{
	display:none;
}

/* =========================
   모바일
========================= */
@media(max-width:768px){

	/* PC 슬라이드 숨김 */
	.slider{
		display:none !important;
	}

	/* =========================
	   컨테이너
	========================= */
	.mslider{
		display:block !important;
		position:relative;
		height:650px;
		overflow:hidden;
		background:#8fa6d0;
	}

	/* =========================
	   슬라이드
	========================= */
	.mslider .slide{
		position:absolute;
		width:100%;
		height:100%;
		opacity:0;
		transition:opacity 0.5s ease;
	}

	.mslider .slide.active{
		opacity:1;
	}
	

	/* =========================
	   이미지 (중앙 보정 핵심)
	========================= */
	.mslider .slide img{
		position:absolute;
		top:38%;
		left:48%;
		transform:translateX(-50%);
		width:300px;
		max-width:90%;
		height:auto;
		object-fit:contain;
		pointer-events:none;
	}

	/* =========================
	   텍스트 영역 (진짜 중앙)
	========================= */
	.mslider .mtext{
		position:absolute;
		top:35px;
		left:50%;
		transform:translateX(-50%);  /* 핵심 */
		width:100%;
		max-width:380px;             /* 중앙 느낌 핵심 */
		text-align:center;
		z-index:2;
		color:#222;
		padding:0;                   /* padding 제거 */
	}

	/* 서브 */
	.mslider .mtext .sub{
		font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
		font-size:24px;
		margin:0 0 4px;
		font-weight:800;
	}

	/* 타이틀 */
	.mslider .mtext h2{
		font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
		font-size:37px;
		margin:0 0 8px;
		font-weight:800;
		letter-spacing:-0.5px;

		word-break:keep-all;  
		line-height:1.2;

		white-space:normal; 
		font-style:italic;
	}

	/* 설명 */
	.mslider .mtext .desc{
		white-space:nowrap;
		display:inline-block;
		padding:10px 16px;
		border-radius:14px;
		font-size:18px;
		line-height:1.5;
		background:rgba(255,255,255,0.45);
		backdrop-filter:blur(6px);
		margin-top:4px;
	}

	/* =========================
	   화살표 (모바일 최적화)
	========================= */
	.mslider .arrow{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		font-size:14px;              /* 🔥 작게 */
		padding:6px 8px;             /* 🔥 축소 */
		color:#fff;
		border-radius:4px;
		z-index:10;
	}

	.mslider .arrow.left{
		left:6px;
	}

	.mslider .arrow.right{
		right:6px;
	}

	/* =========================
	   1번 슬라이드 전용
	========================= */

	.mslider .slide1{
		position:relative;   /* 🔥 이거 반드시 필요 */
	}

	/* 배경 */
	.mslider .slide1 .bg{
		position:absolute;
		inset:0;
		background:url('../img/햇살론-bg.png') no-repeat center top;
		background-size:cover;
		z-index:1;
	}

	/* 캐릭터 */
	.mslider .slide1 .obj{
		position:absolute;
		bottom:0;
		left:50%;
		transform:translateX(-50%);
		width:260px;
		height:200px;

		background:url('../img/햇살론-char.png') no-repeat center;
		background-size:contain;

		z-index:2;
	}

	.mslider .slide1 .mtext .sub{
		margin-top:15px;
	}

	/* 텍스트 */
	.mslider .slide1 .mtext{
		position:absolute;
		top:20px;
		left:50%;
		transform:translateX(-50%);
		width:100%;
		max-width:320px;
		text-align:center;
		z-index:3;
	}
	/******** 모바일 슬라이드 화살표 **************/
	.mslider .arrow{
		position:absolute;
		top:50%;
		transform:translateY(-50%);

		width:15px;              /* 줄임 */
		height:15px;

		background:rgba(0,0,0,0.05);  /* 연하게 */
		border-radius:50%;

		cursor:pointer;
		z-index:10;
	}

	/* 화살표 */
	.mslider .arrow::after{
		content:"";
		position:absolute;
		top:50%;
		left:50%;

		transform:translate(-50%, -50%);
		width:7px; 
		height:7px;

		border-top:2px solid #fff;
		border-right:2px solid #fff;
	}

	/* 왼쪽 */
	.mslider .arrow.left{
		left:8px;
	}

	.mslider .arrow.left::after{
		transform:translate(-50%, -50%) rotate(-135deg);
	}

	/* 오른쪽 */
	.mslider .arrow.right{
		right:8px;
	}

	.mslider .arrow.right::after{
		transform:translate(-50%, -50%) rotate(45deg);
	}
}
.slide{
	pointer-events:none; /* 기본은 클릭 막기 */
}

.slide.active{
	pointer-events:auto; /* 활성 슬라이드만 클릭 가능 */
}
/* =====================
   슬라이드 내부 레이아웃
===================== */
.slide-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-direction:row-reverse; /* 좌우 반전 핵심 */
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:0 60px;
	gap:40px;
}

/* =====================
   좌측 (이미지 영역)
===================== */
.slide-img{
	flex:1.4; /* 이미지 더 크게 */
	display:flex;
	justify-content:center;
}
.slide-img img{
	user-select:none;         /* 드래그 선택 방지 */
	-webkit-user-drag:none;   /* 이미지 드래그 방지 */
	pointer-events:none;      /* 클릭/드래그 이벤트 차단 */
}

/* =====================
   우측 (텍스트 영역)
===================== */
.slide-text{
	flex:1;
	text-align:left; /* 금융 느낌 유지 */
	color:#222;
	max-width:480px;
}

/* 상단 */
.slide-text .sub{
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-size:36px;
	font-weight:800;
	margin-bottom:20px;
}

/* 타이틀 */
.slide-text h2{
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif; /* 기존 유지 */
	font-size:70px;
	font-weight:900;
	margin:0 0 30px;
	letter-spacing:-1px;
	white-space:nowrap;
	font-style:italic;
}

/* 설명 */
.slide-text .desc{
	font-size:25px;
	/*color:#555;*/
	margin-bottom:20px;
	font-weight:600;
	line-height:1.5;
	white-space:nowrap;
}

/* 작은 설명 */
.slide-text .desc.small{
	font-size:16px;
	color:#777;
	margin-top:15px;
}

/* 버튼 */
/* 대출한도조회 (연한 회색) 
.slide-text .cta{
	display:inline-block;
	background:#f5f5f5;
	color:#333;
	border:1px solid #ccc;

	padding:14px 28px;
	border-radius:6px;
	font-size:18px;
	font-weight:700;
}*/

.slide-text .cta{
	display:inline-flex;
	align-items:center;
	gap:10px;

	background:#f5f5f5;
	color:#333;

	padding:14px 28px;

	border-radius:12px; 
	border:none;        /* 제거 */

	font-size:18px;
	font-weight:700;

	box-shadow:3px 4px 8px rgba(0,0,0,0.3);
	transition:all 0.2s ease;
}

/* 버튼 */
.slide-text .cta2{
	display:inline-block;
	background:#3b6ea5;
	color:#fff;
	padding:14px 28px;
	border-radius:6px;
	font-size:18px;
	font-weight:700;
}

.slide-text .cta2:hover{
	background:#325f8d;
}

.slide-text .cta a,
.slide-text .cta2 a{
	text-decoration:none; /* 밑줄 제거 */
	color:inherit;        /* 부모 색 그대로 */
}

/* =====================
   모바일
===================== */
@media(max-width:768px){

	.slide-inner{
		flex-direction:column; /* 모바일은 다시 세로 */
		text-align:center;
		gap:20px;
		padding:20px;
	}

	.slide-text{
		text-align:center;
		max-width:100%;
	}

	.slide-text h2{
		font-size:28px;
	}

	.slide-img img{
		width:180px;
	}
}
/* ===== 슬라이드 풀폭 ===== */
.slider{
	width:100vw;
	margin-left:calc(50% - 50vw);
}

/* ===== 내부 ===== */
.slide-inner2{
	position:relative;
	width:100%;
	max-width:1900px;
	height:540px;
	overflow:hidden;


	/*	background-image:url('img/햇살론20.png');  경로 */
	background-size:cover;       /* 꽉 채우기 */
	background-position:center;  /* 가운데 정렬 */
	background-repeat:no-repeat; /* 반복 방지 */
}

/* ===== 이미지 ===== */
.slide-img2{
	width:100%;
	height:540px;

}

/* 기존 이미지 유지 (안 잘림) */
.slide-img2 img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:right 25px;
	/*object-position:160% 25px;*/
}
/* ===== 텍스트 (오른쪽) ===== */
.slide-text2{
	position:absolute;
	top:50%;
	left:65%;
	transform:translateY(-50%);
	color:#222;
	z-index:2;
	max-width:480px;
	text-align:left;
	/*text-shadow:
		0 2px 8px rgba(0,0,0,0.5),
		0 0 20px rgba(0,0,0,0.2);*/
}

/* 서브 */
.sub2{
	font-size:22px;
	font-weight:700;
	margin-bottom:6px;
}

/* 제목 */
.slide-text2 h2{
	font-size:56px;
	font-weight:900;
	margin-bottom:20px;
	margin:0 0 16px 0;  /* 제목 아래 여백 */
}

/* 버튼 */
.cta2{
	display:inline-block;
	background:#f5f5f5;
	color:#333;
	border:1px solid #ccc;

	padding:14px 28px;
	border-radius:6px;
	font-size:18px;
	font-weight:700;
}

.cta3{
	display:inline-block;
	background:#3b6ea5;
	color:#fff;
	padding:14px 28px;
	border-radius:6px;
	font-size:18px;
	font-weight:700;
}
.cta2,
.cta3{
	text-shadow:none;
}
/* 설명 */
.desc2{
	font-size:18px;
	/*color:#555;*/
	margin-bottom:20px;
	font-weight:600;
	line-height:1.5;
}
/* 기본 (PC) */
.footer-info{
    font-size:18px;
}

/* 모바일 */
@media(max-width:768px){
    .footer-info{
        font-size:12px;   /* 원하는 크기로 조절 가능 */
        line-height:1.4;  /* 줄 간격 살짝 보정 */
    }
}

/* =====================
   PC 하단 중앙 CTA
===================== */
.pc-floating{
	display:none;
}

.pc-btn{
	display:flex;
	align-items:center;
	justify-content:center;

	width:300px;
	height:75px;

	font-size:25px !important;
	font-weight:400 !important;

	color:#fff;
	text-decoration:none;

	border-radius:50px;

	/* 고급 그라데이션 */
	background:linear-gradient(135deg, #2c6fa3 0%, #3f86c6 50%, #245c88 100%) !important;

	box-shadow:
		0 10px 25px rgba(0,0,0,0.15),
		inset 0 1px 0 rgba(255,255,255,0.2) !important;

	transition:box-shadow 0.25s ease; 
}

.pc-btn:hover{
		background:linear-gradient(135deg, #1f4f75, #2c6fa3, #163d5a)!important;
}

#form{
	scroll-margin-top:85px;
}

@media(min-width:769px){

	.pc-floating{
		display:flex;
		justify-content:center;

		position:fixed;
		left:0;
		bottom:30px;
		width:100%;

		z-index:9999;
	}

	.pc-btn{
		display:flex;
		align-items:center;
		justify-content:center;

		width:280px;          /* 🔥 크게 */
		height:70px;

		font-size:18px;
		font-weight:700;

		color:#fff;
		text-decoration:none;

		border-radius:50px;

		/* 그라데이션 */
		background:linear-gradient(135deg, #2c6fa3, #245c88);

		/* 입체감 */
		box-shadow:0 15px 35px rgba(0,0,0,0.2);

		transition:0.25s;
	}

	/* hover */
	.pc-btn:hover{
		transform:translateY(-4px) scale(1.03);
		box-shadow:0 20px 40px rgba(0,0,0,0.25);
	}
}



/* 모바일 하단 고정 바 */
.mobile-bottom-bar{
	display:none;
}

@media(max-width:768px){

	#form{
		scroll-margin-top:62px;
	}

	.mobile-bottom-bar{
		display:flex;
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		height:60px;
		z-index:9999;
	}

	.mobile-bottom-bar a{
		display:flex;
		align-items:center;
		justify-content:center;
		color:#fff;
		font-size:16px;
		font-weight:bold;
		text-decoration:none;
	}

	.btn-call{
		background:#2f3e4d; /* 어두운 톤 */
		flex:4;
	}

	.btn-consult{
		background:#2f6fed; /* 기존 메인 블루 */
		flex:6;
	}

	/* 하단바에 가려지는 문제 방지 */
	body{
		padding-bottom:60px;
	}


	
}


/* ===== 모바일 전용 CTA ===== */
.mobile-footer-cta{
	display:none;
}

@media(max-width:768px){

	.mobile-footer-cta{
		display:block;
		text-align:center;
		padding:30px 20px 20px;
		background:#f8f8f8;
	}

	.cta-sub{
		font-size:12px;
		color:#777;
		margin-bottom:5px;
	}

	.cta-phone{
		font-size:32px;
		font-weight:800;
		color:#2f6fed;
		margin:5px 0;
		letter-spacing:1px;
	}

	.cta-time{
		font-size:13px;
		color:#666;
		margin-bottom:20px;
	}

	.cta-btn{
		display:block;
		width:100%;
		max-width:320px;
		margin:0 auto;
		padding:14px 0;
		background:#888;
		color:#fff;
		border-radius:6px;
		text-decoration:none;
		font-size:15px;
		font-weight:600;
	}

}