Commit @8e2c13df72bec05b99fb31672d13c1d9caa0a349

mycoms 2024-04-11

240411 김하영

@8e2c13df72bec05b99fb31672d13c1d9caa0a349

b032dd1

8e2c13d

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


         box-sizing: border-box;
     }
 
+    .swiper-slide {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        /* 파이어폭스 */
+    }
+
     html,
     body,
     #root {

         min-width: 100%;
 
 
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
     }
 
     .text-main,

         font-size: 1rem !important;
         margin-bottom: 0rem;
     }
-    .marketing-wrap-title h1{
+
+    .marketing-wrap-title h1 {
         font-size: 3rem;
     }
-    .accordion.active .accordion-num, .accordion.active .accordion-num span{
+
+    .accordion.active .accordion-num,
+    .accordion.active .accordion-num span {
         font-size: 2rem;
     }
-.history-box{
-    height: 100%;
-}
+
+    .history-box {
+        height: 75% !important;
+    }
+
     .solution-box {
         width: 100%;
         height: calc(100% - 182px) !important;

     }
 
     .slide-solution .portfolio-text {
-        padding: 0rem 1rem;
+        /* padding:20% 1rem; */
     }
 
     #contentHeadquarter,

         margin: 0;
         background-color: #fff;
     }
-nav ul li a{
-    font-size: 2rem !important;
-  }
+
+    nav ul li a {
+        font-size: 2rem !important;
+    }
+
     .mobil-menu ul li ul li a {
 
         font-weight: 300;

     }
 
 
+    .slide-solution {
+        height: 100%;
+    }
 
     .root_daum_roughmap_landing {
         width: 100% !important;

     .slideText p:first-child {
         font-size: 2rem;
     }
-    .slideTextDtail p{
+
+    .slideTextDtail p {
         display: none;
     }
+
     .slideTextDtail p:nth-child(1) {
         display: block !important;
         font-size: 1.2rem;

 
 
 
-    .meta-wrap::before{
+    .meta-wrap::before {
         width: 100%;
     }
+
     #visuali .etc-wrap-text,
     #dataanalysis .etc-wrap-text,
     #customized .box-wrap {

         margin-bottom: 5px;
     }
 
-    .Portfolio .swiper-slide img {
-        height: 100% !important;
-    }
 
     .box-wrap div {
         padding: 1rem;

     }
 
     .traffic-video p {
-        font-size: 1rem;
+        font-size: 2rem;
     }
 
     .traffic-button button {

         font-size: 1.2rem;
     }
 
-    .taken-area p{
+    .taken-area p {
         font-size: 1.5rem;
     }
 

         padding-bottom: 0rem !important;
         object-fit: contain;
     }
-    .solution-title, .traffic-title, .ai-title, .meta-title, .smart-title{
+
+    .solution-title,
+    .traffic-title,
+    .ai-title,
+    .meta-title,
+    .smart-title {
         margin-bottom: 10px !important;
     }
 

     }
 
     .Portfolio {
-        padding-top: 0px;
+        width: 100%;
+        height: 100%;
+    }
+
+    .innerSwiper {
+        height: 100%;
+    }
+
+    .innerSwiper .swiper-slide {
+        height: 40%;
     }
 
     .etc-box-title {

 
     }
 
+    .portfolio-text {
+        padding-left: 2rem !important;
+    }
 
     .address-tile {
         width: 100%;

         font-weight: 600;
     }
 
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
 
     .etc-box p {
         padding-left: 0px;

         width: 29px;
     }
 
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
     .swiper {
         width: 50%;
         height: 100%;

         flex-wrap: nowrap;
     }
 
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
     .slideText {
         padding: 10px;
     }

b032dd1

8e2c13d

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


 
 @keyframes tracking-in-expand {
     0% {
-      letter-spacing: -0.5em;
-      opacity: 0;
+        letter-spacing: -0.5em;
+        opacity: 0;
     }
+
     40% {
-      opacity: 0.6;
+        opacity: 0.6;
     }
+
     100% {
-      opacity: 1;
+        opacity: 1;
     }
-  }
+}
 
 .solution-box {
     flex-wrap: nowrap;

     }
 }
 
-
-
-
-.portfolio {
-    padding: 100px 30px;
+.portfolio-zone {
     height: 100%;
+    background-color: #ffffff;
 }
 
-.portfolio.on {
-    animation-duration: 3s;
-    animation-name: slidein;
-}
-
-.portfolio-text {
-    font-size: 4.5rem;
-    font-weight: 700;
-    position: relative;
-    text-align: left;
-}
-
-.portfolio-title span {
-    color: transparent;
-    -webkit-text-stroke: 1px white;
-}
-
-.innerSwiper {
+.Portfolio {
+    /* padding: 100px 30px; */
     height: 100%;
+    /* height: 424px; */
 }
+
+
+
+
+
+
 
 .innerSwiper .swiper-slide {
     text-align: center;
+    height: 80%;
     font-size: 18px;
-    display: block;
 }
 
 .innerSwiper .swiper-slide img {
+    display: block;
     width: 100%;
-    height: 100%;
-    background-color: #fff;
-    object-fit: cover;
-    margin-bottom: 20px;
+    height: 80%;
     background-color: #F8F9FA;
+    object-fit: scale-down;
+    /* padding: 4rem; */
     border-radius: 10px;
     box-shadow: 2px 2px 5px #5454541b;
-
-    padding: 30px 30px;
+    margin-bottom: 20px;
 }
 
-
-
-
-
-
+.portfolio-text {
+    font-size: 6rem;
+    font-weight: 800;
+    text-align: left;
+}
 .innerSwiper-textBox {
     height: 160px;
     padding: 15px 0 0 0;

     width: 100%;
     padding: 30px;
     position: relative;
-    bottom:-10%;
+    bottom: -10%;
     left: 0;
     z-index: 56;
     transition: all 0.5s;
     background-color: #333;
 }
-#footer img{
+
+#footer img {
     text-align: left !important;
     width: 200px !important;
-  }
+}
 
-#footer p{
+#footer p {
     font-size: 1.6rem;
     text-align: left;
-  }
+}
 
 .show-footer {
     margin-bottom: 100px;

     flex: 0 0 20%;
 }
 
