<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/main}">
<head>
<body>
<div layout:fragment="content">
	<!-- wrapper [s] -->
	<div id="wrapper">
		
		<!-- hd [s] -->
		<header id="hd">	
			
		</header>
		<!-- hd [e] -->

		<!-- container [s] -->
		<div id="container">
			<!-- container_wrapper [s] -->
			<div id="container_wrapper">

				<!-- main_banner [s] -->
				<div id="mainVisual">
					<div class="main_slider_wrap">
						<div class="swiper MainSwiper">
							<!-- 배경 슬라이드 -->
							<div class="swiper-wrapper">
								<div class="swiper-slide list list1"></div>
								<div class="swiper-slide list list2"></div>
								<div class="swiper-slide list list3"></div>
							</div>
							<!-- 텍스트 -->
							<div class="txt_wrap">
                             	<div class="txt_box">
									<h1 class="main-tit">FINANCE TECHNOLOGY SERVICE</h1>
									<p class="sub-tit">
										<span class="sub-tit-line">금융과 기술이 하나로 결합된</span>
										<b class="sub-tit-bold">핀테크 솔루션 전문 기업</b>
									</p>
									<div class="visual-btn-wrap">
										<a href="/etc" class="visual-btn btn-primary">
											<span class="btn-txt">PG업 등록</span>
											<span class="material-symbols-outlined">arrow_right_alt</span>
										</a>
										<a href="/business/intro" class="visual-btn btn-white">
											<span class="btn-txt">사업소개</span>
											<span class="material-symbols-outlined">arrow_right_alt</span>
										</a>
									</div>
								</div>								
								<div class="swiper-controller">
									<button class="btn-nav btn--prev"><span class="sound_only">이전 슬라이드</span><i data-feather="arrow-left"></i></button>
										<div class="console-box">
											<!-- 현재 슬라이드 -->
											<span class="cur-slide"></span>
											<!-- pagination -->
											<div class="swiper-pagination"></div>
											<!-- 전체 슬라이드 -->
											<span class="total-slide"></span>
										</div>
									<button class="btn-nav btn--next"><span class="sound_only">다음 슬라이드</span><i data-feather="arrow-right"></i></button>
								</div>
							</div>
						</div>
					</div>
					<!-- SCROLL DOWN -->
					<div class="scroll-mark">
						<span class="scroll-text">SCROLLDOWN</span>
						<div class="scroll-line">
							<div class="scroll-bar"></div>
						</div>
					</div>
				</div>
				<!-- main_banner [e] -->

				<!-- section [s] -->
				<div id="section">
					<!-- inc01 [s] -->
					<section id="inc01">
						<div class="inner" data-aos="fade-up">
							<div class="group-title">
								<h2>금융 인허가, 시작부터 승인까지</h2>
								<p class="desc">PG·선불업 인허가 등록을 위한 요건 검토, 서류 준비, 금융당국 대응<br>
									전 과정을 전문 컨설팅으로 제공합니다.</p>
							</div>
							<div class="group-cont" role="tablist">
								<!-- 탭 메뉴 -->
								<ul class="tab-menu">
									<li id="tab-1" data-target="idx1" role="tab" aria-selected="false" aria-controls="panel-1">IT컨설팅</li>
									<li id="tab-2" data-target="idx2" role="tab" aria-selected="false" aria-controls="panel-2">결제 대행 시스템 </li>
									<li id="tab-3" data-target="idx3" role="tab" aria-selected="false" aria-controls="panel-3">PG 시스템</li>
									<li id="tab-4" data-target="idx4" role="tab" aria-selected="false" aria-controls="panel-4">선불 시스템</li>
									<li id="tab-5" data-target="idx5" role="tab" aria-selected="false" aria-controls="panel-5">매출 정산 시스템</li>
								</ul>
								<!-- 탭 콘텐츠 -->
								<div class="full-w">
									<ul class="tab-cont">
										<li id="panel-1" data-id="idx1" role="tabpanel" aria-labelledby="tab-1">
											<div class="text-box">
												<h3>급변하는 기술 동향 및 지속적인 발전을 
													위해 기업부설 연구소를 운영하고 있습니다.
												</h3>
												<div class="tag-wrap">
													<span>솔루션 개발 및 운영</span>
													<span>콘텐츠 관리시스템</span>
													<span>전자결제 대행</span>
												</div>
											</div>
											<div class="bg"><img src="/img/main/inc01/inc01_img01.jpg" alt="IT컨설팅"></div>
										</li>
										<li id="panel-2" data-id="idx2" role="tabpanel" aria-labelledby="tab-2">
											<div class="text-box">
												<h3>거래 처리부터 정산·재정산까지 전 과정을 아우르는
													통합 결제 기술 기반의 핀테크 서비스를 제공합니다.
												</h3>
												<div class="tag-wrap">
													<span>통합결제</span>
													<span>정산시스템</span>
													<span>PG플랫폼</span>
												</div>
											</div>
											<div class="bg"><img src="/img/main/inc01/inc01_img02.jpg" alt="결제 대행 시스템"></div>
										</li>
										<li id="panel-3" data-id="idx3" role="tabpanel" aria-labelledby="tab-3">
											<div class="text-box">
												<h3>결제 대행부터 인프라 구축, 정산, 가맹점 관리 기능까지
													포함하여 통합 결제 환경을 제공합니다.
												</h3>
												<div class="tag-wrap">
													<span>PG결제</span>
													<span>전자지불대행</span>
													<span>가맹점관리</span>
												</div>
											</div>
											<div class="bg"><img src="/img/main/inc01/inc01_img03.jpg" alt="PG 시스템"></div>
										</li>
										<li id="panel-4" data-id="idx4" role="tabpanel" aria-labelledby="tab-4">
											<div class="text-box">
												<h3>API 기반 아키텍처와 보안 중심 설계를 통해
													안정적이고 확장 가능한 선불 결제 인프라를 제공합니다.
												</h3>
												<div class="tag-wrap">
													<span>선불비즈니스</span>
													<span>플랫폼월렛</span>
													<span>B2B선충전</span>
												</div>
											</div>
											<div class="bg"><img src="/img/main/inc01/inc01_img04.jpg" alt="선불 시스템"></div>
										</li>
										<li id="panel-5" data-id="idx5" role="tabpanel" aria-labelledby="tab-5">
											<div class="text-box">
												<h3>가맹점의 매출 입금 누락 없이 빠르고
													정확한 정산을 지원하는 실시간 매출 정산 시스템입니다.
												</h3>
												<div class="tag-wrap">
													<span>매출정산시스템</span>
													<span>정산효율화</span>
													<span>리스크관리</span>
												</div>
											</div>
											<div class="bg"><img src="/img/main/inc01/inc01_img05.jpg" alt="매출 정산 시스템"></div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						
					</section>
					<!-- inc01 [e] -->
					<!-- inc02 [s] -->
					<section id="inc02">
						<div class="inner" data-aos="fade-up">
							<div class="sticky-container">
								<h2>
									<span class="mask">PG·선불업 서비스를 10년 이상 운영한
										실무 경험과 노하우를 바탕으로,
										신규 사업자의 안정적인 시작을 돕겠습니다.
									</span>
								</h2>
							</div>
						</div>
					</section>
					<!-- inc02 [e] -->
					
					<!-- inc03 [s] -->
					<section id="inc03">
						<div class="inner" data-aos="fade-up">
							<div class="group-title">
								<h2>오라인포의
									새로운 소식을 만나보세요.
								</h2>
							</div>
							<div class="swiper-navigation">
								<button class="btn--prev"><span class="sound_only">이전 슬라이드</span><i data-feather="chevron-left"></i></button>
								<button class="btn--next"><span class="sound_only">다음 슬라이드</span><i data-feather="chevron-right"></i></button>
								<a href="/bbs/press" class="btn-detail">자세히 보기 <span class="material-symbols-outlined">arrow_right_alt</span></a>
							</div>
						</div>
						<div class="group-cont" data-aos="fade-up">
