pg견적문의 생성 및 퀵배너 변경

src/main/resources/static/css/common.css

@@ -454,7 +454,7 @@ body.page-inquiry #m_logo img {
 @media (hover:hover) {
 	.quick_wrap .top_btn:hover { border-color:var(--primary); color:var(--primary) }
 }
-@media (max-width:1400px) { .quick_wrap { display:none } }
+@media (max-width:1024px) { .quick_wrap { display:none } }
 
 
 /* ========================== 반응형 하단 버튼 공통 */

src/main/resources/static/css/main.css

@@ -57,37 +57,30 @@
 	letter-spacing:4pt;
 	word-break:keep-all;
 }
-@keyframes txtSlideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
 
-/* 초기 상태 — 애니메이션 전엔 숨김 */
+
+/* 초기 상태 ? 애니메이션 전엔 숨김 */
 .txt_box .main-tit,
 .txt_box .sub-tit,
 .txt_box .visual-btn-wrap {
     opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.7s ease, transform 0.7s ease;
 }
-
+.txt_box.no-transition .main-tit,
-/* animate-in 클래스 붙으면 시간차 실행 */
+.txt_box.no-transition .sub-tit,
-.txt_box.animate-in .main-tit {
+.txt_box.no-transition .visual-btn-wrap {
-    animation: txtSlideDown 0.7s ease forwards;
+    transition: none;
-    animation-delay: 0s;
-}
-.txt_box.animate-in .sub-tit {
-    animation: txtSlideDown 0.7s ease forwards;
-    animation-delay: 0.15s;
 }
+/* animate-in 클래스 추가 시 최종 상태 (transition이 재실행되지 않으므로 zoom 후 유지) */
+.txt_box.animate-in .main-tit,
+.txt_box.animate-in .sub-tit,
 .txt_box.animate-in .visual-btn-wrap {
-    animation: txtSlideDown 0.7s ease forwards;
+    opacity: 1;
-    animation-delay: 0.3s;
+    transform: translateY(0);
 }
+.txt_box.animate-in .sub-tit      { transition-delay: 0.15s; }
+.txt_box.animate-in .visual-btn-wrap { transition-delay: 0.3s; }
 
 /* swiper controller */
 #mainVisual .txt_wrap .swiper-controller {

src/main/resources/static/js/main.js

@@ -25,25 +25,32 @@ const slideData = [
     },
 ];
 