-.copyright{
+.copyright {
     text-align: center !important;
-  }
+}
 
 
 /* solution page */

     text-align: left;
 }
 
-.Portfolio {
-    margin: auto;
-    align-content: center;
-    padding-top: 6rem;
-    text-align: center;
+.swiper-slide {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
 }
 
+
+
 .etc-box p {
     font-size: 1.8rem;
     line-height: 2;

b032dd1

8e2c13d

views/index.html

--- views/index.html

+++ views/index.html


     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 
     <style scoped>
-        #footer{
+        #footer {
             bottom: 0%;
         }
-     
-        .footer-img{
+
+        .footer-img {
             text-align: left;
         }
-    
+
         #header {
             position: fixed;
             top: 0;
             z-index: 3;
         }
-    
+
         .dropdown {
             opacity: 0;
             visibility: hidden;

             transition: opacity 0.3s ease, visibility 0.3s ease;
             z-index: 1;
         }
-    
-    
+
+
         html,
         body {
             position: relative;
             height: 100%;
             -ms-overflow-style: none;
-    
+
         }
-    
+
         .mobile-menu-button,
         .mobile-menu-button-close {
             font-size: 2rem;

             height: 29px;
             width: 29px;
         }
-    
+
         .mobil-menu {
             width: 100%;
             height: 100%;
             top: 40px;
         }
-    
+
         .mobil-menu ul {
             list-style: none;
             margin: 0;
             background-color: #ffffff43;
         }
-    
+
         .mobil-menu ul li ul li a {
             font-weight: 500;
             color: #fff;
             font-size: 1.2rem !important;
         }
-    
+
         ::-webkit-scrollbar {
             display: none;
         }
-    
-    
+
+
         .swiper {
             width: 100%;
             height: 100%;
         }
-    
+
         .swiper-slide {
             text-align: center;
             font-size: 18px;

             justify-content: center;
             align-items: center;
         }
-    
-    
-    
+
+
+
         .slide-wrap {
             width: 100%;
             height: 100%;
         }
-    
+
         .main-wrap {
             background: url(../resources/img/common/main.png) no-repeat;
             width: 100%;

             background-size: cover;
             background-position: bottom;
         }
-    
-    
+
+
         .main-text {
             padding-bottom: 50px;
         }
-    
+
         .main-text h2 {
             width: 100%;
             height: 20%;
         }
-    
+
         .main-text div {
             width: 100%;
         }
-    
+
         .main-text div img {
             width: 30px;
         }
-    
+
         .main-wrap .text-area h2 {
             text-align: left;
             font-size: 6rem;
             font-weight: 600;
             color: white;
             font-family: 'Pretendard';
-    
+
         }
-    
+
         .main-wrap .text-area h2 span {
             font-weight: 900;
         }
-    
-    
-    
+
+
+
         .text-main {
             font-weight: 600;
             color: #213f99;
             font-family: 'Pretendard';
             font-size: 5rem;
-    
+
         }
-    
+
         .text-main span {
             color: #F29600;
-    
-    
+
+
         }
-    
-    
+
+
         .gradient-back {
             background: linear-gradient(#e9ebff, #fff, #fff);
         }
-    
+
         .gradient-bottom {
             background: linear-gradient(#fff, #fff, #e9ebff);
         }
-    
+
         .slide-solution {
             font-family: 'Pretendard';
-    
-    
+
+
         }
-    
+
         .innerSwiper {
             transition-timing-function: linear;
         }
     </style>
-    
+
 
     <title>TAKENSOFT</title>
 </head>

 
                 </div>
             </div>
-            <div class="swiper-slide">
-                <div class="slide-wrap pt120 pb60 slide-solution">
-                    <div class=" Portfolio flex align-center" style="align-content: center; width: 100%;">
-                        <div style="width: 1200px; margin: auto;">
-                            <p class="portfolio-text mb20 ">PORTFOLIO</p>
-                        </div>
-                        <div class="swiper innerSwiper">
-                            <div class="swiper-wrapper" dir="ltr">
-                                <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
-                                    <img src="../resources/img/common/innerimg-1.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
-                                        <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
-                                            기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
-                                    </div>
+            <div class="swiper-slide portfolio-zone">
+                <div class=" Portfolio pt120 pb60 flex align-center" style="align-content: center; width: 100%; ">
+                    <div style="width: 1200px; margin: auto; ">
+                        <p class="portfolio-text pt120 mb20 ">PORTFOLIO</p>
+                    </div>
+                    <div class="swiper innerSwiper">
+                        <div class="swiper-wrapper">
 
+                            <div class=" swiper-slide " data-url=" ../../views/pages/DataAnalysis.html">
+                                <img src="../resources/img/common/innerimg-1.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
+                                    <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
+                                        기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
                                 </div>
-                                <div class="swiper-slide " data-url="../../views/pages/Visualization.html">
-                                    <img src="../resources/img/common/innerimg-2.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
-                                        <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
-                                            구축합니다.</p>
-                                    </div>
 
+                            </div>
+                            <div class="swiper-slide" data-url=" ../../views/pages/Visualization.html">
+                                <img src="../resources/img/common/innerimg-2.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
+                                    <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
+                                        구축합니다.</p>
                                 </div>
-                                <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
-                                    <img src="../resources/img/common/innerimg-3.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
-                                        <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
-                                            개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
-                                    </div>
 
+                            </div>
+                            <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
+                                <img src="../resources/img/common/innerimg-3.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
+                                    <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
+                                        개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
                                 </div>
-                                <div class="swiper-slide " data-url="../../views/pages/Data.html">
-                                    <img src="../resources/img/common/innerimg-4.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
-                                        <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
-                                    </div>
 
+                            </div>
+                            <div class="swiper-slide " data-url="../../views/pages/Data.html">
+                                <img src="../resources/img/common/innerimg-4.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
+                                    <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
                                 </div>
-                                <div class="swiper-slide " data-url="../../views/pages/Customized.html">
-                                    <img src="../resources/img/common/innerimg-5.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
-                                        <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
-                                            최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
-                                    </div>
 
+                            </div>
+                            <div class="swiper-slide " data-url="../../views/pages/Customized.html">
+                                <img src="../resources/img/common/innerimg-5.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
+                                    <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
+                                        최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
                                 </div>
-                                <div class="swiper-slide " data-url="../../views/pages/Etc.html">
-                                    <img src="../resources/img/common/innerimg-6.png" alt="">
-                                    <div class=" innerSwiper-textBox">
-                                        <p class="innerSwiper-title">기타사례</p>
-                                        <p class="innerSwiper-title"></p>
 
-                                    </div>
+                            </div>
+                            <div class="swiper-slide " data-url="../../views/pages/Etc.html">
+                                <img src="../resources/img/common/innerimg-6.png" alt="">
+                                <div class=" innerSwiper-textBox">
+                                    <p class="innerSwiper-title">기타사례</p>
+                                    <p class="innerSwiper-title"></p>
 
                                 </div>
 
                             </div>
                         </div>
                     </div>
-
                 </div>
-
             </div>
+
             <div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
                 <div class="slide-wrap pt120 pb60 slide-solution gradient-bottom ">
                     <div class=" text-area pb60 flex align-center justify-center"

             clickable: true,
         },
         on: {
-            
+
 
             slideChangeTransitionEnd: function () {
                 if (this.activeIndex === 1) {

         },
 
 
-    
+
     });
 
     window.addEventListener('load', () => {

     });
     // 헤더,푸터 불러오기
     $(function () {
-        $("#header").load("layout/header.html");
-        $("#footer").load("layout/footer.html");
+        $("#header").load("../views/layout/header.html");
+        $("#footer").load("../views/layout/footer.html");
         // $("#footer").hide();
 
     });
-    var innerSwiper = new Swiper(".innerSwiper", {
+    var innerswiper = new Swiper(".innerSwiper", {
         slidesPerView: 3,
         spaceBetween: 30,
-        centeredSlides: true,
-
         autoplay: {
             delay: 0,
             disableOnInteraction: false,

         loop: true,
         speed: 5000,
         // loopAdditionalSlides: 1,
-        activeIndexChange: function () {
-
-        }, on: {
-            init: function () {
-                // Swiper 초기화 시 첫 번째 슬라이드 설정
-                let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
-                if (firstTextBox) firstTextBox.classList.add('active');
+        breakpoints: {
+            250: {
+                slidesPerView: 1,
+                spaceBetween: 20
             },
-
+            // 화면의 넓이가 320px 이상일 때
+            320: {
+                slidesPerView: 1,
+                spaceBetween: 20
+            },
+            // 화면의 넓이가 640px 이상일 때
+            640: {
+                slidesPerView: 3,
+                spaceBetween: 40
+            }
         },
     });
 

b032dd1

8e2c13d

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 <body>
     <div class="header">
         <div class="header-area flex justify-between align-center">
-            <a href="/views/index.html" class="logo"></a>
+            <a href="../index.html" class="logo"></a>
             <div class="mobil-wrap">
                 <button class="mobile-menu-button">☰</button>
                 <button class="mobile-menu-button-close" style="display: none;">x</button>

 
 logoDiv.addEventListener('click', function () {
     var currentLocation = window.location.pathname;
-    if (currentLocation === '/index.html' || currentLocation === '/') {
+    if (currentLocation === '../index.html' || currentLocation === '/') {
         // 현재 위치가 메인 페이지인 경우, 페이지를 새로고침하거나 현재 위치를 유지
         window.location.href = '/';
     } else {

b032dd1

8e2c13d

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <style>
+         body {
+            -ms-overflow-style: none;
+            /* 인터넷 익스플로러 */
+            scrollbar-width: none;
+            /* 파이어폭스 */
+        }
         html,
         body {
             position: relative;

 
         body {
             background: #eee;
-    font-family: 'Pretendard';
+            font-family: 'Pretendard';
             font-size: 14px;
             color: #000;
             margin: 0;

             color: #333;
 
         }
-        .dropdown {
-        background-color: #fff !important;
-        }
 
-    
-  
+        .dropdown {
+            background-color: #fff !important;
+        }
     </style>
 
     <title>TAKENSOFT</title>

                             </div>
                         </div>
                     </div>
-                    
+
                 </div>
                 <div id="footer" style="width: 100%;"></div>
             </div>
-            
+
         </div>
 
     </div>

 
 
     <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            // 스크롤 이벤트 리스너 추가
+            const historyBox = document.querySelector('.history-box');
+            historyBox.addEventListener('scroll', function () {
+                // 각 섹션을 순회하며 현재 보이는 섹션 찾기
+                const sections = document.querySelectorAll('.content.section');
+                sections.forEach((section) => {
+                    const top = section.offsetTop;
+                    const bottom = top + section.offsetHeight;
+                    if (historyBox.scrollTop >= top && historyBox.scrollTop < bottom) {
+                        const activeYear = section.getAttribute('id');
+                        updateActiveYear(activeYear);
+                    }
+                });
+            });
+
+            // 연도 탭 업데이트 함수
+            function updateActiveYear(activeYear) {
+                const years = document.querySelectorAll('.years .year');
+                years.forEach((year) => {
+                    if (year.getAttribute('data-year') === activeYear) {
+                        year.classList.add('active-year');
+                    } else {
+                        year.classList.remove('active-year');
+                    }
+                });
+            }
+        });
         var swiper = new Swiper(".mySwiper", {
             cssMode: true,
             direction: "vertical",

                     });
                 },
                 slideChange: function () {
-                    
+
                     const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
                     const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
                     const footer = document.getElementById('footer'); // 푸터 요소 선택

b032dd1

8e2c13d

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html

...	...	@@ -15,7 +15,87 @@
15	15
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
17	17
18		-
	18	+ <style scoped>
	19	+ footer {
	20	+ width: 100%;
	21	+ /* height: 300px; */
	22	+ padding: 30px;
	23	+ /* opacity: 0; */
	24	+ /* display: none; */
	25	+ position: relative;
	26	+ bottom: 0px;
	27	+ left: 0;
	28	+ z-index: 56;
	29	+ transition: all 0.5s;
	30	+ background-color: #333;
	31	+ }
	32	+
	33	+ /* 스크롤바 없애기 */
	34	+ body {
	35	+ -ms-overflow-style: none;
	36	+ /* 인터넷 익스플로러 */
	37	+ scrollbar-width: none;
	38	+ /* 파이어폭스 */
	39	+ }
	40	+
	41	+ ::-webkit-scrollbar {
	42	+ display: none;
	43	+ }
	44	+
	45	+ #header {
	46	+ position: fixed;
	47	+ top: 0;
	48	+ z-index: 3;
	49	+ border-bottom: 1px solid #ced4da;
	50	+ background-color: white !important;
	51	+ }
	52	+
	53	+ #header .header .logo {
	54	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	55	+ width: 200px;
	56	+ background-size: contain;
	57	+ height: 25px;
	58	+
	59	+
	60	+ }
	61	+
	62	+ #header .header nav li a {
	63	+ color: #333;
	64	+
	65	+ }
	66	+
	67	+
	68	+
	69	+ html,
	70	+ body {
	71	+ position: relative;
	72	+ height: 100%;
	73	+ font-family: 'Pretendard';
	74	+
	75	+ }
	76	+
	77	+ body {
	78	+ font-family: 'Pretendard';
	79	+ font-size: 14px;
	80	+ color: #000;
	81	+ margin: 0;
	82	+ padding: 0;
	83	+ }
	84	+
	85	+
	86	+
	87	+ .box-wrap div img {
	88	+ border: 1px solid;
	89	+ padding-bottom: 2rem;
	90	+ }
	91	+
	92	+ .box-wrap div p {
	93	+ font-size: 1.8rem;
	94	+ }
	95	+ .dropdown {
	96	+ background-color: #fff !important;
	97	+ }
	98	+ </style>
19	99
20	100	<title>TAKENSOFT</title>
21	101	</head>
...	...	@@ -130,83 +210,6 @@
130	210
131	211	</script>
132	212
133		-<style scoped>
134		- footer {
135		- width: 100%;
136		- /* height: 300px; */
137		- padding: 30px;
138		- /* opacity: 0; */
139		- /* display: none; */
140		- position: relative;
141		- bottom: 0px;
142		- left: 0;
143		- z-index: 56;
144		- transition: all 0.5s;
145		- background-color: #333;
146		- }
147	213
148		- /* 스크롤바 없애기 */
149		- body {
150		- -ms-overflow-style: none;
151		- /* 인터넷 익스플로러 */
152		- scrollbar-width: none;
153		- /* 파이어폭스 */
154		- }
155		-
156		- ::-webkit-scrollbar {
157		- display: none;
158		- }
159		-
160		- #header {
161		- position: fixed;
162		- top: 0;
163		- z-index: 3;
164		- border-bottom: 1px solid #ced4da;
165		- background-color: white;
166		- }
167		-
168		- #header .header .logo {
169		- background: url(../../resources/img/component/logo-color.png) no-repeat;
170		- width: 200px;
171		- background-size: contain;
172		- height: 25px;
173		-
174		-
175		- }
176		-
177		- #header .header nav li a {
178		- color: #333;
179		-
180		- }
181		-
182		-
183		-
184		- html,
185		- body {
186		- position: relative;
187		- height: 100%;
188		- font-family: 'Pretendard';
189		-
190		- }
191		-
192		- body {
193		- font-family: 'Pretendard';
194		- font-size: 14px;
195		- color: #000;
196		- margin: 0;
197		- padding: 0;
198		- }
199		-
200		-
201		-
202		- .box-wrap div img {
203		- border: 1px solid;
204		- padding-bottom: 2rem;
205		- }
206		-
207		- .box-wrap div p {
208		- font-size: 1.8rem;
209		- }
210		-</style>
211	214
212	215	</html> (No newline at end of file)

b032dd1

8e2c13d

views/pages/Marketing.html

--- views/pages/Marketing.html

+++ views/pages/Marketing.html


             top: 0;
             z-index: 3;
             border-bottom: 1px solid #ced4da;
-            background-color: white;
+            background-color: white !important;
         }
     
         #header .header .logo {

             object-fit: cover;
         }
     
+        .dropdown {
+            background-color: #fff !important;
+        }
         /* .marketing-area{
             cursor: pointer;
         } */

Add a comment

Open 0
Closed 0

List

...	...	@@ -279,16 +279,18 @@
279	279
280	280	@keyframes tracking-in-expand {
281	281	0% {
282		- letter-spacing: -0.5em;
283		- opacity: 0;
	282	+ letter-spacing: -0.5em;
	283	+ opacity: 0;
284	284	}
	285	+
285	286	40% {
286		- opacity: 0.6;
	287	+ opacity: 0.6;
287	288	}
	289	+
288	290	100% {
289		- opacity: 1;
	291	+ opacity: 1;
290	292	}
291		- }
	293	+}
292	294
293	295	.solution-box {
294	296	flex-wrap: nowrap;
...	...	@@ -504,59 +506,46 @@
504	506	}
505	507	}
506	508
507		-
508		-
509		-
510		-.portfolio {
511		- padding: 100px 30px;
	509	+.portfolio-zone {
512	510	height: 100%;
	511	+ background-color: #ffffff;
513	512	}
514	513
515		-.portfolio.on {
516		- animation-duration: 3s;
517		- animation-name: slidein;
518		-}
519		-
520		-.portfolio-text {
521		- font-size: 4.5rem;
522		- font-weight: 700;
523		- position: relative;
524		- text-align: left;
525		-}
526		-
527		-.portfolio-title span {
528		- color: transparent;
529		- -webkit-text-stroke: 1px white;
530		-}
531		-
532		-.innerSwiper {
	514	+.Portfolio {
	515	+ /* padding: 100px 30px; */
533	516	height: 100%;
	517	+ /* height: 424px; */
534	518	}
	519	+
	520	+
	521	+
	522	+
	523	+
	524	+
535	525
536	526	.innerSwiper .swiper-slide {
537	527	text-align: center;
	528	+ height: 80%;
538	529	font-size: 18px;
539		- display: block;
540	530	}
541	531
542	532	.innerSwiper .swiper-slide img {
	533	+ display: block;
543	534	width: 100%;
544		- height: 100%;
545		- background-color: #fff;
546		- object-fit: cover;
547		- margin-bottom: 20px;
	535	+ height: 80%;
548	536	background-color: #F8F9FA;
	537	+ object-fit: scale-down;
	538	+ /* padding: 4rem; */
549	539	border-radius: 10px;
550	540	box-shadow: 2px 2px 5px #5454541b;
551		-
552		- padding: 30px 30px;
	541	+ margin-bottom: 20px;
553	542	}
554	543
555		-
556		-
557		-
558		-
559		-
	544	+.portfolio-text {
	545	+ font-size: 6rem;
	546	+ font-weight: 800;
	547	+ text-align: left;
	548	+}
560	549	.innerSwiper-textBox {
561	550	height: 160px;
562	551	padding: 15px 0 0 0;
...	...	@@ -665,21 +654,22 @@
665	654	width: 100%;
666	655	padding: 30px;
667	656	position: relative;
668		- bottom:-10%;
	657	+ bottom: -10%;
669	658	left: 0;
670	659	z-index: 56;
671	660	transition: all 0.5s;
672	661	background-color: #333;
673	662	}
674		-#footer img{
	663	+
	664	+#footer img {
675	665	text-align: left !important;
676	666	width: 200px !important;
677		- }
	667	+}
