Commit @91d397aa9ea6bf72cf2484468e57daa060165317

mycoms 2024-04-04

240404김하영

@91d397aa9ea6bf72cf2484468e57daa060165317

7246499

91d397a

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css


 @charset "utf-8";
 @font-face {
-    font-family: 'Pretendard';
-    src: url('../font/PretendardVariable.woff2') format('woff');
-    font-weight: 400;
-    font-style: normal;
+	font-family: 'Pretendard';
+	font-weight: 900;
+	font-display: swap;
+	src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 800;
+	font-display: swap;
+	src: local('Pretendard ExtraBold'), url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 700;
+	font-display: swap;
+	src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'), url(./woff/Pretendard-Bold.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 600;
+	font-display: swap;
+	src: local('Pretendard SemiBold'), url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 500;
+	font-display: swap;
+	src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'), url(./woff/Pretendard-Medium.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 400;
+	font-display: swap;
+	src: local('Pretendard Regular'), url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 300;
+	font-display: swap;
+	src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'), url(./woff/Pretendard-Light.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 200;
+	font-display: swap;
+	src: local('Pretendard ExtraLight'), url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff) format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 100;
+	font-display: swap;
+	src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff');
 }
 
 @font-face {

7246499

91d397a

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


 
     .sub-text,
     .solution-sub-text {
-        font-size: 1.5rem !important;
+        font-size: 1rem !important;
     }
 
     .solution-box {

         justify-content: space-between;
     }
 
+    .slide-solution .text-area {
+        padding: 6rem 2rem;
+    }
 
+    .slide-solution .portfolio-text {
+        padding: 6rem 1rem;
+    }
 
     .box:hover {
         transform: scale(1);

         width: 100% !important;
         padding: 10px;
     }
-    .sub-text-area{
+
+    .sub-text-area {
         margin-bottom: 1rem !important;
     }
 

 
     .taken-area {
         width: 100%;
-        height: 60% !important;
+        height: 0% !important;
         align-items: start;
         gap: 5px !important;
     }

     .smart-title {
         height: 15%;
         padding-top: 5rem;
-        margin-bottom: 0rem !important;
+        margin-bottom: 1rem !important;
     }
 
     .taken-box {

         justify-content: start;
     }
 
-    .solution-area-two {
-        height: calc(100% - 490.05px) !important;
-    }
+
 
     .solution-area {
 

         transform: scale(1);
     }
 
-    .customized-wrap-title,
-    .etc-wrap-title {
+    .visual-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .taken-wrap-box {
+        height: 74%;
+    }
+
+    .customized-wrap-title {
         margin-top: 50px;
         margin-bottom: 1rem;
         height: 100%;

         gap: 10px !important;
         margin-bottom: 0px;
         display: grid !important;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr;
         flex-direction: column;
     }
 

     }
 
     .etc-wrap-title {
-        height: 100%;
+        /* height: 100%; */
         margin-bottom: 10px !important;
     }
 

         color: #333;
         font-size: 1.2rem !important;
     }
-
+    nav {
+        display: none;
+    }
     nav>ul {
         background-color: #fff;
         border-bottom: 1px solid #333;

         width: 29px;
     }
 
+    .solution-web-box{
+        display: grid !important;
+        grid-template-columns: 1fr 1fr;
+    }
     .swiper {
         width: 50%;
         height: 100%;

     .taken-area img,
     .traffic-area img,
     .ai-area img {
-        opacity: 0;
-    }
+height: 20px;    }
 
     .solution-title,
     .traffic-title,

 
     .solution-area-two {
         height: calc(100% - 490.05px) !important;
+
+        .solution-area {
+
+            gap: 40px !important;
+            height: calc(100% - 141.61px) !important;
+        }
+
+        .solution-text-box {
+            padding: 10px 15px !important;
+        }
+
+        .solution-text-box p {
+            padding-left: 5px;
+        }
+
+        .solution-text-box div {
+            gap: 0px !important;
+        }
+
+        .solution-text-box div div {
+            flex-direction: row;
+        }
+
+        .text-box-title::after {
+            left: -5px;
+            top: -1px;
+        }
+
+        .traffic-button {
+            display: none;
+        }
+
+        .traffic-area {
+            display: none;
+        }
+
+        .solution-web-box {
+            display: none;
+        }
+
+
+
+        .logo {
+            width: 50% !important;
+            height: 14px !important;
+            background-size: cover;
+        }
+
+        .mobil-wrap {
+            width: 50%;
+        }
+
+        .mobil-wrap button {
+            width: 100%;
+            text-align: right;
+        }
+
+        .box:hover,
+        .box-wrap div img:hover {
+            transform: scale(1);
+        }
+
+        .customized-wrap-title,
+        .etc-wrap-title {
+            margin-top: 50px;
+            margin-bottom: 1rem;
+            height: 100%;
+        }
+
+        .etc-wrap-title h1 {
+            padding-top: 0rem;
+        }
+
+        .box-wrap {
+            width: 100% !important;
+            height: 100%;
+            gap: 10px !important;
+            margin-bottom: 0px;
+
+            /* flex-direction: column; */
+        }
+
+        .box-wrap img {
+            width: 100%;
+            padding-bottom: 0rem !important;
+            object-fit: contain;
+            height: 77px !important;
+        }
+
+        .box-wrap div {
+            height: 100%;
+        }
+
+        .box-wrap div p {
+            padding: 1px;
+            margin-bottom: 0rem !important;
+            font-size: 1rem !important;
+        }
+
+        .box-wrap div div {
+            display: none;
+            height: 37% !important;
+        }
+
+        .etc-wrap-title h1,
+        .customized-wrap-title h1 {
+            font-size: 1.5rem !important;
+        }
+
+        .etc-wrap-title p,
+        .customized-wrap-title p {
+            font-size: 1.2rem !important;
+        }
+
+        .etc-wrap-title {
+            margin-bottom: 10px !important;
+        }
+
+        .customized-box {
+            width: 100%;
+            display: grid;
+            gap: 10px;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+
+        .customized-box div {
+            width: 100%;
+
+            margin-bottom: 10px;
+        }
+
+        .customized-box p {
+            font-size: 1.1rem !important;
+        }
+
+        .customized-box div img {
+            width: 100%;
+        }
+
+        .etc-box-title {
+            margin-bottom: 0px;
+        }
+
+        .etc-box-title p {
+            padding-left: 0px;
+        }
+
+        .etc-box p {
+            padding-left: 0px;
+        }
+
+        .solution-box {
+            width: 100%;
+            height: calc(100% - 182px) !important;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+            justify-content: end;
+            gap: 1px;
+        }
+
+        .box1,
+        .box2,
+        .box3,
+        .box4,
+        .box5,
+        .box6 {
+            width: 100%;
+            background-size: cover;
+            text-shadow: 1px 1px 1px #33333350;
+        }
+
+        .box2,
+        .box4 {
+            transform: translateY(0px);
+        }
+
+
     }
-
-    .solution-area {
-
-        gap: 40px !important;
-        height: calc(100% - 141.61px) !important;
-    }
-
-    .solution-text-box {
-        padding: 10px 15px !important;
-    }
-
-    .solution-text-box p {
-        padding-left: 5px;
-    }
-
-    .solution-text-box div {
-        gap: 0px !important;
-    }
-
-    .solution-text-box div div {
-        flex-direction: row;
-    }
-
-    .text-box-title::after {
-        left: -5px;
-        top: -1px;
-    }
-
-    .traffic-button {
-        display: none;
-    }
-
-    .traffic-area {
-        display: none;
-    }
-
-    .solution-web-box {
-        display: none;
-    }
-
-
-
-    .logo {
-        width: 50% !important;
-        height: 14px !important;
-        background-size: cover;
-    }
-
-    .mobil-wrap {
-        width: 50%;
-    }
-
-    .mobil-wrap button {
-        width: 100%;
-        text-align: right;
-    }
-
-    .box:hover,
-    .box-wrap div img:hover {
-        transform: scale(1);
-    }
-
-    .customized-wrap-title,
-    .etc-wrap-title {
-        margin-top: 50px;
-        margin-bottom: 1rem;
-        height: 100%;
-    }
-
-    .etc-wrap-title h1 {
-        padding-top: 0rem;
-    }
-
-    .box-wrap {
-        width: 100% !important;
-        height: 100%;
-        gap: 10px !important;
-        margin-bottom: 0px;
-
-        /* flex-direction: column; */
-    }
-
-    .box-wrap img {
-        width: 100%;
-        padding-bottom: 0rem !important;
-        object-fit: contain;
-        height: 77px !important;
-    }
-
-    .box-wrap div {
-        height: 100%;
-    }
-
-    .box-wrap div p {
-        padding: 1px;
-        margin-bottom: 0rem !important;
-        font-size: 1rem !important;
-    }
-
-    .box-wrap div div {
-        display: none;
-        height: 37% !important;
-    }
-
-    .etc-wrap-title h1,
-    .customized-wrap-title h1 {
-        font-size: 1.5rem !important;
-    }
-
-    .etc-wrap-title p,
-    .customized-wrap-title p {
-        font-size: 1.2rem !important;
-    }
-
-    .etc-wrap-title {
-        margin-bottom: 10px !important;
-    }
-
-    .customized-box {
-        width: 100%;
-        display: grid;
-        gap: 10px;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-
-    .customized-box div {
-        width: 100%;
-
-        margin-bottom: 10px;
-    }
-
-    .customized-box p {
-        font-size: 1.1rem !important;
-    }
-
-    .customized-box div img {
-        width: 100%;
-    }
-
-    .etc-box-title {
-        margin-bottom: 0px;
-    }
-
-    .etc-box-title p {
-        padding-left: 0px;
-    }
-
-    .etc-box p {
-        padding-left: 0px;
-    }
-
-    .solution-box {
-        width: 100%;
-        height: calc(100% - 182px) !important;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-        justify-content: end;
-        gap: 1px;
-    }
-
-    .box1,
-    .box2,
-    .box3,
-    .box4,
-    .box5,
-    .box6 {
-        width: 100%;
-        background-size: cover;
-        text-shadow: 1px 1px 1px #33333350;
-    }
-
-    .box2,
-    .box4 {
-        transform: translateY(0px);
-    }
-
-
 }

7246499

91d397a

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


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

     background-size: cover;
     padding: 214px 10px 10px 10px;
     color: #fff;
-
     text-align: left;
 }
 

     cursor: pointer;
 }
 
