Commit @becb6d045f6afd99734f6a117baaf8c2dcb84b3e

mycoms 2024-04-08

240408 김하영

@becb6d045f6afd99734f6a117baaf8c2dcb84b3e

5931a93

becb6d0

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


     .solution-text,
     .portfolio-text,
     .map-text,
-    .about-title p:nth-child(1),
-    .marketing-wrap-title h1 {
-        font-size: 2.2rem !important;
+    .about-title p:nth-child(1) {
+        font-size: 2.5rem !important;
     }
 
 

     .traffic-title p,
     .ai-title p,
     .meta-title p,
-    .smart-title p,
-    .etc-wrap-title p {
-        font-size: 1.5rem;
+    .smart-title p {
+        font-size: 2.3rem;
     }
 
     .sub-text,
     .solution-sub-text {
         font-size: 1rem !important;
     }
-
+    .marketing-wrap-title h1{
+        font-size: 3rem;
+    }
 
     .solution-box {
         width: 100%;

         margin-bottom: 0px;
     }
 
-    .etc-wrap-text p {
-        padding: 11px 10px;
-    }
+
 
     .header-area {
         width: 100%;

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

     .text-area {
         width: 100% !important;
         height: 100% !important;
-        padding: 2rem;
+        padding: 6rem 2rem;
     }
 
     .innerSwiper-title {

 
     .address-tile {
         width: 100%;
+        text-align: center;
         font-size: 1.2rem;
+        padding-left: 0px;
     }
 
     .address-subtitle {

     }
 
     .about-title-sub {
-        font-size: 1.2rem;
+        font-size: 1.5rem;
+        margin-bottom: 0px;
     }
 
     .about-area {

     }
 
     .slideText p:first-child {
-        font-size: 1.2rem;
+        font-size: 2rem;
     }
-
-    .slideTextDtail p {
-        font-size: 1rem;
+    .slideTextDtail p{
+        display: none;
+    }
+    .slideTextDtail p:nth-child(1) {
+        display: block !important;
+        font-size: 1.2rem;
         border-bottom: 0px !important;
         margin-bottom: 0.5rem;
+    }
+
+    .slideTextDtail {
+        padding: 0 1rem;
     }
 
     .slideTextDtail div div {

     }
 
     .about-title {
+        margin-top: 60px;
         margin-bottom: 1rem !important;
     }
 
-
-    .about img {
+    .solution-web-box img {
         width: 100%;
-        height: 100%;
+        object-fit: contain !important;
+        height: 200px !important;
+        margin-bottom: 0px !important;
     }
 
-    .about-vision-box {
-        height: 200px;
+
+    .month-text img {
+        width: 100px !important;
+        height: 150px;
+    }
+
+    .text-section {
+        width: 100%;
     }
 
     .about-vision-box img {
-        height: 149px;
+        height: 150px;
         display: block;
         object-fit: contain;
     }

     .traffic-area img,
     .ai-area img {
         width: 100%;
-        height: 100px !important;
         object-fit: contain !important;
         margin-bottom: 2rem;
     }

 
     .taken-box {
         width: 100%;
-        margin-bottom: 2rem;
+        /* margin-bottom: 2rem; */
         flex-direction: column;
         gap: 5px;
+    }
+
+    .text-after p:nth-child(1) {
+        display: block;
+    }
+
+    .text-after p {
+        display: none;
     }
 
     .taken-box p {
         font-size: 1.2rem;
     }
 
-    .taken-area p {
-        font-size: 1rem;
-    }
+
 
     .text-box-title {
         font-size: 1rem;

     .ai-title::after,
     .meta-title::after,
     .smart-title::after {
+        display: none;
+    }
+
+    #Data,
+    #smart,
+    #visuali,
+    #dataanalysis {
+        height: 100% !important;
+        overflow-y: scroll !important;
+    }
+
+    #customized,
+    #etc {
+        height: 100% !important;
+        overflow-y: scroll !important;
+        padding-top: 60px;
+    }
+
+
+
+    .meta-wrap::before{
+        width: 100%;
+    }
+    #visuali .etc-wrap-text,
+    #dataanalysis .etc-wrap-text,
+    #customized .box-wrap {
+        width: 100%;
+    }
+
+    #Data img,
+    #visuali img,
+    #dataanalysis img,
+    #customized img {
+        width: 100%;
+    }
+
+    #smart img {
+        width: 100%;
+    }
+
+    #smart .box-wrap-title {
+        display: block !important;
+        font-weight: 600 !important;
+    }
+
+    #etc .etc-box-title {
+        display: block !important;
+        font-weight: 600 !important;
+        width: 100%;
+    }
+
+    #smart .etc-wrap-text div p,
+    #etc .etc-box p {
+        font-size: 1rem;
+        padding: 0px;
+        font-weight: 200;
         display: none;
     }
 

         flex-direction: column;
     }
 
+    .box-wrap {
+        gap: 5px;
+    }
+
     .etc-wrap-text div,
     .box-wrap div {
         width: 100%;
         border-radius: 5px;
-        border: 1px solid #333333;
         margin-bottom: 5px;
+    }
+
+    .Portfolio .swiper-slide img {
+        height: 100% !important;
     }
 
     .box-wrap div {
         padding: 1rem;
     }