678	668
679		-#footer p{
	669	+#footer p {
680	670	font-size: 1.6rem;
681	671	text-align: left;
682		- }
	672	+}
683	673
684	674	.show-footer {
685	675	margin-bottom: 100px;
...	...	@@ -711,9 +701,9 @@
711	701	flex: 0 0 20%;
712	702	}
713	703
714		-.copyright{
	704	+.copyright {
715	705	text-align: center !important;
716		- }
	706	+}
717	707
718	708
719	709	/* solution page */
...	...	@@ -1407,13 +1397,13 @@
1407	1397	text-align: left;
1408	1398	}
1409	1399
1410		-.Portfolio {
1411		- margin: auto;
1412		- align-content: center;
1413		- padding-top: 6rem;
1414		- text-align: center;
	1400	+.swiper-slide {
	1401	+ -webkit-backface-visibility: hidden;
	1402	+ -webkit-transform: translate3d(0, 0, 0);
1415	1403	}
1416	1404
	1405	+
	1406	+
1417	1407	.etc-box p {
1418	1408	font-size: 1.8rem;
1419	1409	line-height: 2;

...	...	@@ -7,6 +7,13 @@
7	7	box-sizing: border-box;
8	8	}
9	9
	10	+ .swiper-slide {
	11	+ -ms-overflow-style: none;
	12	+ /* 인터넷 익스플로러 */
	13	+ scrollbar-width: none;
	14	+ /* 파이어폭스 */
	15	+ }
	16	+
10	17	html,
11	18	body,
12	19	#root {
...	...	@@ -21,6 +28,10 @@
21	28	min-width: 100%;
22	29
23	30
	31	+ }
	32	+
	33	+ summary::-webkit-details-marker {
	34	+ display: none;
24	35	}
25	36
26	37	.text-main,
...	...	@@ -46,15 +57,20 @@
46	57	font-size: 1rem !important;
47	58	margin-bottom: 0rem;
48	59	}
49		- .marketing-wrap-title h1{
	60	+
	61	+ .marketing-wrap-title h1 {
50	62	font-size: 3rem;
51	63	}
52		- .accordion.active .accordion-num, .accordion.active .accordion-num span{
	64	+
	65	+ .accordion.active .accordion-num,
	66	+ .accordion.active .accordion-num span {
53	67	font-size: 2rem;
54	68	}
55		-.history-box{
56		- height: 100%;
57		-}
	69	+
	70	+ .history-box {
	71	+ height: 75% !important;
	72	+ }
	73	+
58	74	.solution-box {
59	75	width: 100%;
60	76	height: calc(100% - 182px) !important;
...	...	@@ -69,7 +85,7 @@
69	85	}
70	86
71	87	.slide-solution .portfolio-text {
72		- padding: 0rem 1rem;
	88	+ /* padding:20% 1rem; */
73	89	}
74	90
75	91	#contentHeadquarter,
...	...	@@ -126,9 +142,11 @@
126	142	margin: 0;
127	143	background-color: #fff;
128	144	}
129		-nav ul li a{
130		- font-size: 2rem !important;
131		- }
	145	+
	146	+ nav ul li a {
	147	+ font-size: 2rem !important;
	148	+ }
	149	+
132	150	.mobil-menu ul li ul li a {
133	151
134	152	font-weight: 300;
...	...	@@ -215,6 +233,9 @@
215	233	}
216	234
217	235
	236	+ .slide-solution {
	237	+ height: 100%;
	238	+ }
218	239
219	240	.root_daum_roughmap_landing {
220	241	width: 100% !important;
...	...	@@ -373,9 +394,11 @@
373	394	.slideText p:first-child {
374	395	font-size: 2rem;
375	396	}
376		- .slideTextDtail p{
	397	+
	398	+ .slideTextDtail p {
377	399	display: none;
378	400	}
	401	+
379	402	.slideTextDtail p:nth-child(1) {
380	403	display: block !important;
381	404	font-size: 1.2rem;
...	...	@@ -525,9 +548,10 @@
525	548
526	549
527	550
528		- .meta-wrap::before{
	551	+ .meta-wrap::before {
529	552	width: 100%;
530	553	}
	554	+
531	555	#visuali .etc-wrap-text,
532	556	#dataanalysis .etc-wrap-text,
533	557	#customized .box-wrap {
...	...	@@ -602,9 +626,6 @@
602	626	margin-bottom: 5px;
603	627	}
604	628
605		- .Portfolio .swiper-slide img {
606		- height: 100% !important;
607		- }
608	629
609	630	.box-wrap div {
610	631	padding: 1rem;
...	...	@@ -616,7 +637,7 @@
616	637	}
617	638
618	639	.traffic-video p {
619		- font-size: 1rem;
	640	+ font-size: 2rem;
620	641	}
621	642
622	643	.traffic-button button {
...	...	@@ -624,7 +645,7 @@
624	645	font-size: 1.2rem;
625	646	}
626	647
627		- .taken-area p{
	648	+ .taken-area p {
628	649	font-size: 1.5rem;
629	650	}
630	651
...	...	@@ -711,7 +732,12 @@
711	732	padding-bottom: 0rem !important;
712	733	object-fit: contain;
713	734	}
714		- .solution-title, .traffic-title, .ai-title, .meta-title, .smart-title{
	735	+
	736	+ .solution-title,
	737	+ .traffic-title,
	738	+ .ai-title,
	739	+ .meta-title,
	740	+ .smart-title {
715	741	margin-bottom: 10px !important;
716	742	}
717	743
...	...	@@ -774,7 +800,16 @@
774	800	}
775	801
776	802	.Portfolio {
777		- padding-top: 0px;
	803	+ width: 100%;
	804	+ height: 100%;
	805	+ }
	806	+
	807	+ .innerSwiper {
	808	+ height: 100%;
	809	+ }
	810	+
	811	+ .innerSwiper .swiper-slide {
	812	+ height: 40%;
778	813	}
779	814
780	815	.etc-box-title {
...	...	@@ -1021,6 +1056,9 @@
1021	1056
1022	1057	}
1023	1058
	1059	+ .portfolio-text {
	1060	+ padding-left: 2rem !important;
	1061	+ }
1024	1062
1025	1063	.address-tile {
1026	1064	width: 100%;
...	...	@@ -1433,6 +1471,10 @@
1433	1471	font-weight: 600;
1434	1472	}
1435	1473
	1474	+ summary::-webkit-details-marker {
	1475	+ display: none;
	1476	+ }
	1477	+
1436	1478
1437	1479	.etc-box p {
1438	1480	padding-left: 0px;
...	...	@@ -1642,6 +1684,10 @@
1642	1684	width: 29px;
1643	1685	}
1644	1686
	1687	+ summary::-webkit-details-marker {
	1688	+ display: none;
	1689	+ }
	1690	+
1645	1691	.swiper {
1646	1692	width: 50%;
1647	1693	height: 100%;
...	...	@@ -1832,6 +1878,10 @@
1832	1878	flex-wrap: nowrap;
1833	1879	}
1834	1880
	1881	+ summary::-webkit-details-marker {
	1882	+ display: none;
	1883	+ }
	1884	+
1835	1885	.slideText {
1836	1886	padding: 10px;
1837	1887	}

...	...	@@ -14,20 +14,20 @@
14	14	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
15	15
16	16	<style scoped>
17		- #footer{
	17	+ #footer {
18	18	bottom: 0%;
19	19	}
20		-
21		- .footer-img{
	20	+
	21	+ .footer-img {
22	22	text-align: left;
23	23	}
24		-
	24	+
25	25	#header {
26	26	position: fixed;
27	27	top: 0;
28	28	z-index: 3;
29	29	}
30		-
	30	+
31	31	.dropdown {
32	32	opacity: 0;
33	33	visibility: hidden;
...	...	@@ -41,16 +41,16 @@
41	41	transition: opacity 0.3s ease, visibility 0.3s ease;
42	42	z-index: 1;
43	43	}
44		-
45		-
	44	+
	45	+
46	46	html,
47	47	body {
48	48	position: relative;
49	49	height: 100%;
50	50	-ms-overflow-style: none;
51		-
	51	+
52	52	}
53		-
	53	+
54	54	.mobile-menu-button,
55	55	.mobile-menu-button-close {
56	56	font-size: 2rem;
...	...	@@ -58,35 +58,35 @@
58	58	height: 29px;
59	59	width: 29px;
60	60	}
61		-
	61	+
62	62	.mobil-menu {
63	63	width: 100%;
64	64	height: 100%;
65	65	top: 40px;
66	66	}
67		-
	67	+
68	68	.mobil-menu ul {
69	69	list-style: none;
70	70	margin: 0;
71	71	background-color: #ffffff43;
72	72	}
73		-
	73	+
74	74	.mobil-menu ul li ul li a {
75	75	font-weight: 500;
76	76	color: #fff;
77	77	font-size: 1.2rem !important;
78	78	}
79		-
	79	+
80	80	::-webkit-scrollbar {
81	81	display: none;
82	82	}
83		-
84		-
	83	+
	84	+
85	85	.swiper {
86	86	width: 100%;
87	87	height: 100%;
88	88	}
89		-
	89	+
90	90	.swiper-slide {
91	91	text-align: center;
92	92	font-size: 18px;
...	...	@@ -94,14 +94,14 @@
94	94	justify-content: center;
95	95	align-items: center;
96	96	}
97		-
98		-
99		-
	97	+
	98	+
	99	+
100	100	.slide-wrap {
101	101	width: 100%;
102	102	height: 100%;
103	103	}
104		-
	104	+
105	105	.main-wrap {
106	106	background: url(../resources/img/common/main.png) no-repeat;
107	107	width: 100%;
...	...	@@ -109,74 +109,74 @@
109	109	background-size: cover;
110	110	background-position: bottom;
111	111	}
112		-
113		-
	112	+
	113	+
114	114	.main-text {
115	115	padding-bottom: 50px;
116	116	}
117		-
	117	+
118	118	.main-text h2 {
119	119	width: 100%;
120	120	height: 20%;
121	121	}
122		-
	122	+
123	123	.main-text div {
124	124	width: 100%;
125	125	}
126		-
	126	+
127	127	.main-text div img {
128	128	width: 30px;
129	129	}
130		-
	130	+
131	131	.main-wrap .text-area h2 {
132	132	text-align: left;
133	133	font-size: 6rem;
134	134	font-weight: 600;
135	135	color: white;
136	136	font-family: 'Pretendard';
137		-
	137	+
138	138	}
139		-
	139	+
140	140	.main-wrap .text-area h2 span {
141	141	font-weight: 900;
142	142	}
143		-
144		-
145		-
	143	+
	144	+
	145	+
146	146	.text-main {
147	147	font-weight: 600;
148	148	color: #213f99;
149	149	font-family: 'Pretendard';
150	150	font-size: 5rem;
151		-
	151	+
152	152	}
153		-
	153	+
154	154	.text-main span {
155	155	color: #F29600;
156		-
157		-
	156	+
	157	+
158	158	}
159		-
160		-
	159	+
	160	+
161	161	.gradient-back {
162	162	background: linear-gradient(#e9ebff, #fff, #fff);
163	163	}
164		-
	164	+
165	165	.gradient-bottom {
166	166	background: linear-gradient(#fff, #fff, #e9ebff);
167	167	}
168		-
	168	+
169	169	.slide-solution {
170	170	font-family: 'Pretendard';
171		-
172		-
	171	+
	172	+
173	173	}
174		-
	174	+
175	175	.innerSwiper {
176	176	transition-timing-function: linear;
177	177	}
178	178	</style>
179		-
	179	+
180	180
181	181	<title>TAKENSOFT</title>
182	182	</head>
...	...	@@ -243,75 +243,72 @@
243	243
244	244	</div>
245	245	</div>
246		- <div class="swiper-slide">
247		- <div class="slide-wrap pt120 pb60 slide-solution">
248		- <div class=" Portfolio flex align-center" style="align-content: center; width: 100%;">
249		- <div style="width: 1200px; margin: auto;">
250		- <p class="portfolio-text mb20 ">PORTFOLIO</p>
251		- </div>
252		- <div class="swiper innerSwiper">
253		- <div class="swiper-wrapper" dir="ltr">
254		- <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
255		- <img src="../resources/img/common/innerimg-1.png" alt="">
256		- <div class=" innerSwiper-textBox">
257		- <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
258		- <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
259		- 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
260		- </div>
	246	+ <div class="swiper-slide portfolio-zone">
	247	+ <div class=" Portfolio pt120 pb60 flex align-center" style="align-content: center; width: 100%; ">
	248	+ <div style="width: 1200px; margin: auto; ">
	249	+ <p class="portfolio-text pt120 mb20 ">PORTFOLIO</p>
	250	+ </div>
	251	+ <div class="swiper innerSwiper">
	252	+ <div class="swiper-wrapper">
261	253
	254	+ <div class=" swiper-slide " data-url=" ../../views/pages/DataAnalysis.html">
	255	+ <img src="../resources/img/common/innerimg-1.png" alt="">
	256	+ <div class=" innerSwiper-textBox">
	257	+ <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
	258	+ <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
	259	+ 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
262	260	</div>
263		- <div class="swiper-slide " data-url="../../views/pages/Visualization.html">
264		- <img src="../resources/img/common/innerimg-2.png" alt="">
265		- <div class=" innerSwiper-textBox">
266		- <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
267		- <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
268		- 구축합니다.</p>
269		- </div>
270	261
	262	+ </div>
	263	+ <div class="swiper-slide" data-url=" ../../views/pages/Visualization.html">
	264	+ <img src="../resources/img/common/innerimg-2.png" alt="">
	265	+ <div class=" innerSwiper-textBox">
	266	+ <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
	267	+ <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
	268	+ 구축합니다.</p>
271	269	</div>
272		- <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
273		- <img src="../resources/img/common/innerimg-3.png" alt="">
274		- <div class=" innerSwiper-textBox">
275		- <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
276		- <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
277		- 개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
278		- </div>
279	270
	271	+ </div>
	272	+ <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
	273	+ <img src="../resources/img/common/innerimg-3.png" alt="">
	274	+ <div class=" innerSwiper-textBox">
	275	+ <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
	276	+ <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
	277	+ 개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
280	278	</div>
281		- <div class="swiper-slide " data-url="../../views/pages/Data.html">
282		- <img src="../resources/img/common/innerimg-4.png" alt="">
283		- <div class=" innerSwiper-textBox">
284		- <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
285		- <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
286		- </div>
287	279
	280	+ </div>
	281	+ <div class="swiper-slide " data-url="../../views/pages/Data.html">
	282	+ <img src="../resources/img/common/innerimg-4.png" alt="">
	283	+ <div class=" innerSwiper-textBox">
	284	+ <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
	285	+ <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
288	286	</div>
289		- <div class="swiper-slide " data-url="../../views/pages/Customized.html">
290		- <img src="../resources/img/common/innerimg-5.png" alt="">
291		- <div class=" innerSwiper-textBox">
292		- <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
293		- <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
294		- 최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
295		- </div>
296	287
	288	+ </div>
	289	+ <div class="swiper-slide " data-url="../../views/pages/Customized.html">
	290	+ <img src="../resources/img/common/innerimg-5.png" alt="">
	291	+ <div class=" innerSwiper-textBox">
	292	+ <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
	293	+ <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
	294	+ 최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
297	295	</div>
298		- <div class="swiper-slide " data-url="../../views/pages/Etc.html">
299		- <img src="../resources/img/common/innerimg-6.png" alt="">
300		- <div class=" innerSwiper-textBox">
301		- <p class="innerSwiper-title">기타사례</p>
302		- <p class="innerSwiper-title"></p>
303	296
304		- </div>
	297	+ </div>
	298	+ <div class="swiper-slide " data-url="../../views/pages/Etc.html">
	299	+ <img src="../resources/img/common/innerimg-6.png" alt="">
	300	+ <div class=" innerSwiper-textBox">
	301	+ <p class="innerSwiper-title">기타사례</p>
	302	+ <p class="innerSwiper-title"></p>
305	303
306	304	</div>
307	305
308	306	</div>
309	307	</div>
310	308	</div>
311		-
312	309	</div>
313		-
314	310	</div>
	311	+
315	312	<div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
316	313	<div class="slide-wrap pt120 pb60 slide-solution gradient-bottom ">
317	314	<div class=" text-area pb60 flex align-center justify-center"
...	...	@@ -455,7 +452,7 @@
455	452	clickable: true,
456	453	},
457	454	on: {
458		-
	455	+
459	456
460	457	slideChangeTransitionEnd: function () {
461	458	if (this.activeIndex === 1) {
...	...	@@ -536,7 +533,7 @@
536	533	},
537	534
538	535
539		-
	536	+
540	537	});
541	538
542	539	window.addEventListener('load', () => {
...	...	@@ -553,16 +550,14 @@
553	550	});
554	551	// 헤더,푸터 불러오기
555	552	$(function () {
556		- $("#header").load("layout/header.html");
557		- $("#footer").load("layout/footer.html");
	553	+ $("#header").load("../views/layout/header.html");
	554	+ $("#footer").load("../views/layout/footer.html");
558	555	// $("#footer").hide();
559	556
560	557	});
561		- var innerSwiper = new Swiper(".innerSwiper", {
	558	+ var innerswiper = new Swiper(".innerSwiper", {
562	559	slidesPerView: 3,
563	560	spaceBetween: 30,
564		- centeredSlides: true,
565		-
566	561	autoplay: {
567	562	delay: 0,
568	563	disableOnInteraction: false,
...	...	@@ -570,15 +565,21 @@
570	565	loop: true,
571	566	speed: 5000,
572	567	// loopAdditionalSlides: 1,
573		- activeIndexChange: function () {
574		-
575		- }, on: {
576		- init: function () {
577		- // Swiper 초기화 시 첫 번째 슬라이드 설정
578		- let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
579		- if (firstTextBox) firstTextBox.classList.add('active');
	568	+ breakpoints: {
	569	+ 250: {
	570	+ slidesPerView: 1,
	571	+ spaceBetween: 20
580	572	},
581		-
	573	+ // 화면의 넓이가 320px 이상일 때
	574	+ 320: {
	575	+ slidesPerView: 1,
	576	+ spaceBetween: 20
	577	+ },
	578	+ // 화면의 넓이가 640px 이상일 때
	579	+ 640: {
	580	+ slidesPerView: 3,
	581	+ spaceBetween: 40
	582	+ }
582	583	},
583	584	});
584	585

...	...	@@ -15,6 +15,12 @@
15	15
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
17	17	<style>
	18	+ body {
	19	+ -ms-overflow-style: none;
	20	+ /* 인터넷 익스플로러 */
	21	+ scrollbar-width: none;
	22	+ /* 파이어폭스 */
	23	+ }
18	24	html,
19	25	body {
20	26	position: relative;
...	...	@@ -23,7 +29,7 @@
23	29
24	30	body {
25	31	background: #eee;
26		- font-family: 'Pretendard';
	32	+ font-family: 'Pretendard';
27	33	font-size: 14px;
28	34	color: #000;
29	35	margin: 0;
...	...	@@ -90,12 +96,10 @@
90	96	color: #333;
91	97
92	98	}
93		- .dropdown {
94		- background-color: #fff !important;
95		- }
96	99
97		-
98		-
	100	+ .dropdown {
	101	+ background-color: #fff !important;
	102	+ }
99	103	</style>
100	104
101	105	<title>TAKENSOFT</title>
...	...	@@ -475,11 +479,11 @@
475	479	</div>
476	480	</div>
477	481	</div>
478		-
	482	+
479	483	</div>
480	484	<div id="footer" style="width: 100%;"></div>
481	485	</div>
482		-
	486	+
483	487	</div>
484	488
485	489	</div>
...	...	@@ -488,6 +492,34 @@
488	492
489	493
490	494	<script>
	495	+ document.addEventListener("DOMContentLoaded", function () {
	496	+ // 스크롤 이벤트 리스너 추가
	497	+ const historyBox = document.querySelector('.history-box');
	498	+ historyBox.addEventListener('scroll', function () {
	499	+ // 각 섹션을 순회하며 현재 보이는 섹션 찾기
	500	+ const sections = document.querySelectorAll('.content.section');
	501	+ sections.forEach((section) => {
	502	+ const top = section.offsetTop;
	503	+ const bottom = top + section.offsetHeight;
	504	+ if (historyBox.scrollTop >= top && historyBox.scrollTop < bottom) {
	505	+ const activeYear = section.getAttribute('id');
	506	+ updateActiveYear(activeYear);
	507	+ }
	508	+ });
	509	+ });
	510	+
	511	+ // 연도 탭 업데이트 함수
	512	+ function updateActiveYear(activeYear) {
	513	+ const years = document.querySelectorAll('.years .year');
	514	+ years.forEach((year) => {
	515	+ if (year.getAttribute('data-year') === activeYear) {
	516	+ year.classList.add('active-year');
	517	+ } else {
	518	+ year.classList.remove('active-year');
	519	+ }
	520	+ });
	521	+ }
	522	+ });
491	523	var swiper = new Swiper(".mySwiper", {
492	524	cssMode: true,
493	525	direction: "vertical",
...	...	@@ -518,7 +550,7 @@
518	550	});
519	551	},
520	552	slideChange: function () {
521		-
	553	+
522	554	const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
523	555	const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
524	556	const footer = document.getElementById('footer'); // 푸터 요소 선택

...	...	@@ -34,7 +34,7 @@
34	34	top: 0;
35	35	z-index: 3;
36	36	border-bottom: 1px solid #ced4da;
37		- background-color: white;
	37	+ background-color: white !important;
38	38	}
39	39
40	40	#header .header .logo {
...	...	@@ -89,6 +89,9 @@
89	89	object-fit: cover;
90	90	}
91	91
	92	+ .dropdown {
	93	+ background-color: #fff !important;
	94	+ }
92	95	/* .marketing-area{
93	96	cursor: pointer;
94	97	} */

Delete comment