-.box:hover,
-.box-wrap div img:hover {
-    transform: scale(1.1);
-    transition: all 0.5s ease;
-}
+
 
 @keyframes fadeIn {
     from {

 
 .solution-text-box p {
     font-weight: 500;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     padding-left: 20px;
     line-height: 2;
 }

 .timeline {
     width: 100%;
     height: 100%;
-    height: calc(100% - 300px);
+    height: calc(100% - 123px);
 }
 
 .contents {

 .customized-wrap-title,
 .etc-wrap-title {
     width: 100%;
-    height: 60px;
+    /* height: 60px; */
 }
 
 .customized-wrap-title h1 {

 }
 
 .etc-wrap-title h1 {
-    font-size: 5rem;
+    font-size: 4rem;
 }
 
 .etc-box {

 
 #contentDaeguBranch {
     width: 100%;
-    height: 500px;
+    height: 350px;
 }
 
 .wrap_controllers {

 .traffic-video {
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
-    left: 25%;
-
+    transform: translate(-50% ,-50%);
+    left: 50%;
     z-index: 111;
-    width: 1000px;
+    width: 500px;
     /* height: 600px; */
     padding: 3rem;
     background-color: #FFFFFF;

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

7246499

resources/font/Pretendard-Black.woff (Binary) (deleted)

--- resources/font/Pretendard-Black.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Black.woff2 (Binary) (added)

+++ resources/font/Pretendard-Black.woff2

Binary file is not shown

7246499

resources/font/Pretendard-Bold.woff (Binary) (deleted)

--- resources/font/Pretendard-Bold.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Bold.woff2 (Binary) (added)

+++ resources/font/Pretendard-Bold.woff2

Binary file is not shown

7246499

resources/font/Pretendard-ExtraBold.woff (Binary) (deleted)

--- resources/font/Pretendard-ExtraBold.woff

Binary file is not shown

91d397a

resources/font/Pretendard-ExtraBold.woff2 (Binary) (added)

+++ resources/font/Pretendard-ExtraBold.woff2

Binary file is not shown

7246499

resources/font/Pretendard-ExtraLight.woff (Binary) (deleted)

--- resources/font/Pretendard-ExtraLight.woff

Binary file is not shown

91d397a

resources/font/Pretendard-ExtraLight.woff2 (Binary) (added)

+++ resources/font/Pretendard-ExtraLight.woff2

Binary file is not shown

7246499

resources/font/Pretendard-Light.woff (Binary) (deleted)

--- resources/font/Pretendard-Light.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Light.woff2 (Binary) (added)

+++ resources/font/Pretendard-Light.woff2

Binary file is not shown

7246499

resources/font/Pretendard-Medium.woff (Binary) (deleted)

--- resources/font/Pretendard-Medium.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Medium.woff2 (Binary) (added)

+++ resources/font/Pretendard-Medium.woff2

Binary file is not shown

7246499

resources/font/Pretendard-Regular.woff (Binary) (deleted)

--- resources/font/Pretendard-Regular.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Regular.woff2 (Binary) (added)

+++ resources/font/Pretendard-Regular.woff2

Binary file is not shown

7246499

resources/font/Pretendard-SemiBold.woff (Binary) (deleted)

--- resources/font/Pretendard-SemiBold.woff

Binary file is not shown

91d397a

resources/font/Pretendard-SemiBold.woff2 (Binary) (added)

+++ resources/font/Pretendard-SemiBold.woff2

Binary file is not shown

7246499

resources/font/Pretendard-Thin.woff (Binary) (deleted)

--- resources/font/Pretendard-Thin.woff

Binary file is not shown

91d397a

resources/font/Pretendard-Thin.woff2 (Binary) (added)

+++ resources/font/Pretendard-Thin.woff2

Binary file is not shown

7246499

resources/font/PretendardVariable.woff2 (Binary) (deleted)

--- resources/font/PretendardVariable.woff2

Binary file is not shown

7246499

91d397a

views/main.html

--- views/main.html

+++ views/main.html


                 </div>
             </div>
             <div class="swiper-slide gradient-back">
-                <div class="slide-wrap  slide-solution flex align-center">
-                    <div class=" text-area " style="height: 70%;">
-                        <div style="width: 100%;" class="sub-text-area mb50">
+                <div class="slide-wrap  slide-solution ">
+                    <div class=" text-area pb60 slide-section flex align-center" style="align-content: center;">
+                        <div class="sub-text-area mb20" style="width: 100%;">
                             <p class=" solution-text pb30">테이큰 소프트는</p>
                             <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
                                 스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
                             </p>
                         </div>
-                        <div id="container" class="flex solution-box"
-                            style="height: calc(100% - 126px); flex-wrap: nowrap;">
+                        <div id="container" class="flex solution-box" style="flex-wrap: nowrap;">
                             <div class="box box1" style="display: none;">
                                 <p class="mb15">데이터관리분야</p>
                                 <p>데이터 관리 솔루션 Taken BI Manager</p>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap pt60 slide-solution">
-                    <div class="  flex align-center">
-                        <div style="width: 1200px; margin: 0 auto;" class="text-area">
-                            <p class="portfolio-text pb60">PORTFOLIO</p>
+                <div class="slide-wrap pt90 pb90 slide-solution">
+                    <div class="  flex align-center" style="align-content: center; width: 100%;">
+                        <div style="width: 1200px; margin: 0 auto;">
+                            <p class="portfolio-text mb10 ">PORTFOLIO</p>
                         </div>
-                        <div class="swiper innerSwiper" style="height: calc(100% - 113px);">
+                        <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>
             <div class="swiper-slide">
-                <div class="slide-wrap pt60 slide-solution gradient-bottom flex align-center justify-center">
-                    <div class=" text-area " style="height: 100%;">
+                <div class="slide-wrap pt60 pb60 slide-solution gradient-bottom ">
+                    <div class=" text-area pb60 flex align-center justify-center" style="height: 100%; align-content: center;">
                         <div style="width: 100%;" class="sub-text-area">
-                            <p class="map-text pb20">오시는길</p>
+                            <p class="map-text ">오시는길</p>
                         </div>
                         <div style="width: 100%;" class="flex justify-end map-btn pd10">
                             <button id="btnHeadquarter">본사</button>
                             <button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
                         </div>
-                        <div id="contentHeadquarter">
-                            <div>
+                        <div>
 
-                                <div id="daumRoughmapContainer1711609730266"
-                                    class="root_daum_roughmap root_daum_roughmap_landing map"></div>
-
-                                <script charset="UTF-8" class="daum_roughmap_loader_script"
-                                    src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
-
-                                <!-- 3. 실행 스크립트 -->
-                                <script charset="UTF-8">
-                                    new daum.roughmap.Lander({
-                                        "timestamp": "1711609730266",
-                                        "key": "2ipvd",
-                                        "mapWidth": "1200",
-                                        "mapHeight": "500"
-                                    }).render();
-                                </script>
+                            <div id="contentHeadquarter" style="height: 350px;">
+                                <div id="map1" style="width:1200px;height:100%;"></div>
+                                <div class="address-box flex">
+                                    <p class="address-tile">본사</p>
+                                    <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)
+                                    </p>
+                                </div>
                             </div>
-                            <div class="address-box flex">
-                                <p class="address-tile">본사</p>
-                                <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)</p>
-                            </div>
-                        </div>
-                        <div id="contentDaeguBranch" style="display: none;">
-                            <div class="secen-map"
-                                style="font:normal normal 400 12px/normal dotum, sans-serif; width:1200px; height:500px; color:#333; position:relative">
-                                <div style="height: 500px;"><a
-                                        href="https://map.kakao.com/?urlX=880044.0&amp;urlY=652697.0&amp;name=%EB%8C%80%EA%B5%AC%20%EC%88%98%EC%84%B1%EA%B5%AC%20%EC%95%8C%ED%8C%8C%EC%8B%9C%ED%8B%B01%EB%A1%9C%20160&amp;map_type=TYPE_MAP&amp;from=roughmap"
-                                        target="_blank"><img class="map"
-                                            src="http://t1.daumcdn.net/roughmap/imgmap/f280f94b124c89a6eb7ca7ad6c3e2e14c09453140c469b857a76899c9b1ac096"
-                                            width="1198px" height="498px" style="border:1px solid #ccc;"></a></div>
-
-                            </div>
-                            <div class="address-box flex">
-                                <p class="address-tile">대구지사</p>
-                                <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
+                            <div id="contentDaeguBranch" style="display: none;">
+                                <div id="map2" style="width:1200px;height:350px;"></div>
+                                <div class="address-box flex">
+                                    <p class="address-tile">대구지사</p>
+                                    <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
+                                </div>
                             </div>
                         </div>
                     </div>

 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2ccd5508acc8b99103687aab41907f94"></script>
 
 <script>
+    // 본사지도 
+    var mapContainer = document.getElementById('map1'), // 지도를 표시할 div 
+        mapOption = {
+            center: new kakao.maps.LatLng(35.8260208900541, 128.75636298231913),
+            level: 3 // 지도의 확대 레벨
+        };
+    var map1 = new kakao.maps.Map(mapContainer, mapOption);
+
+    // 마커가 표시될 위치입니다 
+    var markerPosition1 = new kakao.maps.LatLng(35.8260208900541, 128.75636298231913);
+
+    // 마커를 생성합니다
+    var marker = new kakao.maps.Marker({
+        position: markerPosition1
+    });
+
+    // 마커가 지도 위에 표시되도록 설정합니다
+    marker.setMap(map1);
+
+    //   지사 지도
+    var mapContainer2 = document.getElementById('map2'),
+        mapOption2 = {
+            center: new kakao.maps.LatLng(35.835332450870354,128.68246038604707),
+            level: 4,
+        };
+    var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
+    // 마커가 표시될 위치입니다 
+    var markerPosition2 = new kakao.maps.LatLng(35.835332450870354, 128.68246038604707);
+
+    // 마커를 생성합니다
+    var marker = new kakao.maps.Marker({
+        position: markerPosition2
+    });
+
+    // 마커가 지도 위에 표시되도록 설정합니다
+    marker.setMap(map2);
+    function resizeMap() {
+        var mapContainer2 = document.getElementById('map2');
+        mapContainer2.style.width = '1200px';
+        mapContainer2.style.height = '350px';
+    }
+
+    function relayout() {
+        map2.relayout();
+    }
 
     $(document).ready(function () {
         $("#btnHeadquarter").click(function () {
             $("#btnHeadquarter").addClass('on');
             $("#btnDaeguBranch").removeClass('on');
             $("#contentDaeguBranch").hide();
-
             $("#contentHeadquarter").show();
+            map2.relayout();
         });
 
         $("#btnDaeguBranch").click(function () {

             $("#contentHeadquarter").hide();
 
             $("#contentDaeguBranch").show();
+            map2.relayout();
+            map2.setCenter(new kakao.maps.LatLng(35.835332450870354, 128.68246038604707))
 
         });
     });

                 if (firstTextBox) firstTextBox.classList.add('active');
             },
 
-        },    breakpoints: {
-                250: {
-                    slidesPerView: 1,
-                    spaceBetween: 20
-                },
-                // 화면의 넓이가 320px 이상일 때
-            
-                // 화면의 넓이가 640px 이상일 때
-                640: {
-                    slidesPerView: 2,
-                    spaceBetween: 40
-                },
-                800: {
-                    slidesPerView: 3,
-                    spaceBetween: 40
-                }
+        }, breakpoints: {
+            250: {
+                slidesPerView: 1,
+                spaceBetween: 20
             },
+            // 화면의 넓이가 320px 이상일 때
+
+            // 화면의 넓이가 640px 이상일 때
+            640: {
+                slidesPerView: 2,
+                spaceBetween: 40
+            },
+            800: {
+                slidesPerView: 3,
+                spaceBetween: 40
+            }
+        },
     });
 
 

 
 
 <style scoped>
-    .footer-text p{
+    .footer-text p {
         font-size: 1.3rem;
     }
-    .copyright{
+
+    .copyright {
         font-size: 1.3rem;
     }
+
     #header {
         position: fixed;
         top: 0;

         -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;
     }

     }
 
     .slide-solution {
-        padding: 100px 0 80px;
         font-family: 'Pretendard';
 
     }

7246499

91d397a

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


         <div class="swiper-wrapper">
             <div class="swiper-slide about-wrapper">
                 <div class="about-wrap slide-wrap ">
-                    <div class="text-area flex">
+                    <div class="flex">
                         <div class="about-title mb90" style="width: 100%;">
                             <p class="mb20">ABOUT US</p>
                             <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap ">
+                <div class="taken-wrap  slide-solution ">
                     <div class="text-area flex">
                         <div class="about-title mb20" style="width: 100%;">
                             <p class="mb20">Business</p>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap history-wrap">