-    .traffic-video{
+
+    .traffic-video {
         width: 90%;
         padding: 1rem;
     }
-    .traffic-video p{
+
+    .traffic-video p {
         font-size: 1rem;
     }
-    .traffic-button button{
+
+    .traffic-button button {
         padding: 7px 46px;
         font-size: 1.2rem;
-        margin-bottom: 2rem;
+        margin: 2rem 0;
     }
-    .traffic-button{
+
+    .traffic-button {
         justify-content: center;
     }
+
     .etc-wrap-text p,
     .box-wrap p {
-        font-size: 1rem;
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
     }
-    .swiper-slide img{
+
+
+    .solution .swiper-slide img {
         width: 100%;
         height: 100px !important;
-        object-fit: contain !important;
-        /* height: 100px !important; */
+
     }
+
     .text-box-title::after {
         left: -5px;
         top: -1px;
     }
-    .solution-text-box{
+
+    .solution-text-box {
         display: none;
     }
-  
+
 
 
     .logo {

         grid-template-columns: 1fr 1fr;
     }
 
-    /* .taken-wrap-box {
-        height: 74%;
-    } */
 
     .customized-wrap-title {
         margin-top: 50px;

 
 
     .box-wrap div p {
+        text-align: center;
+        margin: 0 auto;
         padding: 1px;
         margin-bottom: 0rem !important;
-        font-size: 1rem !important;
+        font-size: 1.5rem !important;
     }
 
     .etc-box-title {

 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 2.5rem !important;
+        font-size: 2.3rem !important;
+        word-break: keep-all;
     }
 
     .etc-wrap-title p,
     .customized-wrap-title p {
-        font-size: 1.2rem !important;
+        font-size: 1.5rem !important;
+        margin-bottom: 2rem;
     }
 
     .etc-wrap-title {
         /* height: 100%; */
-        margin-bottom: 10px !important;
+        padding-bottom: 10px !important;
+        margin-bottom: 0px !important;
     }
 
     .customized-box {

         width: 79%;
     }
 
+    .Portfolio {
+        padding-top: 0px;
+    }
+
     .etc-box-title {
         margin-bottom: 0px;
     }

         display: grid;
         grid-template-columns: 1fr;
         justify-content: center;
+        text-shadow: 2px 2px 5px #33333354;
         gap: 5px;
     }
 

     .box5,
     .box6 {
         width: 100%;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         background-size: cover;
         background-position: center;
         padding: 10px !important;

 
     .marketing-area {
         width: 100%;
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1fr;
     }
 
     .marketing-title {

         font-size: 1.5rem;
     }
 
+    .map-wrap {
+        width: 100%;
+        height: 100%;
+        border: 1px solid red;
+    }
+
+    #contentHeadquarter,
+    #contentDaeguBranch {
+        width: 100%;
+        height: 100%;
+    }
+
     .silde-box {
         height: 60%;
         display: flex;

         flex-wrap: nowrap;
     }
 
+    .solution-title::after,
+    .traffic-title::after,
+    .ai-title::after,
+    .meta-title::after,
+    .smart-title::after {
+        width: 20px;
+        height: 20px;
+        background-size: 20px 20px;
+        top: 20px;
+
+    }
+
     .taken-wrap-box {
         width: 100% !important;
         gap: 5px !important;

 
     .taken-area img,
     .traffic-area img,
-    .ai-area img {
-        opacity: 0;
+    .ai-area img,
+    .smart-area img {
+        object-fit: contain !important;
+        height: 200px !important;
+        margin: 0 auto;
+        margin-bottom: 10px;
+    }
+
+    .traffic-button {
+        margin: 2rem 0;
     }
 
     .solution-title,

     .text-box-title::after {
         left: -5px;
         top: -1px;
-    }
-
-    .traffic-button {
-        display: none;
-    }
-
-    .traffic-area {
-        display: none;
-    }
-
-    .solution-web-box {
-        display: none;
     }
 
 

     .box4 {
         transform: translateY(0px);
     }
+
+    .about-area {
+        flex-wrap: nowrap;
+        width: 100%;
+        height: 10%;
+        margin-bottom: 10px !important;
+        flex-direction: column;
+        gap: 10px !important;
+    }
 }
 
 @media all and (min-width:768px) and (max-width:1366px) {

         font-size: 1.3rem !important;
         font-weight: 800;
         margin-bottom: 0px;
+    }
+
+    .etc-wrap-text,
+    .box-wrap {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 5px;
     }
 
     .etc-wrap-text p {

         width: 100%;
         height: calc(100% - 182px) !important;
         display: grid;
-        grid-template-columns: 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
         justify-content: center;
         gap: 1px;
     }

5931a93

becb6d0

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     width: 1200px;
     height: 100%;
     margin: auto;
-    align-content: center;
+    /* align-content: center; */
     padding-top: 12rem;
     text-align: center;
 }

 
 .solution-sub-text {
     opacity: 0;
+    font-size: 2rem;
+    margin-bottom: 2rem;
 }
 
 .solution-sub-text.active {

 
 .address-subtitle {
     padding: 5px 0;
+    font-size: 2rem;
 }
 
 .map {

 .meta-title,
 .smart-title {
     width: 100%;
-    height: 60px;
+    /* height: 60px; */
     position: relative;
 }
 

 .ai-title p,
 .meta-title p,
 .smart-title p {
-    font-size: 3.5rem;
+    font-size: 4.8rem;
     font-weight: bold;
     font-family: 'Pretendard';
 

 
 .about-vision-box {
     width: 100%;
+    gap: 30px;
     flex-wrap: nowrap;
 }
 
 .about-vision-box img {
-    width: 40%;
+    /* width: 40%; */
+    /* padding: 30px; */
     object-fit: contain !important;
 
 }

 }
 
 .etc-box-title{
-    font-weight: 900;
+    font-weight: 600;
     text-align: center !important;
     font-size: 2.2rem !important;
 }

     text-align: center;
 }
 .etc-box p {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     line-height: 2;
     padding-left: 2rem;
 }

 }
 
 .etc-wrap-title p {
-    font-size: 1.5rem;
+    font-size: 2rem;
 }
 .etc-wrap-text p{
-    font-size: 1.2rem ;
+    font-size: 2rem ;
     font-weight: 600;
     padding: 10px 0;
-}
+}
+

5931a93

becb6d0

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


         $('.mobile-menu-button').show();
     });
 
-    // document.addEventListener("DOMContentLoaded", function () {
-    //     // '.dropdown'을 클릭했을 때 이벤트 리스너 추가
-    //     var dropdownLinks = document.querySelectorAll('.mobil-menu a[href="#"]');
-
-    //     dropdownLinks.forEach(function (link) {
-    //         link.addEventListener('click', function (e) {
-    //             // 클릭된 요소 바로 다음에 위치한 요소(실제 드롭다운 메뉴)를 찾음
-    //             var dropdownContent = this.nextElementSibling;
-
-    //             // 드롭다운 메뉴의 표시 상태를 토글
-    //             if (dropdownContent.style.display === 'block') {
-    //                 dropdownContent.style.display = 'none';
-    //             } else {
-    //                 dropdownContent.style.display = 'block';
-    //             }
-
-    //             // // 링크의 기본 동작(링크 이동)을 방지
-    //             // e.preventDefault();
-    //         });
-    //     });
-    // });
 
 </script>
 <style>

 
     nav ul li a {
         color: white;
-        font-size: 1.5rem;
-        font-weight: 600;
+        font-size: 1.8rem;
+        font-weight: 500;
         display: block;
         padding: 8px;
         text-align: center;

         width: 100%;
         margin: 0 auto;
         text-align: center;
+        font-weight: 400;
         background-color: #fff;
         transition: opacity 0.3s ease, visibility 0.3s ease;
         z-index: 1;

5931a93

becb6d0

views/main.html

--- views/main.html

+++ views/main.html


                             <button id="btnHeadquarter">본사</button>
                             <button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
                         </div>
-                        <div>
+                        <div class="map-wrap">
 
                             <div id="contentHeadquarter" style="height: 500px;">
                                 <div id="map1" style="width:1200px;height:100%;"></div>

     var mapContainer = document.getElementById('map1'), // 지도를 표시할 div 
         mapOption = {
             center: new kakao.maps.LatLng(35.8260208900541, 128.75636298231913),
-            level: 3 // 지도의 확대 레벨
+            level: 4 // 지도의 확대 레벨
         };
     var map1 = new kakao.maps.Map(mapContainer, mapOption);
 

     });
 
     // 마커가 지도 위에 표시되도록 설정합니다
+
     marker.setMap(map2);
     function resizeMap() {
         var mapContainer2 = document.getElementById('map2');
+        var mapContainer = document.getElementById('map1');
         mapContainer2.style.width = '1200px';
+        mapContainer.style.width = '1200px';
         mapContainer2.style.height = '500px';
+        mapContainer.style.height = '500px';
     }
 
     function relayout() {
         map2.relayout();
+        map1.relayout();
     }
 
     $(document).ready(function () {

             $("#btnDaeguBranch").removeClass('on');
             $("#contentDaeguBranch").hide();
             $("#contentHeadquarter").show();
-            map2.relayout();
+            map1.relayout();
+            map1.setCenter(new kakao.maps.LatLng(35.8260208900541, 128.75636298231913))
         });
 
         $("#btnDaeguBranch").click(function () {

                 el: ".swiper-pagination",
                 clickable: true,
             },
-            on: {
-                slideChangeTransitionEnd: function () {
-                    // 슬라이드 변경 시 동작하는 코드
-                },
-                slideChange: function () {
-                    // 다른 슬라이드로 변경될 때 실행되는 코드
-                },
-                reachEnd: function () {
-                    // 스와이퍼의 끝에 도달했을 때 실행되는 코드
-                },
-            }
+            
         });
     }
 }

             },
 
         }, breakpoints: {
-            250: {
-                slidesPerView: 1,
-                spaceBetween: 20
-            },
-            // 화면의 넓이가 320px 이상일 때
+        //     250: {
+        //         slidesPerView: 1,
+        //         spaceBetween: 20
+        //     },
+        //     // 화면의 넓이가 320px 이상일 때
 
-            // 화면의 넓이가 640px 이상일 때
-            640: {
-                slidesPerView: 2,
-                spaceBetween: 40
-            },
-            800: {
-                slidesPerView: 3,
-                spaceBetween: 40
-            }
+        //     // 화면의 넓이가 640px 이상일 때
+        //     640: {
+        //         slidesPerView: 2,
+        //         spaceBetween: 40
+        //     },
+        //     800: {
+        //         slidesPerView: 3,
+        //         spaceBetween: 40
+        //     }
         },
     });
 

