pg견적문의 생성 및 퀵배너 변경
This commit is contained in:
@@ -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 } }
|
||||
|
||||
|
||||
/* ========================== 반응형 하단 버튼 공통 */
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
/* animate-in 클래스 붙으면 시간차 실행 */
|
||||
.txt_box.animate-in .main-tit {
|
||||
animation: txtSlideDown 0.7s ease forwards;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.txt_box.animate-in .sub-tit {
|
||||
animation: txtSlideDown 0.7s ease forwards;
|
||||
animation-delay: 0.15s;
|
||||
.txt_box.no-transition .main-tit,
|
||||
.txt_box.no-transition .sub-tit,
|
||||
.txt_box.no-transition .visual-btn-wrap {
|
||||
transition: none;
|
||||
}
|
||||
/* 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;
|
||||
animation-delay: 0.3s;
|
||||
opacity: 1;
|
||||
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 {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 32 KiB |
BIN
src/main/resources/static/img/pg_bn.png
Normal file
BIN
src/main/resources/static/img/pg_bn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -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 () {
|
||||
$box.addClass('animate-in');
|
||||
}, 0);
|
||||
// ② 두 프레임 후 transition 복원 + animate-in (브라우저가 초기 상태를 확실히 렌더링한 뒤 실행)
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
$box.removeClass('no-transition').addClass('animate-in');
|
||||
});
|
||||
});
|
||||
}
|
||||
// ③ Swiper 초기화
|
||||
const mySwiper = new Swiper('.MainSwiper', {
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<div class="quick-menu">
|
||||
<ul class="quick_list">
|
||||
<li>
|
||||
<a href="/service" target="_blank">
|
||||
<div class="icon_img"><img src="/img/common/pg_bn.png" alt="선 정산 서비스"></div>
|
||||
<a href="/bbs/insertQuote" target="_blank">
|
||||
<div class="icon_img"><img src="/img/common/pg_bn.png" alt="pg.선불업등록"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="sub-inner">
|
||||
<div data-aos="fade-up">
|
||||
<h2 class="sub-h2 text-center">
|
||||
PG 견적 문의
|
||||
PG·선불업 견적 문의
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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 layout:fragment="content">
|
||||
<!-- 각 페이지 콘텐츠가 여기에 삽입됩니다 -->
|
||||
</div>
|
||||
|
||||
<!-- 페이지별 추가 스크립트 -->
|
||||
<footer id="ft"></footer>
|
||||
|
||||
<!-- 퀵메뉴 -->
|
||||
<div th:replace="~{include/quick-menu :: quickMenu}"></div>
|
||||
|
||||
<!-- 페이지s별 추가 스크립트 -->
|
||||
<th:block layout:fragment="scripts"></th:block>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -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">
|
||||
<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" /> <!--구글머티리얼 아이콘-->
|
||||
|
||||
<title>매출정산서비스</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="wrapper" layout:fragment="content">
|
||||
<!-- ======================== HEADER -->
|
||||
<header id="hd" class="sub"></header>
|
||||
|
||||
@@ -249,7 +230,8 @@
|
||||
<!-- ══════════════════════════════════
|
||||
하단 CTA 버튼 4개
|
||||
══════════════════════════════════ -->
|
||||
<div class="evpg-ref-wrap">
|
||||
<!--
|
||||
<div class="evpg-ref-wrap">
|
||||
<div class="sub-inner">
|
||||
<div class="evpg-cta-row">
|
||||
<a href="chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://www.owra.net/imgs/solution_pc_menual01.pdf" target="_blank" class="evpg-btn-outline">
|
||||
@@ -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>
|
||||
</div>
|
||||
|
||||
<script src="/js/sub.js"></script>
|
||||
|
||||
<th:block layout:fragment="scripts">
|
||||
<script>
|
||||
/* 스크롤 페이드업 */
|
||||
const _obs = new IntersectionObserver(entries => {
|
||||
@@ -326,5 +277,6 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user