+                <div class="taken-wrap slide-wrap history-wrap   slide-solution ">
                     <div class="text-area  felx">
-                        <div class="about-title mt90 mb40" style="width: 100%; height: 60px;">
+                        <div class="about-title mb20">
                             <p>History</p>
                         </div>
                         <div class="timeline flex align-center justify-between" style="gap: 0px;">

                                 <div class="year active-year" data-year="2021">2021</div>
                                 <div class="year" data-year="2022">2022</div>
                                 <div class="year" data-year="2023">2023</div>
-                                <!-- 더 많은 년도 추가 -->
                             </div>
                             <div class="contents" id="contents">
                                 <div class="content" data-year="2021">

             releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
         },
         on: {
+
             slideChange: function () {
                 var currentIndex = this.realIndex;
                 if (currentIndex === 0) {

                 }
                 var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
                 if (this.activeIndex === lastIndex) {
-                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
+                    $("#footer").show(); // 마지막 슬라이드에 도달하면 푸터를 보여줌
                 } else {
-                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
+                    $("#footer").hide(); // 그렇지 않으면 푸터를 숨김
                 }
             },
-            reachEnd: function () {
-                // 마지막 슬라이드에 도달하면 마우스 휠 비활성화
-                swiper.mousewheel.disable();
-            },
         }
     });
-
-    // 마우스 휠 동작에 따라 스와이퍼의 마우스 휠 활성화/비활성화
-    window.addEventListener('wheel', function (event) {
-        // 스크롤을 올릴 때
-        if (event.deltaY < 0) {
-            // 스와이퍼가 첫 번째 슬라이드에 있지 않으면 마우스 휠 활성화
-            if (swiper.realIndex !== 0) {
-                swiper.mousewheel.enable();
-            }
-        }
-        // 스크롤을 내릴 때
-        else if (event.deltaY > 0) {
-            // 마지막 슬라이드에 도달했으면 마우스 휠 비활성화
-            if (swiper.realIndex === swiper.slides.length - 1) {
-                swiper.mousewheel.disable();
-            } else {
-                // 그렇지 않으면 활성화
-                swiper.mousewheel.enable();
-            }
-        }
-    });
-
     // 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
     targetArea.addEventListener('mouseenter', function () {
         swiper.mousewheel.disable();
+        console.log('들어옴');
     });
 
     // 마우스가 지정된 영역을 벗어날 때 마우스 휠 활성화
     targetArea.addEventListener('mouseleave', function () {
         swiper.mousewheel.enable();
+        console.log('벗어남');
+        
     });
-
     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
         $("#footer").show();
+
     });
+
 
 </script>
 

 
     .container {
         width: 1200px;
+        height: 50px;
         display: flex;
         flex-wrap: nowrap;
         border-radius: 20px;

7246499

91d397a

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html


 
 <body>
     <div id="header"></div>
-    <div class="taken-wrap " style=" height: 100%;">
+    <div class=" text-area  slide-section flex align-center">
 
-        <div class="text-area flex align-center">
 
             <div class="flex justify-between" style="gap: 10px; width: 100%;">
-                <div class="etc-wrap-title mb60" style="height: 150px;">
-                    <h1 class="mb20 pt70">데이터분석을 통한 인사이트 도출</h1>
+                <div class="etc-wrap-title ">
+                    <h1 class=" ">데이터분석을 통한 인사이트 도출</h1>
                     <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
                 </div>
-                <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
+                <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
                     <div class="">
                         <img src="../../resources/img/common/data-img1.png" alt="">
                         <p>구미시 주요 이슈 및 민원 분석</p>

 
             </div>
 
-        </div>
     </div>
     <div id="footer"></div>
 

7246499

91d397a

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html


 
 <body>
     <div id="header"></div>
-    <div class="taken-wrap " style=" height: 100%;">
+    <div class=" text-area  slide-section flex align-center">
 
-        <div class="text-area flex align-center">
 
-            <div class="flex justify-between" style="gap: 10px; width: 100%;">
-                <div class="etc-wrap-title mb60">
-                    <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
-                    <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
+        <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
+            <div class="etc-wrap-title mb20">
+                <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
+                <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
+            </div>
+            <div class="flex justify-between align-end etc-wrap-text">
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
+                    <p>도로 위험 감지 시스템</p>
                 </div>
-                <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
-                        <p>도로 위험 감지 시스템</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
-                        <p>안개 감지 플랫폼</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
-                        <p>이동경로 최적화 서비스</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
-                        <p>횡단보도 및 내비게이션 연계 플랫폼</p>
-                    </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
+                    <p>안개 감지 플랫폼</p>
                 </div>
-                <div class="flex justify-between  align-end box-wrap" style="width: 100%; gap: 20px;">
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
-                        <p>전력데이터 관리 시스템</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
-                        <p>금형 부품 데이터 관리 플랫폼</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
-                        <p>제조 데이터 관리 시스템</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
-                        <p>메타데이터 관리 시스템</p>
-                    </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
+                    <p>이동경로 최적화 서비스</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
+                    <p>횡단보도 및 내비게이션 연계 플랫폼</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
+                    <p>전력데이터 관리 시스템</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
+                    <p>금형 부품 데이터 관리 플랫폼</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
+                    <p>제조 데이터 관리 시스템</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
+                    <p>메타데이터 관리 시스템</p>
                 </div>
             </div>
-
         </div>
+
     </div>
     <div id="footer"></div>
 

         padding: 0;
     }
 
-    .box-wrap div:hover {
-        
-    }
+  
 
     .box-wrap div img {
+        border: 1px solid ;
         padding-bottom: 2rem;
     }
 

7246499

91d397a

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html

...	...	@@ -22,48 +22,45 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area slide-section flex align-center">
26	26
27		- <div class="text-area flex align-center">
28	27
29		- <div class="flex justify-between" style="gap: 10px; width: 100%;">
30		- <div class="etc-wrap-title mb80">
31		- <h1 class="mb20">스마트시티 솔루션 공급</h1>
32		- <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
33		- 제공합니다.</p>
	28	+ <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
	29	+ <div class="etc-wrap-title mb20">
	30	+ <h1 class="mb20">스마트시티 솔루션 공급</h1>
	31	+ <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
	32	+ 제공합니다.</p>
	33	+ </div>
	34	+ <div class="flex justify-between" style="flex-wrap: nowrap;">
	35	+ <div class="pd10">
	36	+ <img src="../../resources/img/common/smart-img1.png" alt="">
	37	+ <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
	38	+ <div>
	39	+ <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
	40	+ <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
	41	+ </div>
34	42	</div>
35		- <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px;">
36		- <div class="">
37		- <img src="../../resources/img/common/smart-img1.png" alt="">
38		- <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
39		- <div>
40		- <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
41		- <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
42		- </div>
	43	+ <div class="pd10">
	44	+ <img src="../../resources/img/common/smart-img2.png" alt="">
	45	+ <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
	46	+ <div>
	47	+ <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
	48	+ <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
43	49	</div>
44		- <div class="">
45		- <img src="../../resources/img/common/smart-img2.png" alt="">
46		- <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
47		- <div>
48		- <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
49		- <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
50		- </div>
	50	+ </div>
	51	+ <div class="pd10">
	52	+ <img src="../../resources/img/common/smart-img3.png" alt="">
	53	+ <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
	54	+ <div>
	55	+ <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
	56	+ <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
51	57	</div>
52		- <div class="">
53		- <img src="../../resources/img/common/smart-img3.png" alt="">
54		- <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
55		- <div>
56		- <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
57		- <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
58		- </div>
59		- </div>
60		-
61	58	</div>
62	59
63	60	</div>
	61	+