5931a93

becb6d0

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


 
 <body>
     <div id="header"></div>
-    <div class="swiper mySwiper">
+    <div class="swiper mySwiper About">
         <div class="swiper-wrapper">
             <div class="swiper-slide about-wrapper">
                 <div class="about-wrap slide-wrap ">

 
                         <div class=" flex justify-center about-area"
                             style="width: 100%; gap: 190px; margin-bottom: 50px;">
-                            <div class="about-radius-left ">
+                            <div class="about-radius-left solution-ani">
                                 <p class="about-text">공감</p>
                                 <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
                             </div>
-                            <div class="about-radius">
+                            <div class="about-radius solution-ani">
                                 <p class="about-text">구현</p>
                                 <p class="about-sub-text">가치를 주는 솔루션 도출</p>
                             </div>
 
-                            <div class="about-radius-right ">
+                            <div class="about-radius-right solution-ani">
                                 <p class="about-text">생각</p>
                                 <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
                             </div>
                         </div>
-                        <div class="flex justify-center about-area" style="width: 100%;gap: 188px;">
+                        <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
                             <div class="about-radius-bottom-left ">
                                 <p class="about-text">검증</p>
                                 <p class="about-sub-text">결과물의 철저한 검증</p>
                             </div>
-                            <div class="about-radius-bottom-right ">
+                            <div class="about-radius-bottom-right solution-ani">
                                 <p class="about-text">소통</p>
                                 <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
                             </div>

                     </div>
                 </div>
             </div>
-            <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap history-wrap   slide-solution ">
+            <div class="swiper-slide" id="history">
+                <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
                     <div class="text-area  felx">
                         <div class="about-title mb20">
                             <p>History</p>

                                     </div>
                                     <div class="flex">
                                         <p class="month mr30">10월</p>
-                                        <div class="month-text" style="text-align: left;">
+                                        <div class="month-text text-section" style="text-align: left;">
                                             <p>· 소프트웨어 기업 등록</p>
                                             <img src="../../resources/img/common/history-img1.png" alt="">
                                         </div>

5931a93

becb6d0

views/pages/Customized.html

--- views/pages/Customized.html

+++ views/pages/Customized.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center customized">
+    <div class=" text-area pb60 slide-section flex align-center" id="customized">
 
 
         <div class="flex justify-between" style="gap: 10px; width: 100%;">

         display: block;
         object-fit: cover;
     }
+    .box-wrap p{
+        padding-top: 1rem;
+        font-size: 2rem;
+    }
 </style>
 
 </html>

5931a93

becb6d0

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60  slide-section flex align-center">
+    <div class=" text-area pb60  slide-section flex align-center " id="Data">
 
 
             <div class="flex justify-between " style="gap: 10px; width: 100%;">

     }
 
     .box-wrap div p {
-        font-size: 1.2rem;
+        font-size: 2rem;
     font-weight: 600;
     padding: 10px 0;
     }

5931a93

becb6d0

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html


     <div id="header"></div>
 
 
-    <div class="text-area pb60 slide-section flex align-center dataanalysis" style="gap: 10px;  height: 100%;">
+    <div class="text-area pb60 slide-section flex align-center " id="dataanalysis" style="gap: 10px;  height: 100%;">
         <div class="etc-wrap-title mb20">
             <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
             <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>

5931a93

becb6d0

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center etc">
+    <div class=" text-area pb60 slide-section flex align-center" id="etc">
 
 
 

5931a93