+setTimeout(function () {
+    $('.txt_box').addClass('animate-in');
+}, 100);
+
 // ② 텍스트 업데이트 함수 (fade out → 내용 교체 → fade in)
 function updateSlideText(index) {
     const d = slideData[index];
     const $box = $('#mainVisual .txt_box');
 
-    $box.removeClass('animate-in');
+    // ① transition 없이 즉시 초기 상태로 snap
+    $box.addClass('no-transition').removeClass('animate-in');
 
     $box.find('.main-tit').text(d.mainTit);
     $box.find('.sub-tit-line').text(d.subTitLine);
     $box.find('.sub-tit-bold').text(d.subTitBold);
 
-    // 클래스명 대신 순서로 선택
     const $btns = $box.find('.visual-btn');
     $btns.eq(0).attr('href', d.btn1.href).find('.btn-txt').text(d.btn1.text);
     $btns.eq(1).attr('href', d.btn2.href).find('.btn-txt').text(d.btn2.text);
 
-    setTimeout(function () {
+    // ② 두 프레임 후 transition 복원 + animate-in (브라우저가 초기 상태를 확실히 렌더링한 뒤 실행)
-        $box.addClass('animate-in');
+    requestAnimationFrame(function () {
-    }, 0);
+        requestAnimationFrame(function () {
+            $box.removeClass('no-transition').addClass('animate-in');
+        });
+    });
 }
 // ③ Swiper 초기화
 const mySwiper = new Swiper('.MainSwiper', {

src/main/resources/templates/include/quick-menu.html

@@ -5,8 +5,8 @@
     <div class="quick-menu">
         <ul class="quick_list">
             <li>
-                <a href="/service" target="_blank">
+                <a href="/bbs/insertQuote" target="_blank">
-                    <div class="icon_img"><img src="/img/common/pg_bn.png" alt="선 정산 서비스"></div>
+                    <div class="icon_img"><img src="/img/common/pg_bn.png" alt="pg.선불업등록"></div>
                 </a>
             </li>
             <li>

src/main/resources/templates/index.html

@@ -32,7 +32,7 @@
 							</div>
 							<!-- 텍스트 -->
 							<div class="txt_wrap">
-								<div class="txt_box animate-in" data-aos="fade-down" data-aos-delay="50">
+                             	<div class="txt_box">
 									<h1 class="main-tit">FINANCE TECHNOLOGY SERVICE</h1>
 									<p class="sub-tit">
 										<span class="sub-tit-line">금융과 기술이 하나로 결합된</span>
@@ -347,7 +347,7 @@
 
 <script src="./js/main.js"></script>	
 <script >
-    AOS.init();
+    AOS.init({ once: true });
     feather.replace(); 
 
 	

src/main/resources/templates/insertQuote.html

@@ -22,7 +22,7 @@
                     <div class="sub-inner">
                         <div data-aos="fade-up">
 							<h2 class="sub-h2 text-center">
-								PG 견적 문의
+								PG&middot;선불업 견적 문의
 							</h2>
                         </div>
 

src/main/resources/templates/layout/main.html

@@ -6,37 +6,22 @@
     <title>오라인포</title>
     <th:block th:replace="~{include/common-head :: commonHead}"></th:block>
     <link rel="stylesheet" href="/css/main.css">
-
     <!-- 페이지별 추가 CSS/JS -->
     <th:block layout:fragment="head-extra"></th:block>
 </head>
 <body>
 
-<div id="wrapper">
-
-    <!-- ======================== HEADER -->
-    <header id="hd" class="sub"></header>
-
-    <!-- ======================== CONTAINER -->
-    <div id="container">
-        <div id="container_wrapper">
-
 <!-- ========= 페이지별 콘텐츠 ========= -->
 <div layout:fragment="content">
     <!-- 각 페이지 콘텐츠가 여기에 삽입됩니다 -->
 </div>
 
-        </div>
-    </div>
-
 <footer id="ft"></footer>
 
 <!-- 퀵메뉴 -->
 <div th:replace="~{include/quick-menu :: quickMenu}"></div>
 
-</div>
+<!-- 페이지s별 추가 스크립트 -->
-
-<!-- 페이지별 추가 스크립트 -->
 <th:block layout:fragment="scripts"></th:block>
 
 </body>

src/main/resources/templates/service.html

@@ -1,33 +1,14 @@
 <!doctype html>
-<html lang="ko">
+<html lang="ko"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout/default}">
 <head>
-    <meta charset="utf-8">
+    <title>매출정산서비스</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
-    <meta name="format-detection" content="telephone=no">
-    <title>회사소개 - 오라인포</title>
-
-    <script src="/js/jquery-3.7.1.min.js"></script>
-    <script src="/js/jquery-ui-1.13.3.min.js"></script>
-    <script src="/js/topmenu_script.js"></script>
-    <script src="/js/swiper.min.js"></script>
-    <script src="/js/aos.js"></script>
-    <script src="/js/gsap.min.js"></script>
-    <script src="/js/ScrollTrigger.min.js"></script>
-    <link rel="icon" href="/img/common/favicon.ico" type="image/x-icon">
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/common/apple-touch-icon.png">
-    <link rel="stylesheet" href="/css/common.css">
-    <link rel="stylesheet" href="/css/sub.css">
-    <link rel="stylesheet" href="/css/aos.css">
-    <link rel="stylesheet" href="/css/swiper.min.css">	
-    <script src="/js/feather.min.js"></script> <!-- feather 아이콘-->
-	<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet"> <!-- 영문폰트 -->
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <!--구글머티리얼 아이콘-->
-
 </head>
 <body>
 
-<div id="wrapper">
+<div id="wrapper" layout:fragment="content">
-
     <!-- ======================== HEADER -->
     <header id="hd" class="sub"></header>
 
@@ -249,6 +230,7 @@
                 <!-- ══════════════════════════════════
                      하단 CTA 버튼 4개
                      ══════════════════════════════════ -->
+               <!--
                      <div class="evpg-ref-wrap">
                     <div class="sub-inner">
                         <div class="evpg-cta-row">
@@ -271,46 +253,15 @@
                         </div>
                     </div>
                 </div>
+                -->
             </div>
        
             <!-- ========= SUB CONTENT [e] ========= -->
 
         </div>
     </div>
-
-    <footer id="ft"></footer>
-	<!-- 퀵메뉴 -->
-    <div id="quick_wrap" class="quick_wrap">
-        <div class="quick-menu">
-            <ul class="quick_list">
-                <li>
-                    <a href="https://www.owra.net/etc/solution" target="_blank">
-                        <div class="icon_img"><img src="/img/common/pg_bn.png" alt="선 정산 서비스"></div>
-                    </a>
-                </li>
-                <li>
-                    <a href="https://holaedu.co.kr/" target="_blank">
-                        <div class="icon_img"><img src="/img/common/hola_bn.png" alt="hola"></div>
-                    </a>
-                </li>
-                <li>
-                    <a href="delivera.co.kr" target="_blank">
-                        <div class="icon_img"><img src="/img/common/del_bn.png" alt="배달시대"></div>
-                    </a>
-                </li>
-				<li>
-                    <a href="#">
-                        <div class="icon_img"><img src="/img/common/ing_bg.png" alt="현재 진행 프로젝트"></div>
-                    </a>
-                </li>
-            </ul>
-            <a href="#" class="top_btn pc"><span class="material-symbols-outlined">arrow_upward</span> TOP</a>
 </div>
-    </div>
+<th:block layout:fragment="scripts">
-</div>
-
-<script src="/js/sub.js"></script>	
-     
 <script>
     /* 스크롤 페이드업 */
     const _obs = new IntersectionObserver(entries => {
@@ -326,5 +277,6 @@
         });
     });
 </script>
+</th:block>
 </body>
 </html>