64	62	</div>
65	63
66		- </div>
67	64	</div>
68	65	<div id="footer"></div>
69	66
...	...	@@ -153,7 +150,7 @@
153	150	}
154	151
155	152	body {
156		- background: linear-gradient( #d7e2ff9d,#fff, #fff);
	153	+ background: linear-gradient(#d7e2ff9d, #fff, #fff);
157	154	font-family: 'Pretendard';
158	155	font-size: 14px;
159	156	color: #000;

7246499

91d397a

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


     <div class="swiper mySwiper">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap ">
+                <div class=" text-area pb60 slide-section flex align-center">
                     <div class="text-area flex">
-                        <div class="solution-title mb90">
+                        <div class="solution-title">
                             <p>Taken BI Manager v1.0</p>
                         </div>
-                        <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px; height: 100%;">
-                            <div class="taken-area taken-conteiner flex align-end solution-web-box" style="gap: 20px; height: 100%;">
+                        <div class="flex justify-between align-end taken-wrap-box "
+                            style="flex-wrap: nowrap; gap: 20px;">
+                            <div class="taken-area taken-conteiner flex align-end solution-web-box"
+                                style="gap: 20px; height: 100%;">
                                 <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
                                     <p>데이터 수집,저장,관리</p>
                                     <p>솔루션 제공 기반 맞춤형 서비스</p>
                                 </div>
                             </div>
-                            <div class="taken-area taken-conteiner taken-area-text flex " style="gap: 20px;  height: 100%;">
+                            <div class="taken-area taken-conteiner taken-area-text flex "
+                                style="gap: 20px;  height: 100%;">
                                 <div class="text-after">
                                     <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
                                     <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap ">
+                <div class=" text-area pb60 slide-section flex align-center">
                     <div class="text-area flex">
-                        <div class="traffic-title mb50">
+                        <div class="traffic-title">
                             <p>Traffic Agent</p>
                         </div>
-                        <div class="flex justify-end traffic-button">
-                            <button class="traffic-btn">영상보기</button>
-                        </div>
+
 
                         <div class=" video-wrap">
                             <div class="traffic-video">

                                     <p>Traffic Agent</p>
                                     <p class="close-btn">x</p>
                                 </div>
-                                <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
+                                <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted
+                                    controls></video>
                             </div>
                         </div>
                         <div class="flex justify-between align-end taken-wrap-box"
-                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            style="flex-wrap: nowrap; gap: 20px; ">
 
-                            <div class="taken-area taken-conteiner flex-column justify-between solution-after"
-                                style="gap: 20px; height: 100%;">
+                            <div class="taken-area taken-conteiner flex align-end  solution-after"
+                                style="height: 100%;">
                                 <div class="text-after ">
                                     <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
 
                                 </div>
-                                <div class="flex solution-area" style="gap: 20px; height: calc(100% - 65px);">
+                                <div class="flex solution-area" style="gap: 20px; ">
 
                                     <div class="solution-text-box " style="padding: 15px 33px; ">
                                         <h3 class="text-box-title mb10">주요기능</h3>

                                     </div>
                                 </div>
                             </div>
-                            <div class="traffic-area flex align-end justify-end solution-web-box" style="height: 100%; width: 100%;">
+                            <div class="traffic-area flex align-end justify-end solution-web-box"
+                                style="height: 100%; width: 100%;">
+                                <div class="flex justify-end traffic-button">
+                                    <button class="traffic-btn">영상보기</button>
+                                </div>
 
-                                <img src="../../resources/img/common/traffic-img.png" alt="" class="mb30"
+                                <img src="../../resources/img/common/traffic-img.png" alt="" 
                                     style="height: 356px;">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                     <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap ">
+                <div class=" text-area pb60 slide-section flex align-center">
                     <div class="text-area flex">
-                        <div class="ai-title mb50">
+                        <div class="ai-title">
                             <p>AI 안전통합 횡단보도 관리 솔루션</p>
                         </div>
-                        <div class="flex justify-end traffic-button">
-                            <button class="traffic-btn">영상보기</button>
-                        </div>
+
 
                         <div class=" video-wrap">
                             <div class="traffic-video">

                                 <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
                             </div>
                         </div>
-                        <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                        <div class="flex justify-between align-end taken-wrap-box"
+                            style="flex-wrap: nowrap; gap: 20px; ">
                             <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
 
-                                <img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
+                                <img src="../../resources/img/common/ai-img.png" alt="">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                     <p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
                                     <p>GIS 기반 통합 관제<br> 시스템 구축</p>
                                 </div>
                             </div>
                             <div class="taken-area taken-conteiner flex  align-end" style="gap: 20px;">
-
-                                <div class="text-after solution-area-two" style="height: calc(100% - 348px);">
+                                <div class="flex justify-end traffic-button">
+                                    <button class="traffic-btn">영상보기</button>
+                                </div>
+                                <div class="text-after solution-area-two">
                                     <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
                                 </div>
                                 <div class="solution-text-box ">

                                 </div>
                                 <div class="solution-text-box">
                                     <h3 class="text-box-title mb10">특장점</h3>
-                                    <div class="flex " style="gap: 30px;">
+                                    <div class="flex" style="gap: 30px; flex-wrap: nowrap;">
                                         <div class="flex-column">
                                             <p>- 횡단보도 관제 분석 시스템 구축</p>
                                             <p>- 현장모니터링 화면 구성</p>

                 </div>
             </div>
             <div class="swiper-slide meta-wrap">
-                <div class="taken-wrap slide-wrap ">
+                <div class=" text-area pb60 slide-section flex align-center">
                     <div class="text-area flex">
-                        <div class="meta-title mb50">
+                        <div class="meta-title">
                             <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
                         </div>
-                        <div class="flex justify-end traffic-button">
-                            <button class="traffic-btn">영상보기</button>
-                        </div>
+
 
                         <div class=" video-wrap">
                             <div class="traffic-video">

                             </div>
                         </div>
                         <div class="flex justify-between align-end taken-wrap-box"
-                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            style="flex-wrap: nowrap; gap: 20px;">
 
-                            <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
+                            <div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
                                 <div class="text-after ">
                                     <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
 

                                 </div>
                             </div>
                             <div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
-
-                                <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
+                                <div class="flex justify-end traffic-button">
+                                    <button class="traffic-btn">영상보기</button>
+                                </div>
+                                <img src="../../resources/img/common/meta-img.png" alt="" class="mb30" style="height: 250px;">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                     <p>가상과 현실공간을<br>연결하는 플랫폼</p>
                                     <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap slide-wrap ">
+                <div class=" text-area pb60 slide-section flex align-center">
                     <div class="text-area flex">
-                        <div class="smart-title mb90">
+                        <div class="smart-title ">
                             <p>스마트제조 데이터 모니터링 서비스</p>
                         </div>
                         <div class="flex justify-between align-end taken-wrap-box"
-                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            style="flex-wrap: nowrap; gap: 20px;">
                             <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 id="footer"></div>
 
 
-   
+
 
 
 

 
     });
 
-    $('.traffic-btn').click(function(){
+    $('.traffic-btn').click(function () {
         $('.video-wrap').show();
-        
+
 
     });
-    $('.close-btn').click(function(){
+    $('.close-btn').click(function () {
         $('.video-wrap').hide();
-        
+
 
     });
 

 
 
 <style scoped>
-    .swiper-slide.on{
+    .swiper-slide.on {
         width: 100%;
         height: 100%;
         background-color: #000;
     }
+
     /* 스크롤바 없애기 */
     body {
         -ms-overflow-style: none;

7246499

91d397a

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html


 
 <body>
     <div id="header"></div>
-    <div class="taken-wrap " style=" height: 100%;">
+    <div class=" text-area  slide-section flex align-center">
 
-        <div class="text-area flex align-center">
 
-            <div class="flex justify-between" style="gap: 10px; width: 100%;">
-                <div class="etc-wrap-title mb70 mt">
-                    <h1 class="mb20">시각화 서비스 시스템 구축</h1>
-                    <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
+        <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
+            <div class="etc-wrap-title ">
+                <h1 class="mb20">시각화 서비스 시스템 구축</h1>
+                <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
+            </div>
+            <div class="etc-wrap-text flex justify-between">
+
+                <div class="">
+                    <img src="../../resources/img/common/visual-img1.png" alt="">
+                    <p>영천시 지역별 인구 추이 분석</p>
                 </div>
-                <div class="flex justify-between align-end box-wrap mb20" style="width: 100%; gap: 20px;">
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img1.png" alt="">
-                        <p>영천시 지역별 인구 추이 분석</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img2.png" alt="">
-                        <p>포항시 지역별 인구 추이 분석</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img3.png" alt="">
-                        <p>스마트 제조 공정관리 모니터링 플랫폼</p>
-                    </div>
-
+                <div class="">
+                    <img src="../../resources/img/common/visual-img2.png" alt="">
+                    <p>포항시 지역별 인구 추이 분석</p>
                 </div>
-                <div class="flex justify-between  align-end box-wrap" style="width: 100%; gap: 20px;">
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img4.png" alt="">
-                        <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img5.png" alt="">
-                        <p>시니어 스마트 케어 모니터링 플랫폼</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img6.png" alt="">
-                        <p>공정 및 외부 환경 관제 시각화</p>
-                    </div>
-                    <div class="">
-                        <img src="../../resources/img/common/visual-img7.png" alt="">
-                        <p>상주시 부서별 재정 분석</p>
-                    </div>
+                <div class="">
+                    <img src="../../resources/img/common/visual-img3.png" alt="">
+                    <p>스마트 제조 공정관리 모니터링 플랫폼</p>
+                </div>
+
+                <div class="">
+                    <img src="../../resources/img/common/visual-img4.png" alt="">
+                    <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/visual-img5.png" alt="">
+                    <p>시니어 스마트 케어 모니터링 플랫폼</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/visual-img6.png" alt="">
+                    <p>공정 및 외부 환경 관제 시각화</p>
+                </div>
+                <div class="">
+                    <img src="../../resources/img/common/visual-img7.png" alt="">
+                    <p>상주시 부서별 재정 분석</p>
                 </div>
             </div>
-
         </div>
+    </div>
+
     </div>
     <div id="footer"></div>
 

     }
 
     body {
-        background: linear-gradient( #d7e2ff9d,#fff, #fff);
+        background: linear-gradient(#d7e2ff9d, #fff, #fff);
         font-family: 'Pretendard';
         font-size: 14px;
         color: #000;

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,6 +4,7 @@
4	4	width: 1200px;
5	5	height: 100%;
6	6	margin: auto;
	7	+ align-content: center;
7	8	padding-top: 6rem;
8	9	text-align: center;
9	10	}
...	...	@@ -139,7 +140,6 @@
139	140	background-size: cover;
140	141	padding: 214px 10px 10px 10px;
141	142	color: #fff;
142		-
143	143	text-align: left;
144	144	}
145	145
...	...	@@ -183,11 +183,7 @@
183	183	cursor: pointer;
184	184	}
185	185
186		-.box:hover,
187		-.box-wrap div img:hover {
188		- transform: scale(1.1);
189		- transition: all 0.5s ease;
190		-}
	186	+
191	187
192	188	@keyframes fadeIn {
193	189	from {
...	...	@@ -787,7 +783,7 @@
787	783
788	784	.solution-text-box p {
789	785	font-weight: 500;
790		- font-size: 1.4rem;
	786	+ font-size: 1.2rem;
791	787	padding-left: 20px;
792	788	line-height: 2;
793	789	}
...	...	@@ -1227,7 +1223,7 @@
1227	1223	.timeline {
1228	1224	width: 100%;
1229	1225	height: 100%;
1230		- height: calc(100% - 300px);
	1226	+ height: calc(100% - 123px);
1231	1227	}
1232	1228
1233	1229	.contents {
...	...	@@ -1291,7 +1287,7 @@
1291	1287	.customized-wrap-title,
1292	1288	.etc-wrap-title {
1293	1289	width: 100%;
1294		- height: 60px;
	1290	+ /* height: 60px; */
1295	1291	}
1296	1292
1297	1293	.customized-wrap-title h1 {
...	...	@@ -1310,7 +1306,7 @@
1310	1306	}
1311	1307
1312	1308	.etc-wrap-title h1 {
1313		- font-size: 5rem;
	1309	+ font-size: 4rem;
1314	1310	}
1315	1311
1316	1312	.etc-box {
...	...	@@ -1335,7 +1331,7 @@
1335	1331
1336	1332	#contentDaeguBranch {
1337	1333	width: 100%;
1338		- height: 500px;
	1334	+ height: 350px;
1339	1335	}
1340	1336
1341	1337	.wrap_controllers {
...	...	@@ -1355,11 +1351,10 @@
1355	1351	.traffic-video {
1356	1352	position: absolute;
1357	1353	top: 50%;
1358		- transform: translateY(-50%);
1359		- left: 25%;
1360		-
	1354	+ transform: translate(-50% ,-50%);
	1355	+ left: 50%;
1361	1356	z-index: 111;
1362		- width: 1000px;
	1357	+ width: 500px;
1363	1358	/* height: 600px; */
1364	1359	padding: 3rem;
1365	1360	background-color: #FFFFFF;
...	...	@@ -1385,5 +1380,10 @@
1385	1380	}
1386	1381
1387	1382	.etc-wrap-title p {
1388		- font-size: 2rem;
	1383	+ font-size: 1.5rem;
	1384	+}
	1385	+.etc-wrap-text p{
	1386	+ font-size: 1.2rem ;
	1387	+ font-weight: 600;
	1388	+ padding: 10px 0;
1389	1389	} (No newline at end of file)

...	...	@@ -1,9 +1,65 @@
1	1	@charset "utf-8";
2	2	@font-face {
3		- font-family: 'Pretendard';
4		- src: url('../font/PretendardVariable.woff2') format('woff');
5		- font-weight: 400;
6		- font-style: normal;
	3	+ font-family: 'Pretendard';
	4	+ font-weight: 900;
	5	+ font-display: swap;
	6	+ src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff');
	7	+}
	8	+
	9	+@font-face {
	10	+ font-family: 'Pretendard';
	11	+ font-weight: 800;
	12	+ font-display: swap;
	13	+ src: local('Pretendard ExtraBold'), url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff) format('woff');
	14	+}
	15	+
	16	+@font-face {
	17	+ font-family: 'Pretendard';
	18	+ font-weight: 700;
	19	+ font-display: swap;
	20	+ src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'), url(./woff/Pretendard-Bold.woff) format('woff');
	21	+}
	22	+
	23	+@font-face {
	24	+ font-family: 'Pretendard';
	25	+ font-weight: 600;
	26	+ font-display: swap;
	27	+ src: local('Pretendard SemiBold'), url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff) format('woff');
	28	+}
	29	+
	30	+@font-face {
	31	+ font-family: 'Pretendard';
	32	+ font-weight: 500;
	33	+ font-display: swap;
	34	+ src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'), url(./woff/Pretendard-Medium.woff) format('woff');
	35	+}
	36	+
	37	+@font-face {
	38	+ font-family: 'Pretendard';
	39	+ font-weight: 400;
	40	+ font-display: swap;
	41	+ src: local('Pretendard Regular'), url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff) format('woff');
	42	+}
	43	+
	44	+@font-face {
	45	+ font-family: 'Pretendard';
	46	+ font-weight: 300;
	47	+ font-display: swap;
	48	+ src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'), url(./woff/Pretendard-Light.woff) format('woff');
	49	+}
	50	+
	51	+@font-face {
	52	+ font-family: 'Pretendard';
	53	+ font-weight: 200;
	54	+ font-display: swap;
	55	+ src: local('Pretendard ExtraLight'), url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff) format('woff');
	56	+}
	57	+
	58	+@font-face {
	59	+ font-family: 'Pretendard';
	60	+ font-weight: 100;
	61	+ font-display: swap;
	62	+ src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff');
7	63	}
8	64
9	65	@font-face {

...	...	@@ -43,7 +43,7 @@
43	43
44	44	.sub-text,
45	45	.solution-sub-text {
46		- font-size: 1.5rem !important;
	46	+ font-size: 1rem !important;
47	47	}
48	48
49	49	.solution-box {
...	...	@@ -55,7 +55,13 @@
55	55	justify-content: space-between;
56	56	}
57	57
	58	+ .slide-solution .text-area {
	59	+ padding: 6rem 2rem;
	60	+ }
58	61
	62	+ .slide-solution .portfolio-text {
	63	+ padding: 6rem 1rem;
	64	+ }
59	65
60	66	.box:hover {
61	67	transform: scale(1);
...	...	@@ -152,7 +158,8 @@
152	158	width: 100% !important;
153	159	padding: 10px;
154	160	}
155		- .sub-text-area{
	161	+
	162	+ .sub-text-area {
156	163	margin-bottom: 1rem !important;
157	164	}
158	165
...	...	@@ -397,7 +404,7 @@
397	404
398	405	.taken-area {
399	406	width: 100%;
400		- height: 60% !important;
	407	+ height: 0% !important;
401	408	align-items: start;
402	409	gap: 5px !important;
403	410	}
...	...	@@ -415,7 +422,7 @@
415	422	.smart-title {
416	423	height: 15%;
417	424	padding-top: 5rem;
418		- margin-bottom: 0rem !important;
	425	+ margin-bottom: 1rem !important;
419	426	}
420	427
421	428	.taken-box {
...	...	@@ -441,9 +448,7 @@
441	448	justify-content: start;
442	449	}
443	450
444		- .solution-area-two {
445		- height: calc(100% - 490.05px) !important;
446		- }
	451	+
447	452
448	453	.solution-area {
449	454
...	...	@@ -506,8 +511,16 @@
506	511	transform: scale(1);
507	512	}
508	513
509		- .customized-wrap-title,
510		- .etc-wrap-title {
	514	+ .visual-grid {
	515	+ display: grid;
	516	+ grid-template-columns: 1fr 1fr;
	517	+ }
	518	+
	519	+ .taken-wrap-box {
	520	+ height: 74%;
	521	+ }
	522	+
	523	+ .customized-wrap-title {
511	524	margin-top: 50px;
512	525	margin-bottom: 1rem;
513	526	height: 100%;
...	...	@@ -527,7 +540,7 @@
527	540	gap: 10px !important;
528	541	margin-bottom: 0px;
529	542	display: grid !important;
530		- grid-template-columns: 1fr 1fr 1fr 1fr;
	543	+ grid-template-columns: 1fr;
531	544	flex-direction: column;
532	545	}
533	546
...	...	@@ -563,7 +576,7 @@
563	576	}
564	577
565	578	.etc-wrap-title {
566		- height: 100%;
	579	+ /* height: 100%; */
567	580	margin-bottom: 10px !important;
568	581	}
569	582
...	...	@@ -1394,7 +1407,9 @@
1394	1407	color: #333;
1395	1408	font-size: 1.2rem !important;
1396	1409	}
1397		-
	1410	+ nav {
	1411	+ display: none;
	1412	+ }
1398	1413	nav>ul {
1399	1414	background-color: #fff;
1400	1415	border-bottom: 1px solid #333;
...	...	@@ -1417,6 +1432,10 @@
1417	1432	width: 29px;
1418	1433	}
1419	1434
	1435	+ .solution-web-box{
	1436	+ display: grid !important;
	1437	+ grid-template-columns: 1fr 1fr;
	1438	+ }
1420	1439	.swiper {
1421	1440	width: 50%;
1422	1441	height: 100%;
...	...	@@ -1697,8 +1716,7 @@
1697	1716	.taken-area img,
1698	1717	.traffic-area img,
1699	1718	.ai-area img {
1700		- opacity: 0;
1701		- }
	1719	+height: 20px; }
1702	1720
1703	1721	.solution-title,
1704	1722	.traffic-title,
...	...	@@ -1735,182 +1753,182 @@
1735	1753
1736	1754	.solution-area-two {
1737	1755	height: calc(100% - 490.05px) !important;
	1756	+
	1757	+ .solution-area {
	1758	+
	1759	+ gap: 40px !important;
	1760	+ height: calc(100% - 141.61px) !important;
	1761	+ }
	1762	+
	1763	+ .solution-text-box {
	1764	+ padding: 10px 15px !important;
	1765	+ }
	1766	+
	1767	+ .solution-text-box p {
	1768	+ padding-left: 5px;
	1769	+ }
	1770	+
	1771	+ .solution-text-box div {
	1772	+ gap: 0px !important;
	1773	+ }
	1774	+
	1775	+ .solution-text-box div div {
	1776	+ flex-direction: row;
	1777	+ }
	1778	+
	1779	+ .text-box-title::after {
	1780	+ left: -5px;
	1781	+ top: -1px;
	1782	+ }
	1783	+
	1784	+ .traffic-button {
	1785	+ display: none;
	1786	+ }
	1787	+
	1788	+ .traffic-area {
	1789	+ display: none;
	1790	+ }
	1791	+
	1792	+ .solution-web-box {
	1793	+ display: none;
	1794	+ }
	1795	+
	1796	+
	1797	+
	1798	+ .logo {
	1799	+ width: 50% !important;
	1800	+ height: 14px !important;
	1801	+ background-size: cover;
	1802	+ }
	1803	+
	1804	+ .mobil-wrap {
	1805	+ width: 50%;
	1806	+ }
	1807	+
	1808	+ .mobil-wrap button {
	1809	+ width: 100%;
	1810	+ text-align: right;
	1811	+ }
	1812	+
	1813	+ .box:hover,
	1814	+ .box-wrap div img:hover {
	1815	+ transform: scale(1);
	1816	+ }
	1817	+
	1818	+ .customized-wrap-title,
	1819	+ .etc-wrap-title {
	1820	+ margin-top: 50px;
	1821	+ margin-bottom: 1rem;
	1822	+ height: 100%;
	1823	+ }
	1824	+
	1825	+ .etc-wrap-title h1 {
	1826	+ padding-top: 0rem;
	1827	+ }
	1828	+
	1829	+ .box-wrap {
	1830	+ width: 100% !important;
	1831	+ height: 100%;
	1832	+ gap: 10px !important;
	1833	+ margin-bottom: 0px;
	1834	+
	1835	+ /* flex-direction: column; */
	1836	+ }
	1837	+
	1838	+ .box-wrap img {
	1839	+ width: 100%;
	1840	+ padding-bottom: 0rem !important;
	1841	+ object-fit: contain;
	1842	+ height: 77px !important;
	1843	+ }
	1844	+
	1845	+ .box-wrap div {
	1846	+ height: 100%;
	1847	+ }
	1848	+
	1849	+ .box-wrap div p {
	1850	+ padding: 1px;
	1851	+ margin-bottom: 0rem !important;
	1852	+ font-size: 1rem !important;
	1853	+ }
	1854	+
	1855	+ .box-wrap div div {
	1856	+ display: none;
	1857	+ height: 37% !important;
	1858	+ }
	1859	+
	1860	+ .etc-wrap-title h1,
	1861	+ .customized-wrap-title h1 {
	1862	+ font-size: 1.5rem !important;
	1863	+ }
	1864	+
	1865	+ .etc-wrap-title p,
	1866	+ .customized-wrap-title p {
	1867	+ font-size: 1.2rem !important;
	1868	+ }
	1869	+
	1870	+ .etc-wrap-title {
	1871	+ margin-bottom: 10px !important;
	1872	+ }
	1873	+
	1874	+ .customized-box {
	1875	+ width: 100%;
	1876	+ display: grid;
	1877	+ gap: 10px;
	1878	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	1879	+ }
	1880	+
	1881	+ .customized-box div {
	1882	+ width: 100%;
	1883	+
	1884	+ margin-bottom: 10px;
	1885	+ }
	1886	+
	1887	+ .customized-box p {
	1888	+ font-size: 1.1rem !important;
	1889	+ }
	1890	+
	1891	+ .customized-box div img {
	1892	+ width: 100%;
	1893	+ }
	1894	+
	1895	+ .etc-box-title {
	1896	+ margin-bottom: 0px;
	1897	+ }
	1898	+
	1899	+ .etc-box-title p {
	1900	+ padding-left: 0px;
	1901	+ }
	1902	+
	1903	+ .etc-box p {
	1904	+ padding-left: 0px;
	1905	+ }
	1906	+
	1907	+ .solution-box {
	1908	+ width: 100%;
	1909	+ height: calc(100% - 182px) !important;
	1910	+ display: grid;
	1911	+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	1912	+ justify-content: end;
	1913	+ gap: 1px;
	1914	+ }
	1915	+
	1916	+ .box1,
	1917	+ .box2,
	1918	+ .box3,
	1919	+ .box4,
	1920	+ .box5,
	1921	+ .box6 {
	1922	+ width: 100%;
	1923	+ background-size: cover;
	1924	+ text-shadow: 1px 1px 1px #33333350;
	1925	+ }
	1926	+
	1927	+ .box2,
	1928	+ .box4 {
	1929	+ transform: translateY(0px);
	1930	+ }
	1931	+
	1932	+
1738	1933	}
1739		-
1740		- .solution-area {
1741		-
1742		- gap: 40px !important;
1743		- height: calc(100% - 141.61px) !important;
1744		- }
1745		-
1746		- .solution-text-box {
1747		- padding: 10px 15px !important;
1748		- }
1749		-
1750		- .solution-text-box p {
1751		- padding-left: 5px;
1752		- }
1753		-
1754		- .solution-text-box div {
1755		- gap: 0px !important;
1756		- }
1757		-
1758		- .solution-text-box div div {
1759		- flex-direction: row;
1760		- }
1761		-
1762		- .text-box-title::after {
1763		- left: -5px;
1764		- top: -1px;
1765		- }
1766		-
1767		- .traffic-button {
1768		- display: none;
1769		- }
1770		-
1771		- .traffic-area {
1772		- display: none;
1773		- }
1774		-
1775		- .solution-web-box {
1776		- display: none;
1777		- }
1778		-
1779		-
1780		-
1781		- .logo {
1782		- width: 50% !important;
1783		- height: 14px !important;
1784		- background-size: cover;
1785		- }
1786		-
1787		- .mobil-wrap {
1788		- width: 50%;
1789		- }
1790		-
1791		- .mobil-wrap button {
1792		- width: 100%;
1793		- text-align: right;
1794		- }
1795		-
1796		- .box:hover,
1797		- .box-wrap div img:hover {
1798		- transform: scale(1);
1799		- }
1800		-
1801		- .customized-wrap-title,
1802		- .etc-wrap-title {
1803		- margin-top: 50px;
1804		- margin-bottom: 1rem;
1805		- height: 100%;
1806		- }
1807		-
1808		- .etc-wrap-title h1 {
1809		- padding-top: 0rem;
1810		- }
1811		-
1812		- .box-wrap {
1813		- width: 100% !important;
1814		- height: 100%;
1815		- gap: 10px !important;
1816		- margin-bottom: 0px;
1817		-
1818		- /* flex-direction: column; */
1819		- }
1820		-
1821		- .box-wrap img {
1822		- width: 100%;
1823		- padding-bottom: 0rem !important;
1824		- object-fit: contain;
1825		- height: 77px !important;
1826		- }
1827		-
1828		- .box-wrap div {
1829		- height: 100%;
1830		- }
1831		-
1832		- .box-wrap div p {
1833		- padding: 1px;
1834		- margin-bottom: 0rem !important;
1835		- font-size: 1rem !important;
1836		- }
1837		-
1838		- .box-wrap div div {
1839		- display: none;
1840		- height: 37% !important;
1841		- }
1842		-
1843		- .etc-wrap-title h1,
1844		- .customized-wrap-title h1 {
1845		- font-size: 1.5rem !important;
1846		- }
1847		-
1848		- .etc-wrap-title p,
1849		- .customized-wrap-title p {
1850		- font-size: 1.2rem !important;
1851		- }
1852		-
1853		- .etc-wrap-title {
1854		- margin-bottom: 10px !important;
1855		- }
1856		-
1857		- .customized-box {
1858		- width: 100%;
1859		- display: grid;
1860		- gap: 10px;
1861		- grid-template-columns: 1fr 1fr 1fr 1fr;
1862		- }
1863		-
1864		- .customized-box div {
1865		- width: 100%;
1866		-
1867		- margin-bottom: 10px;
1868		- }
1869		-
1870		- .customized-box p {
1871		- font-size: 1.1rem !important;
1872		- }
1873		-
1874		- .customized-box div img {
1875		- width: 100%;
1876		- }
1877		-
1878		- .etc-box-title {
1879		- margin-bottom: 0px;
1880		- }
1881		-
1882		- .etc-box-title p {
1883		- padding-left: 0px;
1884		- }
1885		-
1886		- .etc-box p {
1887		- padding-left: 0px;
1888		- }
1889		-
1890		- .solution-box {
1891		- width: 100%;
1892		- height: calc(100% - 182px) !important;
1893		- display: grid;
1894		- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
1895		- justify-content: end;
1896		- gap: 1px;
1897		- }
1898		-
1899		- .box1,
1900		- .box2,
1901		- .box3,
1902		- .box4,
1903		- .box5,
1904		- .box6 {
1905		- width: 100%;
1906		- background-size: cover;
1907		- text-shadow: 1px 1px 1px #33333350;
1908		- }
1909		-
1910		- .box2,
1911		- .box4 {
1912		- transform: translateY(0px);
1913		- }
1914		-
1915		-
1916	1934	} (No newline at end of file)

...	...	@@ -46,16 +46,15 @@
46	46	</div>
47	47	</div>
48	48	<div class="swiper-slide gradient-back">
49		- <div class="slide-wrap slide-solution flex align-center">
50		- <div class=" text-area " style="height: 70%;">
51		- <div style="width: 100%;" class="sub-text-area mb50">
	49	+ <div class="slide-wrap slide-solution ">
	50	+ <div class=" text-area pb60 slide-section flex align-center" style="align-content: center;">
	51	+ <div class="sub-text-area mb20" style="width: 100%;">
52	52	<p class=" solution-text pb30">테이큰 소프트는</p>
53	53	<p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
54	54	스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
55	55	</p>
56	56	</div>
57		- <div id="container" class="flex solution-box"
58		- style="height: calc(100% - 126px); flex-wrap: nowrap;">
	57	+ <div id="container" class="flex solution-box" style="flex-wrap: nowrap;">
59	58	<div class="box box1" style="display: none;">
60	59	<p class="mb15">데이터관리분야</p>
61	60	<p>데이터 관리 솔루션 Taken BI Manager</p>
...	...	@@ -82,12 +81,12 @@
82	81	</div>
83	82	</div>
84	83	<div class="swiper-slide">
85		- <div class="slide-wrap pt60 slide-solution">
86		- <div class=" flex align-center">
87		- <div style="width: 1200px; margin: 0 auto;" class="text-area">
88		- <p class="portfolio-text pb60">PORTFOLIO</p>
	84	+ <div class="slide-wrap pt90 pb90 slide-solution">
	85	+ <div class=" flex align-center" style="align-content: center; width: 100%;">
	86	+ <div style="width: 1200px; margin: 0 auto;">
	87	+ <p class="portfolio-text mb10 ">PORTFOLIO</p>
89	88	</div>
90		- <div class="swiper innerSwiper" style="height: calc(100% - 113px);">
	89	+ <div class="swiper innerSwiper" >
91	90	<div class="swiper-wrapper">
92	91	<div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
93	92	<img src="../resources/img/common/innerimg-1.png" alt="">
...	...	@@ -151,52 +150,31 @@
151	150
152	151	</div>
153	152	<div class="swiper-slide">
154		- <div class="slide-wrap pt60 slide-solution gradient-bottom flex align-center justify-center">
155		- <div class=" text-area " style="height: 100%;">
	153	+ <div class="slide-wrap pt60 pb60 slide-solution gradient-bottom ">
	154	+ <div class=" text-area pb60 flex align-center justify-center" style="height: 100%; align-content: center;">
156	155	<div style="width: 100%;" class="sub-text-area">
157		- <p class="map-text pb20">오시는길</p>
	156	+ <p class="map-text ">오시는길</p>
158	157	</div>
159	158	<div style="width: 100%;" class="flex justify-end map-btn pd10">
160	159	<button id="btnHeadquarter">본사</button>
161	160	<button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
162	161	</div>
163		- <div id="contentHeadquarter">
164		- <div>
	162	+ <div>
165	163
166		- <div id="daumRoughmapContainer1711609730266"
167		- class="root_daum_roughmap root_daum_roughmap_landing map"></div>
168		-
169		- <script charset="UTF-8" class="daum_roughmap_loader_script"
170		- src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
171		-
172		- <!-- 3. 실행 스크립트 -->
173		- <script charset="UTF-8">
174		- new daum.roughmap.Lander({
175		- "timestamp": "1711609730266",
176		- "key": "2ipvd",
177		- "mapWidth": "1200",
178		- "mapHeight": "500"
179		- }).render();
180		- </script>
	164	+ <div id="contentHeadquarter" style="height: 350px;">
	165	+ <div id="map1" style="width:1200px;height:100%;"></div>
	166	+ <div class="address-box flex">
	167	+ <p class="address-tile">본사</p>
	168	+ <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)
	169	+ </p>
	170	+ </div>
181	171	</div>
182		- <div class="address-box flex">
183		- <p class="address-tile">본사</p>
184		- <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)</p>
185		- </div>
186		- </div>
187		- <div id="contentDaeguBranch" style="display: none;">
188		- <div class="secen-map"
189		- style="font:normal normal 400 12px/normal dotum, sans-serif; width:1200px; height:500px; color:#333; position:relative">
190		- <div style="height: 500px;"><a
191		- href="https://map.kakao.com/?urlX=880044.0&urlY=652697.0&name=%EB%8C%80%EA%B5%AC%20%EC%88%98%EC%84%B1%EA%B5%AC%20%EC%95%8C%ED%8C%8C%EC%8B%9C%ED%8B%B01%EB%A1%9C%20160&map_type=TYPE_MAP&from=roughmap"
192		- target="_blank"><img class="map"
193		- src="http://t1.daumcdn.net/roughmap/imgmap/f280f94b124c89a6eb7ca7ad6c3e2e14c09453140c469b857a76899c9b1ac096"
194		- width="1198px" height="498px" style="border:1px solid #ccc;"></a></div>
195		-
196		- </div>
197		- <div class="address-box flex">
198		- <p class="address-tile">대구지사</p>
199		- <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	172	+ <div id="contentDaeguBranch" style="display: none;">
	173	+ <div id="map2" style="width:1200px;height:350px;"></div>
	174	+ <div class="address-box flex">
	175	+ <p class="address-tile">대구지사</p>
	176	+ <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	177	+ </div>
200	178	</div>
201	179	</div>
202	180	</div>
...	...	@@ -221,14 +199,59 @@
221	199	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2ccd5508acc8b99103687aab41907f94"></script>
222	200
223	201	<script>
	202	+ // 본사지도
	203	+ var mapContainer = document.getElementById('map1'), // 지도를 표시할 div
	204	+ mapOption = {
	205	+ center: new kakao.maps.LatLng(35.8260208900541, 128.75636298231913),
	206	+ level: 3 // 지도의 확대 레벨
	207	+ };
	208	+ var map1 = new kakao.maps.Map(mapContainer, mapOption);
	209	+
	210	+ // 마커가 표시될 위치입니다
	211	+ var markerPosition1 = new kakao.maps.LatLng(35.8260208900541, 128.75636298231913);
	212	+
	213	+ // 마커를 생성합니다
	214	+ var marker = new kakao.maps.Marker({
	215	+ position: markerPosition1
	216	+ });
	217	+
	218	+ // 마커가 지도 위에 표시되도록 설정합니다
	219	+ marker.setMap(map1);
	220	+
	221	+ // 지사 지도
	222	+ var mapContainer2 = document.getElementById('map2'),
	223	+ mapOption2 = {
	224	+ center: new kakao.maps.LatLng(35.835332450870354,128.68246038604707),
	225	+ level: 4,
	226	+ };
	227	+ var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
	228	+ // 마커가 표시될 위치입니다
	229	+ var markerPosition2 = new kakao.maps.LatLng(35.835332450870354, 128.68246038604707);
	230	+
	231	+ // 마커를 생성합니다
	232	+ var marker = new kakao.maps.Marker({
	233	+ position: markerPosition2
	234	+ });
	235	+
	236	+ // 마커가 지도 위에 표시되도록 설정합니다
	237	+ marker.setMap(map2);
	238	+ function resizeMap() {
	239	+ var mapContainer2 = document.getElementById('map2');
	240	+ mapContainer2.style.width = '1200px';
	241	+ mapContainer2.style.height = '350px';
	242	+ }
	243	+
	244	+ function relayout() {
	245	+ map2.relayout();
	246	+ }
224	247
225	248	$(document).ready(function () {
226	249	$("#btnHeadquarter").click(function () {
227	250	$("#btnHeadquarter").addClass('on');
228	251	$("#btnDaeguBranch").removeClass('on');
229	252	$("#contentDaeguBranch").hide();
230		-
231	253	$("#contentHeadquarter").show();
	254	+ map2.relayout();
232	255	});
233	256
234	257	$("#btnDaeguBranch").click(function () {
...	...	@@ -238,6 +261,8 @@
238	261	$("#contentHeadquarter").hide();
239	262
240	263	$("#contentDaeguBranch").show();
	264	+ map2.relayout();
	265	+ map2.setCenter(new kakao.maps.LatLng(35.835332450870354, 128.68246038604707))
241	266
242	267	});
243	268	});
...	...	@@ -345,23 +370,23 @@
345	370	if (firstTextBox) firstTextBox.classList.add('active');
346	371	},
347	372
348		- }, breakpoints: {
349		- 250: {
350		- slidesPerView: 1,
351		- spaceBetween: 20
352		- },
353		- // 화면의 넓이가 320px 이상일 때
354		-
355		- // 화면의 넓이가 640px 이상일 때
356		- 640: {
357		- slidesPerView: 2,
358		- spaceBetween: 40
359		- },
360		- 800: {
361		- slidesPerView: 3,
362		- spaceBetween: 40
363		- }
	373	+ }, breakpoints: {
	374	+ 250: {
	375	+ slidesPerView: 1,
	376	+ spaceBetween: 20
364	377	},
	378	+ // 화면의 넓이가 320px 이상일 때
	379	+
	380	+ // 화면의 넓이가 640px 이상일 때
	381	+ 640: {
	382	+ slidesPerView: 2,
	383	+ spaceBetween: 40
	384	+ },
	385	+ 800: {
	386	+ slidesPerView: 3,
	387	+ spaceBetween: 40
	388	+ }
	389	+ },
365	390	});
366	391
367	392
...	...	@@ -392,12 +417,14 @@
392	417
393	418
394	419	<style scoped>
395		- .footer-text p{
	420	+ .footer-text p {
396	421	font-size: 1.3rem;
397	422	}
398		- .copyright{
	423	+
	424	+ .copyright {
399	425	font-size: 1.3rem;
400	426	}
	427	+
401	428	#header {
402	429	position: fixed;
403	430	top: 0;
...	...	@@ -426,6 +453,7 @@
426	453	-ms-overflow-style: none;
427	454
428	455	}
	456	+
429	457	.mobile-menu-button,
430	458	.mobile-menu-button-close {
431	459	font-size: 2rem;
...	...	@@ -433,22 +461,25 @@
433	461	height: 29px;
434	462	width: 29px;
435	463	}
	464	+
436	465	.mobil-menu {
437	466	width: 100%;
438	467	height: 100%;
439	468	top: 40px;
440	469	}
	470	+
441	471	.mobil-menu ul {
442	472	list-style: none;
443	473	margin: 0;
444	474	background-color: #ffffff43;
445	475	}
	476	+
446	477	.mobil-menu ul li ul li a {
447	478	font-weight: 500;
448	479	color: #fff;
449	480	font-size: 1.2rem !important;
450	481	}
451		-
	482	+
452	483	::-webkit-scrollbar {
453	484	display: none;
454	485	}
...	...	@@ -540,7 +571,6 @@
540	571	}
541	572
542	573	.slide-solution {
543		- padding: 100px 0 80px;
544	574	font-family: 'Pretendard';
545	575
546	576	}