views/pages/SmartCtiy copy.html (deleted)

--- views/pages/SmartCtiy copy.html

...	...	@@ -1,180 +0,0 @@
	1	-<!DOCTYPE html>
	2	-<html lang="en">
	3	-
	4	-<head>
	5	- <meta charset="UTF-8">
	6	- <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	- <link rel="stylesheet" href="../../resources/css/reset.css">
	11	- <link rel="stylesheet" href="../../resources/css/style.css">
	12	- <link rel="stylesheet" href="../../resources/css/component.css">
	13	- <link rel="stylesheet" href="../../resources/css/common.css">
	14	- <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	-
	16	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	-
	18	-
	19	-
	20	- <title>TAKENSOFT</title>
	21	-</head>
	22	-
	23	-<body>
	24	- <div id="header"></div>
	25	-
	26	-
	27	- <div class="text-area pb60 slide-section flex align-center" style="gap: 10px; height: 100%;">
	28	- <div class="etc-wrap-title mb20">
	29	- <h1 class="mb20">스마트시티 솔루션 공급</h1>
	30	- <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
	31	- 제공합니다.</p>
	32	- </div>
	33	- <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
	34	- <div class="">
	35	- <img src="../../resources/img/common/smart-img1.png" alt="">
	36	- <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
	37	- <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
	38	- <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
	39	- </div>
	40	- <div class="">
	41	- <img src="../../resources/img/common/smart-img2.png" alt="">
	42	- <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
	43	- <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
	44	- <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
	45	- </div>
	46	- <div class="">
	47	- <img src="../../resources/img/common/smart-img3.png" alt="">
	48	- <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
	49	- <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
	50	- <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
	51	- </div>
	52	-
	53	- </div>
	54	-
	55	- </div>
	56	-
	57	- <div id="footer"></div>
	58	-
	59	-</body>
	60	-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	61	-<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	62	-<script>
	63	-
	64	- $(document).ready(function () {
	65	- $("#btnHeadquarter").click(function () {
	66	- $("#btnHeadquarter").addClass('on');
	67	- $("#btnDaeguBranch").removeClass('on');
	68	- $("#contentDaeguBranch").hide();
	69	-
	70	- $("#contentHeadquarter").show();
	71	- });
	72	-
	73	- $("#btnDaeguBranch").click(function () {
	74	- $("#btnDaeguBranch").addClass('on');
	75	- $("#btnHeadquarter").removeClass('on');
	76	-
	77	- $("#contentHeadquarter").hide();
	78	-
	79	- $("#contentDaeguBranch").show();
	80	-
	81	-
	82	-
	83	-
	84	-
	85	- });
	86	- });
	87	-
	88	-
	89	-
	90	- $(function () {
	91	- $("#header").load("../layout/Header.html");
	92	- $("#footer").load("../layout/footer.html");
	93	- $("#footer").show();
	94	-
	95	- });
	96	-
	97	-</script>
	98	-
	99	-<style scoped>
	100	- /* 스크롤바 없애기 */
	101	- body {
	102	- -ms-overflow-style: none;
	103	- /* 인터넷 익스플로러 */
	104	- scrollbar-width: none;
	105	- /* 파이어폭스 */
	106	- }
	107	-
	108	- ::-webkit-scrollbar {
	109	- display: none;
	110	- }
	111	-
	112	- #header {
	113	- position: fixed;
	114	- top: 0;
	115	- z-index: 3;
	116	- border-bottom: 1px solid #ced4da;
	117	- background-color: white;
	118	- }
	119	-
	120	- #header .header .logo {
	121	- background: url(../../resources/img/component/logo-color.png) no-repeat;
	122	- width: 200px;
	123	- background-size: contain;
	124	- height: 25px;
	125	-
	126	-
	127	- }
	128	-
	129	- #header .header nav li a {
	130	- color: #333;
	131	-
	132	- }
	133	-
	134	-
	135	-
	136	- html,
	137	- body {
	138	- position: relative;
	139	- height: 100%;
	140	- font-family: 'Pretendard';
	141	-
	142	- }
	143	-
	144	- body {
	145	- background: linear-gradient(#d7e2ff9d, #fff, #fff);
	146	- font-family: 'Pretendard';
	147	- font-size: 14px;
	148	- color: #000;
	149	- margin: 0;
	150	- padding: 0;
	151	- }
	152	-
	153	- .box-wrap {
	154	- flex-wrap: nowrap;
	155	- }
	156	-
	157	- .box-wrap-title {
	158	- text-align: center;
	159	- font-size: 2rem;
	160	- font-weight: 600;
	161	- }
	162	-
	163	- .box-wrap div {
	164	- width: 100%;
	165	- }
	166	-
	167	- .box-wrap div img {
	168	- width: 100%;
	169	- padding-bottom: 2rem;
	170	- }
	171	-
	172	- .box-wrap div div p {
	173	- height: 20%;
	174	- text-align: left;
	175	- font-size: 1.5rem;
	176	- line-height: 1.5;
	177	- }
	178	-</style>
	179	-
	180	-</html>(No newline at end of file)

5931a93

becb6d0

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html


     <div id="header"></div>
 
 
-    <div class="text-area pb60 slide-section flex align-center smart" style="gap: 10px;  height: 100%;">
+    <div class="text-area pb60 slide-section flex align-center" id="smart" style="gap: 10px;  height: 100%;">
         <div class="etc-wrap-title mb20">
             <h1 class="mb20">스마트시티 솔루션 공급</h1>
             <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을

     }
 
     .box-wrap-title {
-        text-align: center;
-        font-size: 2rem !important;
+        text-align: center !important;
         font-weight: 700;
+        font-size: 2.1rem !important;
     }
 
     .etc-wrap-text {

     }
 
     .etc-wrap-text  div p {
+        text-align: left;
         padding: 1rem 3rem;
-
-        /* text-align: left; */
         font-size: 1.5rem;
     }
+  
 </style>
 
 </html>

5931a93

becb6d0

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


 
 <body>
     <div id="header"></div>
-    <div class="swiper mySwiper">
+    <div class="swiper mySwiper" id="solution">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
                 <div class=" text-area pb60 slide-section flex align-center solution">

                         <p>스마트제조 데이터 모니터링 서비스</p>
                     </div>
                     <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
-                        <div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
+                        <div class="smart-area flex align-end solution-web-box " style="height: 100%; width: 100%;">
 
                             <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">

5931a93

becb6d0

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center visuali">
+    <div class=" text-area pb60 slide-section flex align-center" id="visuali">
 
 
         <div class=" flex justify-between  align-center"
