diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css index 050dee0..bc8e2e5 100644 --- a/src/main/resources/static/css/common.css +++ b/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 } } /* ========================== 반응형 하단 버튼 공통 */ diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css index 4f8924a..707fe13 100644 --- a/src/main/resources/static/css/main.css +++ b/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; } - -/* 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 { diff --git a/src/main/resources/static/img/common/pg_bn.png b/src/main/resources/static/img/common/pg_bn.png index cc72bbe..15e3620 100644 Binary files a/src/main/resources/static/img/common/pg_bn.png and b/src/main/resources/static/img/common/pg_bn.png differ diff --git a/src/main/resources/static/img/pg_bn.png b/src/main/resources/static/img/pg_bn.png new file mode 100644 index 0000000..15e3620 Binary files /dev/null and b/src/main/resources/static/img/pg_bn.png differ diff --git a/src/main/resources/static/js/main.js b/src/main/resources/static/js/main.js index 4c5a296..87a4857 100644 --- a/src/main/resources/static/js/main.js +++ b/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 () { - $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', { diff --git a/src/main/resources/templates/include/quick-menu.html b/src/main/resources/templates/include/quick-menu.html index 6074c28..7644252 100644 --- a/src/main/resources/templates/include/quick-menu.html +++ b/src/main/resources/templates/include/quick-menu.html @@ -5,8 +5,8 @@
-
+

FINANCE TECHNOLOGY SERVICE

금융과 기술이 하나로 결합된 @@ -48,7 +48,7 @@ arrow_right_alt

-
+
@@ -347,7 +347,7 @@ - - - - - - - - - - - - - - - - + 매출정산서비스 -
- +
@@ -249,7 +230,8 @@ -
+
- -
- -
-
- - arrow_upward TOP -
-
- - - + + \ No newline at end of file