...	...	@@ -26,7 +26,7 @@
26	26	<div class="swiper-wrapper">
27	27	<div class="swiper-slide about-wrapper">
28	28	<div class="about-wrap slide-wrap ">
29		- <div class="text-area flex">
	29	+ <div class="flex">
30	30	<div class="about-title mb90" style="width: 100%;">
31	31	<p class="mb20">ABOUT US</p>
32	32	<p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
...	...	@@ -63,7 +63,7 @@
63	63	</div>
64	64	</div>
65	65	<div class="swiper-slide">
66		- <div class="taken-wrap slide-wrap ">
	66	+ <div class="taken-wrap slide-solution ">
67	67	<div class="text-area flex">
68	68	<div class="about-title mb20" style="width: 100%;">
69	69	<p class="mb20">Business</p>
...	...	@@ -178,9 +178,9 @@
178	178	</div>
179	179	</div>
180	180	<div class="swiper-slide">
181		- <div class="taken-wrap slide-wrap history-wrap">
	181	+ <div class="taken-wrap slide-wrap history-wrap slide-solution ">
182	182	<div class="text-area felx">
183		- <div class="about-title mt90 mb40" style="width: 100%; height: 60px;">
	183	+ <div class="about-title mb20">
184	184	<p>History</p>
185	185	</div>
186	186	<div class="timeline flex align-center justify-between" style="gap: 0px;">
...	...	@@ -188,7 +188,6 @@
188	188	<div class="year active-year" data-year="2021">2021</div>
189	189	<div class="year" data-year="2022">2022</div>
190	190	<div class="year" data-year="2023">2023</div>
191		- <!-- 더 많은 년도 추가 -->
192	191	</div>
193	192	<div class="contents" id="contents">
194	193	<div class="content" data-year="2021">
...	...	@@ -536,6 +535,7 @@
536	535	releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
537	536	},
538	537	on: {
	538	+
539	539	slideChange: function () {
540	540	var currentIndex = this.realIndex;
541	541	if (currentIndex === 0) {
...	...	@@ -545,54 +545,32 @@
545	545	}
546	546	var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
547	547	if (this.activeIndex === lastIndex) {
548		- $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
	548	+ $("#footer").show(); // 마지막 슬라이드에 도달하면 푸터를 보여줌
549	549	} else {
550		- $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
	550	+ $("#footer").hide(); // 그렇지 않으면 푸터를 숨김
551	551	}
552	552	},
553		- reachEnd: function () {
554		- // 마지막 슬라이드에 도달하면 마우스 휠 비활성화
555		- swiper.mousewheel.disable();
556		- },
557	553	}
558	554	});
559		-
560		- // 마우스 휠 동작에 따라 스와이퍼의 마우스 휠 활성화/비활성화
561		- window.addEventListener('wheel', function (event) {
562		- // 스크롤을 올릴 때
563		- if (event.deltaY < 0) {
564		- // 스와이퍼가 첫 번째 슬라이드에 있지 않으면 마우스 휠 활성화
565		- if (swiper.realIndex !== 0) {
566		- swiper.mousewheel.enable();
567		- }
568		- }
569		- // 스크롤을 내릴 때
570		- else if (event.deltaY > 0) {
571		- // 마지막 슬라이드에 도달했으면 마우스 휠 비활성화
572		- if (swiper.realIndex === swiper.slides.length - 1) {
573		- swiper.mousewheel.disable();
574		- } else {
575		- // 그렇지 않으면 활성화
576		- swiper.mousewheel.enable();
577		- }
578		- }
579		- });
580		-
581	555	// 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
582	556	targetArea.addEventListener('mouseenter', function () {
583	557	swiper.mousewheel.disable();
	558	+ console.log('들어옴');
584	559	});
585	560
586	561	// 마우스가 지정된 영역을 벗어날 때 마우스 휠 활성화
587	562	targetArea.addEventListener('mouseleave', function () {
588	563	swiper.mousewheel.enable();
	564	+ console.log('벗어남');
	565	+
589	566	});
590		-
591	567	$(function () {
592	568	$("#header").load("../layout/Header.html");
593	569	$("#footer").load("../layout/footer.html");
594	570	$("#footer").show();
	571	+
595	572	});
	573	+