-            style="gap: 10px; width: 100%; height: 100%; align-content: center;">
+            style="gap: 10px; width: 100%; ">
             <div class="etc-wrap-title mb20">
                 <h1 class="mb20">시각화 서비스 시스템 구축</h1>
                 <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,7 +4,7 @@
4	4	width: 1200px;
5	5	height: 100%;
6	6	margin: auto;
7		- align-content: center;
	7	+ /* align-content: center; */
8	8	padding-top: 12rem;
9	9	text-align: center;
10	10	}
...	...	@@ -259,6 +259,8 @@
259	259
260	260	.solution-sub-text {
261	261	opacity: 0;
	262	+ font-size: 2rem;
	263	+ margin-bottom: 2rem;
262	264	}
263	265
264	266	.solution-sub-text.active {
...	...	@@ -633,6 +635,7 @@
633	635
634	636	.address-subtitle {
635	637	padding: 5px 0;
	638	+ font-size: 2rem;
636	639	}
637	640
638	641	.map {
...	...	@@ -703,7 +706,7 @@
703	706	.meta-title,
704	707	.smart-title {
705	708	width: 100%;
706		- height: 60px;
	709	+ /* height: 60px; */
707	710	position: relative;
708	711	}
709	712
...	...	@@ -712,7 +715,7 @@
712	715	.ai-title p,
713	716	.meta-title p,
714	717	.smart-title p {
715		- font-size: 3.5rem;
	718	+ font-size: 4.8rem;
716	719	font-weight: bold;
717	720	font-family: 'Pretendard';
718	721
...	...	@@ -1261,11 +1264,13 @@
1261	1264
1262	1265	.about-vision-box {
1263	1266	width: 100%;
	1267	+ gap: 30px;
1264	1268	flex-wrap: nowrap;
1265	1269	}
1266	1270
1267	1271	.about-vision-box img {
1268		- width: 40%;
	1272	+ /* width: 40%; */
	1273	+ /* padding: 30px; */
1269	1274	object-fit: contain !important;
1270	1275
1271	1276	}
...	...	@@ -1376,7 +1381,7 @@
1376	1381	}
1377	1382
1378	1383	.etc-box-title{
1379		- font-weight: 900;
	1384	+ font-weight: 600;
1380	1385	text-align: center !important;
1381	1386	font-size: 2.2rem !important;
1382	1387	}
...	...	@@ -1390,7 +1395,7 @@
1390	1395	text-align: center;
1391	1396	}
1392	1397	.etc-box p {
1393		- font-size: 1.5rem;
	1398	+ font-size: 1.8rem;
1394	1399	line-height: 2;
1395	1400	padding-left: 2rem;
1396	1401	}
...	...	@@ -1446,10 +1451,11 @@
1446	1451	}
1447	1452
1448	1453	.etc-wrap-title p {
1449		- font-size: 1.5rem;
	1454	+ font-size: 2rem;
1450	1455	}
1451	1456	.etc-wrap-text p{
1452		- font-size: 1.2rem ;
	1457	+ font-size: 2rem ;
1453	1458	font-weight: 600;
1454	1459	padding: 10px 0;
1455		-} (No newline at end of file)
	1460	+}
	1461	+

...	...	@@ -160,7 +160,7 @@
160	160	<button id="btnHeadquarter">본사</button>
161	161	<button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
162	162	</div>
163		- <div>
	163	+ <div class="map-wrap">
164	164
165	165	<div id="contentHeadquarter" style="height: 500px;">
166	166	<div id="map1" style="width:1200px;height:100%;"></div>
...	...	@@ -204,7 +204,7 @@
204	204	var mapContainer = document.getElementById('map1'), // 지도를 표시할 div
205	205	mapOption = {
206	206	center: new kakao.maps.LatLng(35.8260208900541, 128.75636298231913),
207		- level: 3 // 지도의 확대 레벨
	207	+ level: 4 // 지도의 확대 레벨
208	208	};
209	209	var map1 = new kakao.maps.Map(mapContainer, mapOption);
210	210
...	...	@@ -235,15 +235,20 @@
235	235	});
236	236
237	237	// 마커가 지도 위에 표시되도록 설정합니다
	238	+
238	239	marker.setMap(map2);
239	240	function resizeMap() {
240	241	var mapContainer2 = document.getElementById('map2');
	242	+ var mapContainer = document.getElementById('map1');
241	243	mapContainer2.style.width = '1200px';
	244	+ mapContainer.style.width = '1200px';
242	245	mapContainer2.style.height = '500px';
	246	+ mapContainer.style.height = '500px';
243	247	}
244	248
245	249	function relayout() {
246	250	map2.relayout();
	251	+ map1.relayout();
247	252	}
248	253
249	254	$(document).ready(function () {
...	...	@@ -254,7 +259,8 @@
254	259	$("#btnDaeguBranch").removeClass('on');
255	260	$("#contentDaeguBranch").hide();
256	261	$("#contentHeadquarter").show();
257		- map2.relayout();
	262	+ map1.relayout();
	263	+ map1.setCenter(new kakao.maps.LatLng(35.8260208900541, 128.75636298231913))
258	264	});
259	265
260	266	$("#btnDaeguBranch").click(function () {
...	...	@@ -286,17 +292,7 @@
286	292	el: ".swiper-pagination",
287	293	clickable: true,
288	294	},
289		- on: {
290		- slideChangeTransitionEnd: function () {
291		- // 슬라이드 변경 시 동작하는 코드
292		- },
293		- slideChange: function () {
294		- // 다른 슬라이드로 변경될 때 실행되는 코드
295		- },
296		- reachEnd: function () {
297		- // 스와이퍼의 끝에 도달했을 때 실행되는 코드
298		- },
299		- }
	295	+
300	296	});
301	297	}
302	298	}
...	...	@@ -424,21 +420,21 @@
424	420	},
425	421
426	422	}, breakpoints: {
427		- 250: {
428		- slidesPerView: 1,
429		- spaceBetween: 20
430		- },
431		- // 화면의 넓이가 320px 이상일 때
	423	+ // 250: {
	424	+ // slidesPerView: 1,
	425	+ // spaceBetween: 20
	426	+ // },
	427	+ // // 화면의 넓이가 320px 이상일 때
432	428
433		- // 화면의 넓이가 640px 이상일 때
434		- 640: {
435		- slidesPerView: 2,
436		- spaceBetween: 40
437		- },
438		- 800: {
439		- slidesPerView: 3,
440		- spaceBetween: 40
441		- }
	429	+ // // 화면의 넓이가 640px 이상일 때
	430	+ // 640: {
	431	+ // slidesPerView: 2,
	432	+ // spaceBetween: 40
	433	+ // },
	434	+ // 800: {
	435	+ // slidesPerView: 3,
	436	+ // spaceBetween: 40
	437	+ // }
442	438	},
443	439	});
444	440