<div class="swiper-container">
<ul class="swiper-wrapper">

<li class="swiper-slide" th:each="item : ${pressList}">
<div class="thumb-box">
<a th:href="@{/bbs/press/view(id=${item.id})}">
<img th:src="${#strings.isEmpty(item.mainImg) ? '/img/common/no_img.jpg' : item.mainImg}"
     th:alt="${item.title}">
</a>
<div class="overlay">
<div class="btn-plus">+</div>
</div>
</div>
<p class="card-title" th:text="${item.title}"></p>
</li>

</ul>
</div>                    
</div>
<div class="inc03_in">
							<div class="marquee" data-aos="fade-up">
								<ul>
									<li>Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
									<li aria-hidden="true">Online world recreating adventurer</li>
								</ul>
							</div>
						</div>
					</section>
					<!-- inc03 [e] -->  
					
					<!-- inc04 [s] -->
					<section id="inc04">
						<div class="inner">
							<div class="inc04-grid">

								<!-- 사업 진행 현황 -->
								<div class="inc04-card card-business">
									<div class="business-left">
										<strong class="card-tit">사업 진행 현황</strong>
										<a href="/business/progress" class="btn-plus" aria-label="더보기">
											<span class="material-symbols-outlined">add</span>
										</a>
									</div>
									<ul class="business-list">

										<th:block th:if="${#lists.isEmpty(progressList)}">
											<li><a href="/business/progress"><span class="b-tit">등록된 게시물이 없습니다.</span></a></li>
										</th:block>

										<li th:each="item : ${progressList}">
											<a th:href="@{/business/progress/view(id=${item.id})}">
												<span class="b-tit" th:text="${item.title}"></span>
												<span class="b-date" th:text="${item.regDate}"></span>
											</a>
										</li>

									</ul>
								</div>

								<!-- 고객문의 -->
								<div class="inc04-card card-contact">
									<div class="contact-content">
										<span class="contact-label">고객문의</span>
										<strong class="contact-tel">1544-1680</strong>
										<p class="contact-info">평일 : AM 9:00 ~ PM 18:00<br>토/일, 공휴일 휴무</p>
									</div>
									<div class="contact-mascot">
										<img src="/img/main/inc04/mascot.png" alt="마스코트">
									</div>
								</div>

								<!-- 오라人 소식 -->
								<div class="inc04-card card-sm card-white card-news">
									<a href="/bbs/owrainfo">
										<div class="sm-card-inner">
											<div class="sm-card-head">
												<strong class="card-tit">오라人 소식</strong>
											</div>
											<p class="sm-desc">오라인포의 소식 및<br>이슈 안내</p>
										</div>
										<div class="sm-icon">
											<img src="/img/main/inc04/ico_ora.png" alt="">
										</div>
									</a>
								</div>

								<!-- 인재채용 -->
								<div class="inc04-card card-sm card-white card-recruit">
									<a href="/careers/careers">
										<div class="sm-card-inner">
											<div class="sm-card-head">
												<strong class="card-tit">인재채용</strong>
											</div>
											<p class="sm-desc">진취적인 마인드로<br>지금 도전하세요!</p>
										</div>
										<div class="sm-icon">
											<img src="/img/main/inc04/ico_employ.png" alt="">
										</div>
									</a>
								</div>

								<!-- 제휴문의 -->
								<div class="inc04-card card-sm card-white card-partner">
									<a href="/bbs/partnership">
										<div class="sm-card-inner">
											<div class="sm-card-head">
												<strong class="card-tit">제휴문의</strong>
											</div>
											<p class="sm-desc">온라인광고와 마케팅 및<br>제휴 관련 문의</p>
										</div>
										<div class="sm-icon">
											<img src="/img/main/inc04/ico_coalition.png" alt="">
										</div>
									</a>
								</div>

							</div>
						</div>
					</section>
					<!-- inc04 [e] -->
					
					
				</div> 
				<!-- section [e] -->
			</div>
			<!-- container_wrapper [e] --> 
		</div>
		<!-- container [e] -->

		<!-- ft [e] -->
	</div>

</div>
<th:block layout:fragment="scripts">
<script >
	$("#hd").load("include/header");
	$("#ft").load("include/footer");
</script>

<script src="./js/main.js"></script>	
<script >
    AOS.init({ once: true });
    feather.replace(); 

	
	// Footer 영역 침범 방지
	function updateQuickPos() {
		const quick = document.querySelector('.quick_wrap');
		const footer = document.getElementById('ft');
		if (!quick || !footer) return;

		const defaultBottom = window.innerWidth <= 1400 ? 10 : 40; // px
		const footerTop = footer.getBoundingClientRect().top;
		const windowH = window.innerHeight;

		if (footerTop < windowH) {
			// 푸터가 화면에 진입했을 때
			const offset = windowH - footerTop + defaultBottom;
			quick.style.bottom = offset + 'px';
		} else {
			quick.style.bottom = defaultBottom + 'px';
		}
	}

	window.addEventListener('scroll', updateQuickPos);
	window.addEventListener('resize', updateQuickPos);
	updateQuickPos();
</script>
</th:block>