596	574
597	575	</script>
598	576
...	...	@@ -675,6 +653,7 @@
675	653
676	654	.container {
677	655	width: 1200px;
	656	+ height: 50px;
678	657	display: flex;
679	658	flex-wrap: nowrap;
680	659	border-radius: 20px;

...	...	@@ -22,16 +22,15 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area slide-section flex align-center">
26	26
27		- <div class="text-area flex align-center">
28	27
29	28	<div class="flex justify-between" style="gap: 10px; width: 100%;">
30		- <div class="etc-wrap-title mb60" style="height: 150px;">
31		- <h1 class="mb20 pt70">데이터분석을 통한 인사이트 도출</h1>
	29	+ <div class="etc-wrap-title ">
	30	+ <h1 class=" ">데이터분석을 통한 인사이트 도출</h1>
32	31	<p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
33	32	</div>
34		- <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
	33	+ <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
35	34	<div class="">
36	35	<img src="../../resources/img/common/data-img1.png" alt="">
37	36	<p>구미시 주요 이슈 및 민원 분석</p>
...	...	@@ -49,7 +48,6 @@
49	48
50	49	</div>
51	50
52		- </div>
53	51	</div>
54	52	<div id="footer"></div>
55	53

...	...	@@ -22,54 +22,50 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area slide-section flex align-center">
26	26
27		- <div class="text-area flex align-center">
28	27
29		- <div class="flex justify-between" style="gap: 10px; width: 100%;">
30		- <div class="etc-wrap-title mb60">
31		- <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
32		- <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
	28	+ <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
	29	+ <div class="etc-wrap-title mb20">
	30	+ <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
	31	+ <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
	32	+ </div>
	33	+ <div class="flex justify-between align-end etc-wrap-text">
	34	+ <div class="">
	35	+ <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
	36	+ <p>도로 위험 감지 시스템</p>
33	37	</div>
34		- <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
35		- <div class="">
36		- <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
37		- <p>도로 위험 감지 시스템</p>
38		- </div>
39		- <div class="">
40		- <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
41		- <p>안개 감지 플랫폼</p>
42		- </div>
43		- <div class="">
44		- <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
45		- <p>이동경로 최적화 서비스</p>
46		- </div>
47		- <div class="">
48		- <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
49		- <p>횡단보도 및 내비게이션 연계 플랫폼</p>
50		- </div>
	38	+ <div class="">
	39	+ <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
	40	+ <p>안개 감지 플랫폼</p>
51	41	</div>
52		- <div class="flex justify-between align-end box-wrap" style="width: 100%; gap: 20px;">
53		- <div class="">
54		- <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
55		- <p>전력데이터 관리 시스템</p>
56		- </div>
57		- <div class="">
58		- <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
59		- <p>금형 부품 데이터 관리 플랫폼</p>
60		- </div>
61		- <div class="">
62		- <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
63		- <p>제조 데이터 관리 시스템</p>
64		- </div>
65		- <div class="">
66		- <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
67		- <p>메타데이터 관리 시스템</p>
68		- </div>
	42	+ <div class="">
	43	+ <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
	44	+ <p>이동경로 최적화 서비스</p>
	45	+ </div>
	46	+ <div class="">
	47	+ <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
	48	+ <p>횡단보도 및 내비게이션 연계 플랫폼</p>
	49	+ </div>
	50	+ <div class="">
	51	+ <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
	52	+ <p>전력데이터 관리 시스템</p>
	53	+ </div>
	54	+ <div class="">
	55	+ <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
	56	+ <p>금형 부품 데이터 관리 플랫폼</p>
	57	+ </div>
	58	+ <div class="">
	59	+ <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
	60	+ <p>제조 데이터 관리 시스템</p>
	61	+ </div>
	62	+ <div class="">
	63	+ <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
	64	+ <p>메타데이터 관리 시스템</p>
69	65	</div>
70	66	</div>
71		-
72	67	</div>
	68	+
73	69	</div>
74	70	<div id="footer"></div>
75	71
...	...	@@ -167,11 +163,10 @@
167	163	padding: 0;
168	164	}
169	165
170		- .box-wrap div:hover {
171		-
172		- }
	166	+