...	...	@@ -27,9 +27,8 @@
27	27	.solution-text,
28	28	.portfolio-text,
29	29	.map-text,
30		- .about-title p:nth-child(1),
31		- .marketing-wrap-title h1 {
32		- font-size: 2.2rem !important;
	30	+ .about-title p:nth-child(1) {
	31	+ font-size: 2.5rem !important;
33	32	}
34	33
35	34
...	...	@@ -37,16 +36,17 @@
37	36	.traffic-title p,
38	37	.ai-title p,
39	38	.meta-title p,
40		- .smart-title p,
41		- .etc-wrap-title p {
42		- font-size: 1.5rem;
	39	+ .smart-title p {
	40	+ font-size: 2.3rem;
43	41	}
44	42
45	43	.sub-text,
46	44	.solution-sub-text {
47	45	font-size: 1rem !important;
48	46	}
49		-
	47	+ .marketing-wrap-title h1{
	48	+ font-size: 3rem;
	49	+ }
50	50
51	51	.solution-box {
52	52	width: 100%;
...	...	@@ -85,9 +85,7 @@
85	85	margin-bottom: 0px;
86	86	}
87	87
88		- .etc-wrap-text p {
89		- padding: 11px 10px;
90		- }
	88	+
91	89
92	90	.header-area {
93	91	width: 100%;
...	...	@@ -121,11 +119,14 @@
121	119	margin: 0;
122	120	background-color: #fff;
123	121	}
124		-
	122	+nav ul li a{
	123	+ font-size: 2rem !important;
	124	+ }
125	125	.mobil-menu ul li ul li a {
126		- font-weight: 500;
	126	+
	127	+ font-weight: 300;
127	128	color: #333;
128		- font-size: 1.2rem !important;
	129	+ font-size: 1.5rem !important;
129	130	}
130	131
131	132	nav>ul {
...	...	@@ -169,7 +170,7 @@
169	170	.text-area {
170	171	width: 100% !important;
171	172	height: 100% !important;
172		- padding: 2rem;
	173	+ padding: 6rem 2rem;
173	174	}
174	175
175	176	.innerSwiper-title {
...	...	@@ -238,7 +239,9 @@
238	239
239	240	.address-tile {
240	241	width: 100%;
	242	+ text-align: center;
241	243	font-size: 1.2rem;
	244	+ padding-left: 0px;
242	245	}
243	246
244	247	.address-subtitle {
...	...	@@ -291,7 +294,8 @@
291	294	}
292	295
293	296	.about-title-sub {
294		- font-size: 1.2rem;
	297	+ font-size: 1.5rem;
	298	+ margin-bottom: 0px;
295	299	}
296	300
297	301	.about-area {
...	...	@@ -361,13 +365,20 @@
361	365	}
362	366
363	367	.slideText p:first-child {
364		- font-size: 1.2rem;
	368	+ font-size: 2rem;
365	369	}
366		-
367		- .slideTextDtail p {
368		- font-size: 1rem;
	370	+ .slideTextDtail p{
	371	+ display: none;
	372	+ }
	373	+ .slideTextDtail p:nth-child(1) {
	374	+ display: block !important;
	375	+ font-size: 1.2rem;
369	376	border-bottom: 0px !important;
370	377	margin-bottom: 0.5rem;
	378	+ }
	379	+
	380	+ .slideTextDtail {
	381	+ padding: 0 1rem;
371	382	}
372	383
373	384	.slideTextDtail div div {
...	...	@@ -375,21 +386,29 @@
375	386	}
376	387
377	388	.about-title {
	389	+ margin-top: 60px;
378	390	margin-bottom: 1rem !important;
379	391	}
380	392
381		-
382		- .about img {
	393	+ .solution-web-box img {
383	394	width: 100%;
384		- height: 100%;
	395	+ object-fit: contain !important;
	396	+ height: 200px !important;
	397	+ margin-bottom: 0px !important;
385	398	}
386	399
387		- .about-vision-box {
388		- height: 200px;
	400	+
	401	+ .month-text img {
	402	+ width: 100px !important;
	403	+ height: 150px;
	404	+ }
	405	+
	406	+ .text-section {
	407	+ width: 100%;
389	408	}
390	409
391	410	.about-vision-box img {
392		- height: 149px;
	411	+ height: 150px;
393	412	display: block;
394	413	object-fit: contain;
395	414	}
...	...	@@ -439,7 +458,6 @@
439	458	.traffic-area img,
440	459	.ai-area img {
441	460	width: 100%;
442		- height: 100px !important;
443	461	object-fit: contain !important;
444	462	margin-bottom: 2rem;
445	463	}
...	...	@@ -447,18 +465,24 @@
447	465
448	466	.taken-box {
449	467	width: 100%;
450		- margin-bottom: 2rem;
	468	+ /* margin-bottom: 2rem; */
451	469	flex-direction: column;
452	470	gap: 5px;
	471	+ }
	472	+
	473	+ .text-after p:nth-child(1) {
	474	+ display: block;
	475	+ }
	476	+
	477	+ .text-after p {
	478	+ display: none;
453	479	}
454	480
455	481	.taken-box p {
456	482	font-size: 1.2rem;
457	483	}
458	484
459		- .taken-area p {
460		- font-size: 1rem;
461		- }
	485	+
462	486
463	487	.text-box-title {
464	488	font-size: 1rem;
...	...	@@ -475,6 +499,62 @@
475	499	.ai-title::after,
476	500	.meta-title::after,
477	501	.smart-title::after {
	502	+ display: none;
	503	+ }
	504	+
	505	+ #Data,
	506	+ #smart,
	507	+ #visuali,
	508	+ #dataanalysis {
	509	+ height: 100% !important;
	510	+ overflow-y: scroll !important;
	511	+ }
	512	+
	513	+ #customized,
	514	+ #etc {
	515	+ height: 100% !important;
	516	+ overflow-y: scroll !important;
	517	+ padding-top: 60px;
	518	+ }
	519	+
	520	+
	521	+
	522	+ .meta-wrap::before{
	523	+ width: 100%;
	524	+ }
	525	+ #visuali .etc-wrap-text,
	526	+ #dataanalysis .etc-wrap-text,
	527	+ #customized .box-wrap {
	528	+ width: 100%;
	529	+ }
	530	+
	531	+ #Data img,
	532	+ #visuali img,
	533	+ #dataanalysis img,
	534	+ #customized img {
	535	+ width: 100%;
	536	+ }
	537	+
	538	+ #smart img {
	539	+ width: 100%;
	540	+ }
	541	+
	542	+ #smart .box-wrap-title {
	543	+ display: block !important;
	544	+ font-weight: 600 !important;
	545	+ }
	546	+
	547	+ #etc .etc-box-title {
	548	+ display: block !important;
	549	+ font-weight: 600 !important;
	550	+ width: 100%;
	551	+ }
	552	+
	553	+ #smart .etc-wrap-text div p,
	554	+ #etc .etc-box p {
	555	+ font-size: 1rem;
	556	+ padding: 0px;
	557	+ font-weight: 200;
478	558	display: none;
479	559	}
480	560
...	...	@@ -505,50 +585,66 @@
505	585	flex-direction: column;
506	586	}
507	587
	588	+ .box-wrap {
	589	+ gap: 5px;
	590	+ }
	591	+