173	167
174	168	.box-wrap div img {
	169	+ border: 1px solid ;
175	170	padding-bottom: 2rem;
176	171	}
177	172

...	...	@@ -25,20 +25,23 @@
25	25	<div class="swiper mySwiper">
26	26	<div class="swiper-wrapper">
27	27	<div class="swiper-slide">
28		- <div class="taken-wrap slide-wrap ">
	28	+ <div class=" text-area pb60 slide-section flex align-center">
29	29	<div class="text-area flex">
30		- <div class="solution-title mb90">
	30	+ <div class="solution-title">
31	31	<p>Taken BI Manager v1.0</p>
32	32	</div>
33		- <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px; height: 100%;">
34		- <div class="taken-area taken-conteiner flex align-end solution-web-box" style="gap: 20px; height: 100%;">
	33	+ <div class="flex justify-between align-end taken-wrap-box "
	34	+ style="flex-wrap: nowrap; gap: 20px;">
	35	+ <div class="taken-area taken-conteiner flex align-end solution-web-box"
	36	+ style="gap: 20px; height: 100%;">
35	37	<img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
36	38	<div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
37	39	<p>데이터 수집,저장,관리</p>
38	40	<p>솔루션 제공 기반 맞춤형 서비스</p>
39	41	</div>
40	42	</div>
41		- <div class="taken-area taken-conteiner taken-area-text flex " style="gap: 20px; height: 100%;">
	43	+ <div class="taken-area taken-conteiner taken-area-text flex "
	44	+ style="gap: 20px; height: 100%;">
42	45	<div class="text-after">
43	46	<p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
44	47	<p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
...	...	@@ -70,14 +73,12 @@
70	73	</div>
71	74	</div>
72	75	<div class="swiper-slide">
73		- <div class="taken-wrap slide-wrap ">
	76	+ <div class=" text-area pb60 slide-section flex align-center">
74	77	<div class="text-area flex">
75		- <div class="traffic-title mb50">
	78	+ <div class="traffic-title">
76	79	<p>Traffic Agent</p>
77	80	</div>
78		- <div class="flex justify-end traffic-button">
79		- <button class="traffic-btn">영상보기</button>
80		- </div>
	81	+
81	82
82	83	<div class=" video-wrap">
83	84	<div class="traffic-video">
...	...	@@ -85,19 +86,20 @@
85	86	<p>Traffic Agent</p>
86	87	<p class="close-btn">x</p>
87	88	</div>
88		- <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
	89	+ <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted
	90	+ controls></video>
89	91	</div>
90	92	</div>
91	93	<div class="flex justify-between align-end taken-wrap-box"
92		- style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	94	+ style="flex-wrap: nowrap; gap: 20px; ">
93	95
94		- <div class="taken-area taken-conteiner flex-column justify-between solution-after"
95		- style="gap: 20px; height: 100%;">
	96	+ <div class="taken-area taken-conteiner flex align-end solution-after"
	97	+ style="height: 100%;">
96	98	<div class="text-after ">
97	99	<p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
98	100
99	101	</div>
100		- <div class="flex solution-area" style="gap: 20px; height: calc(100% - 65px);">
	102	+ <div class="flex solution-area" style="gap: 20px; ">
101	103
102	104	<div class="solution-text-box " style="padding: 15px 33px; ">
103	105	<h3 class="text-box-title mb10">주요기능</h3>
...	...	@@ -117,9 +119,13 @@
117	119	</div>
118	120	</div>
119	121	</div>
120		- <div class="traffic-area flex align-end justify-end solution-web-box" style="height: 100%; width: 100%;">
	122	+ <div class="traffic-area flex align-end justify-end solution-web-box"
	123	+ style="height: 100%; width: 100%;">
	124	+ <div class="flex justify-end traffic-button">
	125	+ <button class="traffic-btn">영상보기</button>
	126	+ </div>
121	127
122		- <img src="../../resources/img/common/traffic-img.png" alt="" class="mb30"
	128	+ <img src="../../resources/img/common/traffic-img.png" alt=""
123	129	style="height: 356px;">
124	130	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
125	131	<p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
...	...	@@ -131,14 +137,12 @@
131	137	</div>
132	138	</div>
133	139	<div class="swiper-slide">
134		- <div class="taken-wrap slide-wrap ">
	140	+ <div class=" text-area pb60 slide-section flex align-center">
135	141	<div class="text-area flex">
136		- <div class="ai-title mb50">
	142	+ <div class="ai-title">
137	143	<p>AI 안전통합 횡단보도 관리 솔루션</p>
138	144	</div>
139		- <div class="flex justify-end traffic-button">
140		- <button class="traffic-btn">영상보기</button>
141		- </div>
	145	+
142	146
143	147	<div class=" video-wrap">
144	148	<div class="traffic-video">
...	...	@@ -149,18 +153,21 @@
149	153	<video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
150	154	</div>
151	155	</div>
152		- <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	156	+ <div class="flex justify-between align-end taken-wrap-box"
	157	+ style="flex-wrap: nowrap; gap: 20px; ">
153	158	<div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
154	159
155		- <img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
	160	+ <img src="../../resources/img/common/ai-img.png" alt="">
156	161	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
157	162	<p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
158	163	<p>GIS 기반 통합 관제<br> 시스템 구축</p>
159	164	</div>
160	165	</div>
161	166	<div class="taken-area taken-conteiner flex align-end" style="gap: 20px;">
162		-
163		- <div class="text-after solution-area-two" style="height: calc(100% - 348px);">
	167	+ <div class="flex justify-end traffic-button">
	168	+ <button class="traffic-btn">영상보기</button>
	169	+ </div>
	170	+ <div class="text-after solution-area-two">
164	171	<p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
165	172	</div>
166	173	<div class="solution-text-box ">
...	...	@@ -172,7 +179,7 @@
172	179	</div>
173	180	<div class="solution-text-box">
174	181	<h3 class="text-box-title mb10">특장점</h3>
175		- <div class="flex " style="gap: 30px;">
	182	+ <div class="flex" style="gap: 30px; flex-wrap: nowrap;">
176	183	<div class="flex-column">
177	184	<p>- 횡단보도 관제 분석 시스템 구축</p>
178	185	<p>- 현장모니터링 화면 구성</p>
...	...	@@ -189,14 +196,12 @@
189	196	</div>
190	197	</div>
191	198	<div class="swiper-slide meta-wrap">
192		- <div class="taken-wrap slide-wrap ">
	199	+ <div class=" text-area pb60 slide-section flex align-center">
193	200	<div class="text-area flex">
194		- <div class="meta-title mb50">
	201	+ <div class="meta-title">
195	202	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
196	203	</div>
197		- <div class="flex justify-end traffic-button">
198		- <button class="traffic-btn">영상보기</button>
199		- </div>
	204	+
200	205
201	206	<div class=" video-wrap">
202	207	<div class="traffic-video">
...	...	@@ -208,9 +213,9 @@
208	213	</div>
209	214	</div>
210	215	<div class="flex justify-between align-end taken-wrap-box"
211		- style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	216	+ style="flex-wrap: nowrap; gap: 20px;">
212	217
213		- <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
	218	+ <div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
214	219	<div class="text-after ">
215	220	<p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
216	221
...	...	@@ -232,8 +237,10 @@
232	237	</div>
233	238	</div>
234	239	<div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
235		-
236		- <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
	240	+ <div class="flex justify-end traffic-button">
	241	+ <button class="traffic-btn">영상보기</button>
	242	+ </div>
	243	+ <img src="../../resources/img/common/meta-img.png" alt="" class="mb30" style="height: 250px;">
237	244	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
238	245	<p>가상과 현실공간을<br>연결하는 플랫폼</p>
239	246	<p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
...	...	@@ -244,13 +251,13 @@
244	251	</div>
245	252	</div>
246	253	<div class="swiper-slide">
247		- <div class="taken-wrap slide-wrap ">
	254	+ <div class=" text-area pb60 slide-section flex align-center">
248	255	<div class="text-area flex">
249		- <div class="smart-title mb90">
	256	+ <div class="smart-title ">
250	257	<p>스마트제조 데이터 모니터링 서비스</p>
251	258	</div>
252	259	<div class="flex justify-between align-end taken-wrap-box"
253		- style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	260	+ style="flex-wrap: nowrap; gap: 20px;">
254	261	<div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
255	262
256	263	<img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
...	...	@@ -288,7 +295,7 @@
288	295	<div id="footer"></div>
289	296
290	297
291		-
	298	+
292	299
293	300
294	301
...	...	@@ -368,14 +375,14 @@
368	375
369	376	});
370	377
371		- $('.traffic-btn').click(function(){
	378	+ $('.traffic-btn').click(function () {
372	379	$('.video-wrap').show();
373		-
	380	+
374	381
375	382	});
376		- $('.close-btn').click(function(){
	383	+ $('.close-btn').click(function () {
377	384	$('.video-wrap').hide();
378		-
	385	+
379	386
380	387	});
381	388
...	...	@@ -385,11 +392,12 @@
385	392
386	393
387	394	<style scoped>
388		- .swiper-slide.on{
	395	+ .swiper-slide.on {
389	396	width: 100%;
390	397	height: 100%;
391	398	background-color: #000;
392	399	}
	400	+
393	401	/* 스크롤바 없애기 */
394	402	body {
395	403	-ms-overflow-style: none;

...	...	@@ -22,51 +22,49 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area slide-section flex align-center">
26	26
27		- <div class="text-area flex align-center">
28	27
29		- <div class="flex justify-between" style="gap: 10px; width: 100%;">
30		- <div class="etc-wrap-title mb70 mt">
31		- <h1 class="mb20">시각화 서비스 시스템 구축</h1>
32		- <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
	28	+ <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
	29	+ <div class="etc-wrap-title ">
	30	+ <h1 class="mb20">시각화 서비스 시스템 구축</h1>
	31	+ <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
	32	+ </div>
	33	+ <div class="etc-wrap-text flex justify-between">
	34	+
	35	+ <div class="">
	36	+ <img src="../../resources/img/common/visual-img1.png" alt="">
	37	+ <p>영천시 지역별 인구 추이 분석</p>
33	38	</div>
34		- <div class="flex justify-between align-end box-wrap mb20" style="width: 100%; gap: 20px;">
35		- <div class="">
36		- <img src="../../resources/img/common/visual-img1.png" alt="">
37		- <p>영천시 지역별 인구 추이 분석</p>
38		- </div>
39		- <div class="">
40		- <img src="../../resources/img/common/visual-img2.png" alt="">
41		- <p>포항시 지역별 인구 추이 분석</p>
42		- </div>
43		- <div class="">
44		- <img src="../../resources/img/common/visual-img3.png" alt="">
45		- <p>스마트 제조 공정관리 모니터링 플랫폼</p>
46		- </div>
47		-
	39	+ <div class="">
	40	+ <img src="../../resources/img/common/visual-img2.png" alt="">
	41	+ <p>포항시 지역별 인구 추이 분석</p>
48	42	</div>
49		- <div class="flex justify-between align-end box-wrap" style="width: 100%; gap: 20px;">
50		- <div class="">
51		- <img src="../../resources/img/common/visual-img4.png" alt="">
52		- <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
53		- </div>
54		- <div class="">
55		- <img src="../../resources/img/common/visual-img5.png" alt="">
56		- <p>시니어 스마트 케어 모니터링 플랫폼</p>
57		- </div>
58		- <div class="">
59		- <img src="../../resources/img/common/visual-img6.png" alt="">
60		- <p>공정 및 외부 환경 관제 시각화</p>
61		- </div>
62		- <div class="">
63		- <img src="../../resources/img/common/visual-img7.png" alt="">
64		- <p>상주시 부서별 재정 분석</p>
65		- </div>
	43	+ <div class="">
	44	+ <img src="../../resources/img/common/visual-img3.png" alt="">
	45	+ <p>스마트 제조 공정관리 모니터링 플랫폼</p>
	46	+ </div>
	47	+
	48	+ <div class="">
	49	+ <img src="../../resources/img/common/visual-img4.png" alt="">
	50	+ <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
	51	+ </div>
	52	+ <div class="">
	53	+ <img src="../../resources/img/common/visual-img5.png" alt="">
	54	+ <p>시니어 스마트 케어 모니터링 플랫폼</p>
	55	+ </div>
	56	+ <div class="">
	57	+ <img src="../../resources/img/common/visual-img6.png" alt="">
	58	+ <p>공정 및 외부 환경 관제 시각화</p>
	59	+ </div>
	60	+ <div class="">
	61	+ <img src="../../resources/img/common/visual-img7.png" alt="">
	62	+ <p>상주시 부서별 재정 분석</p>
66	63	</div>
67	64	</div>
68		-
69	65	</div>
	66	+ </div>
	67	+
70	68	</div>
71	69	<div id="footer"></div>
72	70
...	...	@@ -156,7 +154,7 @@
156	154	}
157	155
158	156	body {
159		- background: linear-gradient( #d7e2ff9d,#fff, #fff);
	157	+ background: linear-gradient(#d7e2ff9d, #fff, #fff);
160	158	font-family: 'Pretendard';
161	159	font-size: 14px;
162	160	color: #000;

Delete comment