508	592	.etc-wrap-text div,
509	593	.box-wrap div {
510	594	width: 100%;
511	595	border-radius: 5px;
512		- border: 1px solid #333333;
513	596	margin-bottom: 5px;
	597	+ }
	598	+
	599	+ .Portfolio .swiper-slide img {
	600	+ height: 100% !important;
514	601	}
515	602
516	603	.box-wrap div {
517	604	padding: 1rem;
518	605	}
519		- .traffic-video{
	606	+
	607	+ .traffic-video {
520	608	width: 90%;
521	609	padding: 1rem;
522	610	}
523		- .traffic-video p{
	611	+
	612	+ .traffic-video p {
524	613	font-size: 1rem;
525	614	}
526		- .traffic-button button{
	615	+
	616	+ .traffic-button button {
527	617	padding: 7px 46px;
528	618	font-size: 1.2rem;
529		- margin-bottom: 2rem;
	619	+ margin: 2rem 0;
530	620	}
531		- .traffic-button{
	621	+
	622	+ .traffic-button {
532	623	justify-content: center;
533	624	}
	625	+
534	626	.etc-wrap-text p,
535	627	.box-wrap p {
536		- font-size: 1rem;
	628	+ font-size: 1.5rem;
	629	+ margin-bottom: 2rem;
537	630	}
538		- .swiper-slide img{
	631	+
	632	+
	633	+ .solution .swiper-slide img {
539	634	width: 100%;
540	635	height: 100px !important;
541		- object-fit: contain !important;
542		- /* height: 100px !important; */
	636	+
543	637	}
	638	+
544	639	.text-box-title::after {
545	640	left: -5px;
546	641	top: -1px;
547	642	}
548		- .solution-text-box{
	643	+
	644	+ .solution-text-box {
549	645	display: none;
550	646	}
551		-
	647	+
552	648
553	649
554	650	.logo {
...	...	@@ -576,9 +672,6 @@
576	672	grid-template-columns: 1fr 1fr;
577	673	}
578	674
579		- /* .taken-wrap-box {
580		- height: 74%;
581		- } */
582	675
583	676	.customized-wrap-title {
584	677	margin-top: 50px;
...	...	@@ -612,9 +705,11 @@
612	705
613	706
614	707	.box-wrap div p {
	708	+ text-align: center;
	709	+ margin: 0 auto;
615	710	padding: 1px;
616	711	margin-bottom: 0rem !important;
617		- font-size: 1rem !important;
	712	+ font-size: 1.5rem !important;
618	713	}
619	714
620	715	.etc-box-title {
...	...	@@ -630,17 +725,20 @@
630	725
631	726	.etc-wrap-title h1,
632	727	.customized-wrap-title h1 {
633		- font-size: 2.5rem !important;
	728	+ font-size: 2.3rem !important;
	729	+ word-break: keep-all;
634	730	}
635	731
636	732	.etc-wrap-title p,
637	733	.customized-wrap-title p {
638		- font-size: 1.2rem !important;
	734	+ font-size: 1.5rem !important;
	735	+ margin-bottom: 2rem;
639	736	}
640	737
641	738	.etc-wrap-title {
642	739	/* height: 100%; */
643		- margin-bottom: 10px !important;
	740	+ padding-bottom: 10px !important;
	741	+ margin-bottom: 0px !important;
644	742	}
645	743
646	744	.customized-box {
...	...	@@ -664,6 +762,10 @@
664	762	width: 79%;
665	763	}
666	764
	765	+ .Portfolio {
	766	+ padding-top: 0px;
	767	+ }
	768	+
667	769	.etc-box-title {
668	770	margin-bottom: 0px;
669	771	}
...	...	@@ -682,6 +784,7 @@
682	784	display: grid;
683	785	grid-template-columns: 1fr;
684	786	justify-content: center;
	787	+ text-shadow: 2px 2px 5px #33333354;
685	788	gap: 5px;
686	789	}
687	790
...	...	@@ -692,7 +795,7 @@
692	795	.box5,
693	796	.box6 {
694	797	width: 100%;
695		- font-size: 1.2rem;
	798	+ font-size: 1.5rem;
696	799	background-size: cover;
697	800	background-position: center;
698	801	padding: 10px !important;
...	...	@@ -873,7 +976,7 @@
873	976
874	977	.marketing-area {
875	978	width: 100%;
876		- grid-template-columns: 1fr;
	979	+ grid-template-columns: 1fr 1fr;
877	980	}
878	981
879	982	.marketing-title {
...	...	@@ -1004,6 +1107,18 @@
1004	1107	font-size: 1.5rem;
1005	1108	}
1006	1109
	1110	+ .map-wrap {
	1111	+ width: 100%;
	1112	+ height: 100%;
	1113	+ border: 1px solid red;
	1114	+ }
	1115	+
	1116	+ #contentHeadquarter,
	1117	+ #contentDaeguBranch {
	1118	+ width: 100%;
	1119	+ height: 100%;
	1120	+ }
	1121	+
1007	1122	.silde-box {
1008	1123	height: 60%;
1009	1124	display: flex;
...	...	@@ -1087,6 +1202,18 @@
1087	1202	flex-wrap: nowrap;
1088	1203	}
1089	1204
	1205	+ .solution-title::after,
	1206	+ .traffic-title::after,
	1207	+ .ai-title::after,
	1208	+ .meta-title::after,
	1209	+ .smart-title::after {
	1210	+ width: 20px;
	1211	+ height: 20px;
	1212	+ background-size: 20px 20px;
	1213	+ top: 20px;
	1214	+
	1215	+ }
	1216	+
1090	1217	.taken-wrap-box {
1091	1218	width: 100% !important;
1092	1219	gap: 5px !important;
...	...	@@ -1102,8 +1229,16 @@
1102	1229
1103	1230	.taken-area img,
1104	1231	.traffic-area img,
1105		- .ai-area img {
1106		- opacity: 0;
	1232	+ .ai-area img,
	1233	+ .smart-area img {
	1234	+ object-fit: contain !important;
	1235	+ height: 200px !important;
	1236	+ margin: 0 auto;
	1237	+ margin-bottom: 10px;
	1238	+ }
	1239	+
	1240	+ .traffic-button {
	1241	+ margin: 2rem 0;
1107	1242	}
1108	1243
1109	1244	.solution-title,
...	...	@@ -1204,18 +1339,6 @@
1204	1339	.text-box-title::after {
1205	1340	left: -5px;
1206	1341	top: -1px;
1207		- }
1208		-
1209		- .traffic-button {
1210		- display: none;
1211		- }
1212		-
1213		- .traffic-area {
1214		- display: none;
1215		- }
1216		-
1217		- .solution-web-box {
1218		- display: none;
1219	1342	}
1220	1343
1221	1344
...	...	@@ -1339,6 +1462,15 @@
1339	1462	.box4 {
1340	1463	transform: translateY(0px);
1341	1464	}
	1465	+
	1466	+ .about-area {
	1467	+ flex-wrap: nowrap;
	1468	+ width: 100%;
	1469	+ height: 10%;
	1470	+ margin-bottom: 10px !important;
	1471	+ flex-direction: column;
	1472	+ gap: 10px !important;
	1473	+ }
1342	1474	}
1343	1475
1344	1476	@media all and (min-width:768px) and (max-width:1366px) {
...	...	@@ -1424,6 +1556,14 @@
1424	1556	font-size: 1.3rem !important;
1425	1557	font-weight: 800;
1426	1558	margin-bottom: 0px;
	1559	+ }
	1560	+
	1561	+ .etc-wrap-text,
	1562	+ .box-wrap {
	1563	+ width: 100%;
	1564	+ display: grid;
	1565	+ grid-template-columns: 1fr 1fr 1fr;
	1566	+ gap: 5px;
1427	1567	}
1428	1568
1429	1569	.etc-wrap-text p {
...	...	@@ -2004,7 +2144,7 @@
2004	2144	width: 100%;
2005	2145	height: calc(100% - 182px) !important;
2006	2146	display: grid;
2007		- grid-template-columns: 1fr;
	2147	+ grid-template-columns: 1fr 1fr 1fr;
2008	2148	justify-content: center;
2009	2149	gap: 1px;
2010	2150	}

...	...	@@ -22,7 +22,7 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="swiper mySwiper">
	25	+ <div class="swiper mySwiper About">
26	26	<div class="swiper-wrapper">
27	27	<div class="swiper-slide about-wrapper">
28	28	<div class="about-wrap slide-wrap ">
...	...	@@ -34,26 +34,26 @@
34	34
35	35	<div class=" flex justify-center about-area"
36	36	style="width: 100%; gap: 190px; margin-bottom: 50px;">
37		- <div class="about-radius-left ">
	37	+ <div class="about-radius-left solution-ani">
38	38	<p class="about-text">공감</p>
39	39	<p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
40	40	</div>
41		- <div class="about-radius">
	41	+ <div class="about-radius solution-ani">
42	42	<p class="about-text">구현</p>
43	43	<p class="about-sub-text">가치를 주는 솔루션 도출</p>
44	44	</div>
45	45
46		- <div class="about-radius-right ">
	46	+ <div class="about-radius-right solution-ani">
47	47	<p class="about-text">생각</p>
48	48	<p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
49	49	</div>
50	50	</div>
51		- <div class="flex justify-center about-area" style="width: 100%;gap: 188px;">
	51	+ <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
52	52	<div class="about-radius-bottom-left ">
53	53	<p class="about-text">검증</p>
54	54	<p class="about-sub-text">결과물의 철저한 검증</p>
55	55	</div>
56		- <div class="about-radius-bottom-right ">
	56	+ <div class="about-radius-bottom-right solution-ani">
57	57	<p class="about-text">소통</p>
58	58	<p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
59	59	</div>
...	...	@@ -173,8 +173,8 @@
173	173	</div>
174	174	</div>
175	175	</div>
176		- <div class="swiper-slide">
177		- <div class="taken-wrap slide-wrap history-wrap slide-solution ">
	176	+ <div class="swiper-slide" id="history">
	177	+ <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
178	178	<div class="text-area felx">
179	179	<div class="about-title mb20">
180	180	<p>History</p>
...	...	@@ -197,7 +197,7 @@
197	197	</div>
198	198	<div class="flex">
199	199	<p class="month mr30">10월</p>
200		- <div class="month-text" style="text-align: left;">
	200	+ <div class="month-text text-section" style="text-align: left;">
201	201	<p>· 소프트웨어 기업 등록</p>
202	202	<img src="../../resources/img/common/history-img1.png" alt="">
203	203	</div>

...	...	@@ -24,7 +24,7 @@
24	24	<div id="header"></div>
25	25
26	26
27		- <div class="text-area pb60 slide-section flex align-center dataanalysis" style="gap: 10px; height: 100%;">
	27	+ <div class="text-area pb60 slide-section flex align-center " id="dataanalysis" style="gap: 10px; height: 100%;">
28	28	<div class="etc-wrap-title mb20">
29	29	<h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
30	30	<p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>

...	...	@@ -22,11 +22,11 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area pb60 slide-section flex align-center visuali">
	25	+ <div class=" text-area pb60 slide-section flex align-center" id="visuali">
26	26
27	27
28	28	<div class=" flex justify-between align-center"
29		- style="gap: 10px; width: 100%; height: 100%; align-content: center;">
	29	+ style="gap: 10px; width: 100%; ">
30	30	<div class="etc-wrap-title mb20">
31	31	<h1 class="mb20">시각화 서비스 시스템 구축</h1>
32	32	<p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>

Delete comment