Commit @e768fe7e9148e647762017c95e13ead9908649fd

mycoms 2024-04-04

240404김하영

@e768fe7e9148e647762017c95e13ead9908649fd

91d397a

e768fe7

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css


 	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');
+	src: local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/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');
+	src: local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');
 }
 
 @font-face {

91d397a

e768fe7

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


         font-size: 2.2rem !important;
     }
 
+
     .solution-title p,
     .traffic-title p,
     .ai-title p,

     .solution-sub-text {
         font-size: 1rem !important;
     }
+
 
     .solution-box {
         width: 100%;

     }
 
     .slide-solution .portfolio-text {
-        padding: 6rem 1rem;
+        padding: 0rem 1rem;
+    }
+    #contentHeadquarter{
+        height: 350px;
+    }
+    #map1,#map2 {
+        width: 100% !important;
     }
 
     .box:hover {

         font-size: 1.8rem;
     }
 
-    #contentDaeguBranch {
-        width: 100%;
-        height: 100%;
-    }
+ 
 
     .root_daum_roughmap_landing {
         width: 100% !important;

     .footer-text div p,
     .footer-text p {
         width: 100%;
+        font-size: 1.2rem;
         padding-left: 0px !important;
     }
 
     .about-wrap {
         width: 100%;
-        padding: 0px;
-        padding-top: 50px;
+      padding: 9rem 2rem;
     }
-
+    .container{
+        width: 100%;
+    }
     .about-title-sub {
         font-size: 1.2rem;
     }

         flex-wrap: nowrap;
         width: 100%;
         height: 10%;
+        margin-bottom: 10px !important;
         flex-direction: column;
         gap: 10px !important;
     }
 
     .about-area p {
+        font-size: 1.2rem;
+    }
+    .month-text p{
         font-size: 1.2rem;
     }
 

         display: none;
     }
 
-    .about-title {
-        margin-top: 60px;
-        height: 20%;
-        margin-bottom: 1rem !important;
-    }
 
     .about-text {
         font-size: 1.5rem;
     }
 
     .silde-box {
-        height: 60%;
+        height: 75%;
         display: flex;
         flex-direction: column;
     }

     .slideTextDtail div div {
         display: none;
     }
-
+    .about-title{
+        margin-bottom: 1rem !important;
+    }
 
 
     .about img {

     }
 
     .about-vision-box img {
-        width: 100%;
-        height: 100%;
+        height: 149px;
+        display: block;
         object-fit: contain;
     }
 

     .ai-area img {
         opacity: 0;
     }
-
-    .solution-title,
-    .traffic-title,
-    .ai-title,
-    .meta-title,
-    .smart-title {
-        height: 15%;
-        padding-top: 5rem;
-        margin-bottom: 1rem !important;
-    }
+    
 
     .taken-box {
         width: 100%;

     }
 
 
-
+    .solution-title::after, .traffic-title::after, .ai-title::after, .meta-title::after, .smart-title::after{
+        display: none;
+    }
     .solution-area {
 
         gap: 40px !important;

         gap: 0px !important;
     }
 
-    .solution-text-box div div {
-        flex-direction: row;
+    .solution-text-box div div p{
+        width: 100%;
+    
+        /* flex-direction: row; */
     }
-
+    .etc-wrap-text,.box-wrap{
+        width: 100%;
+            flex-direction: column;
+    }
+    .etc-wrap-text div,.box-wrap div{
+        width: 100%;
+        border-radius: 5px;
+        border: 1px solid #333333;
+        margin-bottom: 5px;
+    }
+    .box-wrap div{
+        padding: 2rem 0;
+    }
+    .etc-wrap-text div img,.box-wrap div img{
+        display: none;
+    }
+    .etc-wrap-text p,.box-wrap p{
+        font-size: 1rem;
+    }
     .text-box-title::after {
         left: -5px;
         top: -1px;

 
     .customized-wrap-title {
         margin-top: 50px;
-        margin-bottom: 1rem;
-        height: 100%;
+        margin-bottom: 1rem ;
     }
 
     .etc-wrap-title h1 {
         padding-top: 0rem;
+    }
+    .etc-box-title{
+        font-weight: 900;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
+    .etc-box p{
+        text-align: left;
     }
 
     .box-grid {
         grid-template-columns: 1fr 1fr 1fr !important;
     }
 
-    .box-wrap {
-        width: 100% !important;
-        height: 100%;
-        gap: 10px !important;
-        margin-bottom: 0px;
-        display: grid !important;
-        grid-template-columns: 1fr;
-        flex-direction: column;
-    }
 
     .box-wrap img {
         width: 100%;

         object-fit: contain;
     }
 
-    .box-wrap div {
-        height: 100%;
-    }
-
+  
     .box-wrap div p {
         padding: 1px;
         margin-bottom: 0rem !important;
         font-size: 1rem !important;
     }
-
+    .etc-box-title{
+        font-weight: 900;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
     .box-wrap div div {
         display: none;
         height: 37% !important;

         font-size: 1.8rem;
     }
 
-    #contentDaeguBranch {
-        width: 100%;
-        height: 100%;
-    }
+   
 
     .root_daum_roughmap_landing {
         width: 100% !important;

         padding-top: 5rem;
         margin-bottom: 0rem !important;
     }
+    .etc-wrap-text,.box-wrap{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 5px;
+    }
+    .etc-grid-box{
+        grid-template-columns: 1fr 1fr;
+    }
+
+    /* .etc-grid-box p{height: 100px !important;} */
+
+    .etc-wrap-text div,.box-wrap div{
+        width: 100%;
+        border-radius: 5px;
+        margin-bottom: 5px;
+    }
+    .etc-wrap-text div img,.box-wrap div img{
+        width: 100% !important;
+    }
+    .box-wrap div{
+        padding: 2rem 0;
+    }
+   
+    .etc-wrap-text p,.box-wrap p{
+        font-size: 1rem;
+        /* height: 50px; */
+    }
 
     .taken-box {
         width: 100%;

     .etc-wrap-title {
         margin-top: 50px;
         margin-bottom: 1rem;
-        height: 100%;
     }
 
     .etc-wrap-title h1 {

     .box-grid {
         grid-template-columns: 1fr 1fr 1fr !important;
     }
-
-    .box-wrap {
-        width: 100% !important;
-        height: 100%;
-        gap: 10px !important;
-        margin-bottom: 0px;
-        display: grid !important;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-        flex-direction: column;
+    .box-wrap div div p{
+        font-size: 1.1rem !important;
     }
 
-    .box-wrap img {
-        width: 100%;
-        padding-bottom: 0rem !important;
-        object-fit: contain;
-    }
-
-    .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.2rem !important;
     }
 
-    .etc-wrap-title {
-        height: 100%;
-        margin-bottom: 10px !important;
-    }
 
     .customized-box {
         width: 100%;

         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{
+    .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 {
-height: 20px;    }
+        height: 20px;
+    }
 
     .solution-title,
     .traffic-title,

91d397a

e768fe7

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     padding-top: 6rem;
     text-align: center;
 }
+
 .mobil-wrap{
     display: none;
 }

 }
 
 .customized-box p {
-    font-size: 2rem;
-    font-weight: 500;
+    font-size: 1.5rem;
+	font-family: 'Pretendard';
+    font-weight: 600;
 }
 
 .etc-wrap-title h1 {

     object-fit: contain;
 }
 
-.etc-box-title p {
+.etc-box-title{
     font-weight: 900;
-    font-size: 2.5rem !important;
+    text-align: center !important;
+    font-size: 2.2rem !important;
+}
+.etc-box p{
+    text-align: left;
 }
 
 .etc-box p {

91d397a

e768fe7

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


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

                             <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
                                 매출을 확대해 나갑니다.
                             </p>
-                            <div class="flex justify-center about-vision-box">
-                                <img src="../../resources/img/common/about-img5.png" alt="">
-                                <img src="../../resources/img/common/about-img4.png" alt="">
-                            </div>
+                        </div>
+                        <div class="flex justify-center about-vision-box">
+                            <img src="../../resources/img/common/about-img5.png" alt="">
+                            <img src="../../resources/img/common/about-img4.png" alt="">
                         </div>
                     </div>
                 </div>

     targetArea.addEventListener('mouseleave', function () {
         swiper.mousewheel.enable();
         console.log('벗어남');
-        
+
     });
     $(function () {
         $("#header").load("../layout/Header.html");

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

91d397a

e768fe7

views/pages/Customized.html

--- views/pages/Customized.html

+++ views/pages/Customized.html

...	...	@@ -22,52 +22,35 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area pb60 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="customized-wrap-title mb30">
31		- <h1 class="mb20">고객을 만족시키는 맞춤형 컨설팅</h1>
32		- <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
	28	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	29	+ <div class="etc-wrap-title mb30">
	30	+ <h1 class="mb20">고객을 만족시키는 맞춤형 컨설팅</h1>
	31	+ <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
	32	+ </div>
	33	+ <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
	34	+ <div>
	35	+ <img src="../../resources/img/common/custom-img.png" alt="">
	36	+ <p>상주시 데이터 활용 <br>기본계획 수립</p>
33	37	</div>
34		- <div class="flex justify-between customized-box" style="width: 100%;">
35		- <div>
36		- <div class="mb20">
37		- <img src="../../resources/img/common/custom-img.png" alt="">
38		- </div>
39		- <div>
40		- <p>상주시 데이터 활용 <br>기본계획 수립</p>
41		- </div>
42		- </div>
43		- <div>
44		- <div class="mb20">
45		- <img src="../../resources/img/common/custom-img2.png" alt="">
46		- </div>
47		- <div>
48		- <p>영천시 데이터 활용 <br>기본계획 수립</p>
49		- </div>
50		- </div>
51		- <div>
52		- <div class="mb20">
53		- <img src="../../resources/img/common/custom-img3.png" alt="">
54		- </div>
55		- <div>
56		- <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
57		- </div>
58		- </div>
59		- <div>
60		- <div class="mb20">
61		- <img src="../../resources/img/common/custom-img4.png" alt="">
62		- </div>
63		- <div>
64		- <p>영천시 공공데이터 <br>품질관리</p>
65		- </div>
66		- </div>
	38	+ <div>
	39	+ <img src="../../resources/img/common/custom-img2.png" alt="">
	40	+ <p>영천시 데이터 활용 <br>기본계획 수립</p>
	41	+ </div>
	42	+ <div>
	43	+ <img src="../../resources/img/common/custom-img3.png" alt="">
	44	+ <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
	45	+ </div>
	46	+ <div>
	47	+ <img src="../../resources/img/common/custom-img4.png" alt="">
	48	+ <p>영천시 공공데이터 <br>품질관리</p>
67	49	</div>
68	50	</div>
69		-
70	51	</div>
	52	+
	53	+ </div>
71	54	</div>
72	55	<div id="footer"></div>
73	56

91d397a

e768fe7

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html

...	...	@@ -27,7 +27,7 @@
27	27
28	28	<div class="flex justify-between" style="gap: 10px; width: 100%;">
29	29	<div class="etc-wrap-title ">
30		- <h1 class=" ">데이터분석을 통한 인사이트 도출</h1>
	30	+ <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
31	31	<p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
32	32	</div>
33	33	<div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
...	...	@@ -158,7 +158,9 @@
158	158	}
159	159
160	160	.box-wrap div p {
161		- font-size: 1.8rem;
	161	+ font-size: 1.2rem;
	162	+ font-weight: 600;
	163	+ padding: 10px 0;
162	164	}
163	165	</style>
164	166

91d397a

e768fe7

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html


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

91d397a

e768fe7

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html


 
 <body>
     <div id="header"></div>
-    <div class="taken-wrap " style=" height: 100%;">
+    <div class=" text-area pb60 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 mb30">
+
+        <div class="flex justify-between" style="gap: 10px; width: 100%;">
+            <div class="etc-wrap-title mb30">
                     <h1 class="mb20">기타사례</h1>
                 </div>
-                <div class="flex justify-between customized-box" style="width: 100%; gap: 20px;">
+                <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 20px; ">
                     <div class="etc-box">
-                        <div class="mb20">
                             <img src="../../resources/img/common/etc-img.png" alt="">
-                        </div>
-                        <div class="etc-box-title mb20">
-                            <p>정부혁신 웹사이트 기능개선 및 유지관리</p>
-                        </div>
-                        <div style="text-align: left;">
+                            <p class="etc-box-title">정부혁신 웹사이트 기능개선 및 유지관리</p>
                             <p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
                             <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
                             <p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
-                        </div>
                     </div>
                     <div class="etc-box">
-                        <div class="mb20">
                             <img src="../../resources/img/common/etc-img2.png" alt="">
-                        </div>
-                        <div class="etc-box-title mb20">
-                            <p>AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
-                        </div>
-                        <div style="text-align: left;">
+                            <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
                             <p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
                             <p>- AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
-                        </div>
                     </div>
                    
                 </div>

91d397a

e768fe7

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html


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

                 <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
                     제공합니다.</p>
             </div>
-            <div class="flex justify-between" style="flex-wrap: nowrap;">
+            <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
                 <div class="pd10">
                     <img src="../../resources/img/common/smart-img1.png" alt="">
                     <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>

 
     .box-wrap div img {
         width: 100%;
-        height: 100%;
         padding-bottom: 2rem;
     }
 

91d397a

e768fe7

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html

...	...	@@ -26,45 +26,42 @@
26	26	<div class="swiper-wrapper">
27	27	<div class="swiper-slide">
28	28	<div class=" text-area pb60 slide-section flex align-center">
29		- <div class="text-area flex">
30		- <div class="solution-title">
31		- <p>Taken BI Manager v1.0</p>
32		- </div>
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%;">
37		- <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
38		- <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
39		- <p>데이터 수집,저장,관리</p>
40		- <p>솔루션 제공 기반 맞춤형 서비스</p>
41		- </div>
	29	+
	30	+ <div class="solution-title">
	31	+ <p>Taken BI Manager v1.0</p>
	32	+ </div>
	33	+ <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px;">
	34	+ <div class="taken-area taken-conteiner flex align-end solution-web-box"
	35	+ style="gap: 20px; height: 100%;">
	36	+ <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
	37	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
	38	+ <p>데이터 수집,저장,관리</p>
	39	+ <p>솔루션 제공 기반 맞춤형 서비스</p>
42	40	</div>
43		- <div class="taken-area taken-conteiner taken-area-text flex "
44		- style="gap: 20px; height: 100%;">
45		- <div class="text-after">
46		- <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
47		- <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
48		- 서비스를 제공합니다.</p>
49		- <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
50		- </div>
51		- <div class="solution-text-box">
52		- <h3 class="text-box-title mb10">주요기능</h3>
53		- <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
54		- <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
55		- <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
56		- </div>
57		- <div class="solution-text-box">
58		- <h3 class="text-box-title mb10">특장점</h3>
59		- <div class="flex " style="gap: 30px;">
60		- <div class="flex-column">
61		- <p>- DB 연계형 데이터 수집 서비스</p>
62		- <p>- 데이터 시각화 시스템</p>
63		- </div>
64		- <div class="flex-column">
65		- <p>- 데이터 저장/관리 시스템</p>
66		- <p>- 관리 서비스 시스템</p>
67		- </div>
	41	+ </div>
	42	+ <div class="taken-area taken-conteiner taken-area-text flex " style="gap: 20px; height: 100%;">
	43	+ <div class="text-after">
	44	+ <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
	45	+ <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
	46	+ 서비스를 제공합니다.</p>
	47	+ <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
	48	+ </div>
	49	+ <div class="solution-text-box">
	50	+ <h3 class="text-box-title mb10">주요기능</h3>
	51	+ <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
	52	+ <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
	53	+ <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
	54	+ </div>
	55	+ <div class="solution-text-box">
	56	+ <h3 class="text-box-title mb10">특장점</h3>
	57	+ <div class="flex " style="gap: 30px;">
	58	+ <div class="flex-column">
	59	+ <p>- DB 연계형 데이터 수집 서비스</p>
	60	+ <p>- 데이터 시각화 시스템</p>
	61	+ </div>
	62	+ <div class="flex-column">
	63	+ <p>- 데이터 저장/관리 시스템</p>
	64	+ <p>- 관리 서비스 시스템</p>
68	65	</div>
69	66	</div>
70	67	</div>
...	...	@@ -74,63 +71,58 @@
74	71	</div>
75	72	<div class="swiper-slide">
76	73	<div class=" text-area pb60 slide-section flex align-center">
77		- <div class="text-area flex">
78		- <div class="traffic-title">
79		- <p>Traffic Agent</p>
	74	+
	75	+ <div class="traffic-title">
	76	+ <p>Traffic Agent</p>
	77	+ </div>
	78	+
	79	+
	80	+ <div class=" video-wrap">
	81	+ <div class="traffic-video">
	82	+ <div class="flex justify-between mb10 ">
	83	+ <p>Traffic Agent</p>
	84	+ <p class="close-btn">x</p>
	85	+ </div>
	86	+ <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
80	87	</div>
	88	+ </div>
	89	+ <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
81	90
	91	+ <div class="taken-area taken-conteiner flex align-end solution-after" style="height: 100%;">
	92	+ <div class="text-after ">
	93	+ <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
82	94
83		- <div class=" video-wrap">
84		- <div class="traffic-video">
85		- <div class="flex justify-between mb10 ">
86		- <p>Traffic Agent</p>
87		- <p class="close-btn">x</p>
	95	+ </div>
	96	+ <div class="flex solution-area" style="gap: 20px; ">
	97	+
	98	+ <div class="solution-text-box " style="padding: 15px 33px; ">
	99	+ <h3 class="text-box-title mb10">주요기능</h3>
	100	+ <p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
	101	+ <p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
	102	+ <p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
	103	+ <p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
88	104	</div>
89		- <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted
90		- controls></video>
	105	+ <div class="solution-text-box">
	106	+ <h3 class="text-box-title mb10">특장점</h3>
	107	+
	108	+ <p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
	109	+ <p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
	110	+ <p>- 위치정보 공유 및 검색 기능</p>
	111	+
	112	+
	113	+ </div>
91	114	</div>
92	115	</div>
93		- <div class="flex justify-between align-end taken-wrap-box"
94		- style="flex-wrap: nowrap; gap: 20px; ">
95		-
96		- <div class="taken-area taken-conteiner flex align-end solution-after"
97		- style="height: 100%;">
98		- <div class="text-after ">
99		- <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
100		-
101		- </div>
102		- <div class="flex solution-area" style="gap: 20px; ">
103		-
104		- <div class="solution-text-box " style="padding: 15px 33px; ">
105		- <h3 class="text-box-title mb10">주요기능</h3>
106		- <p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
107		- <p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
108		- <p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
109		- <p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
110		- </div>
111		- <div class="solution-text-box">
112		- <h3 class="text-box-title mb10">특장점</h3>
113		-
114		- <p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
115		- <p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
116		- <p>- 위치정보 공유 및 검색 기능</p>
117		-
118		-
119		- </div>
120		- </div>
	116	+ <div class="traffic-area flex align-end justify-end solution-web-box"
	117	+ style="height: 100%; width: 100%;">
	118	+ <div class="flex justify-end traffic-button">
	119	+ <button class="traffic-btn">영상보기</button>
121	120	</div>
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>
127	121
128		- <img src="../../resources/img/common/traffic-img.png" alt=""
129		- style="height: 356px;">
130		- <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
131		- <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
132		- <p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
133		- </div>
	122	+ <img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">
	123	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	124	+ <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
	125	+ <p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
134	126	</div>
135	127	</div>
136	128	</div>
...	...	@@ -138,56 +130,54 @@
138	130	</div>
139	131	<div class="swiper-slide">
140	132	<div class=" text-area pb60 slide-section flex align-center">
141		- <div class="text-area flex">
142		- <div class="ai-title">
143		- <p>AI 안전통합 횡단보도 관리 솔루션</p>
	133	+
	134	+ <div class="ai-title">
	135	+ <p>AI 안전통합 횡단보도 관리 솔루션</p>
	136	+ </div>
	137	+
	138	+
	139	+ <div class=" video-wrap">
	140	+ <div class="traffic-video">
	141	+ <div class="flex justify-between mb10 ">
	142	+ <p>AI 안전통합 횡단보도 관리 솔루션</p>
	143	+ <p class="close-btn">x</p>
	144	+ </div>
	145	+ <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
144	146	</div>
	147	+ </div>
	148	+ <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
	149	+ <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
145	150
146		-
147		- <div class=" video-wrap">
148		- <div class="traffic-video">
149		- <div class="flex justify-between mb10 ">
150		- <p>AI 안전통합 횡단보도 관리 솔루션</p>
151		- <p class="close-btn">x</p>
152		- </div>
153		- <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
	151	+ <img src="../../resources/img/common/ai-img.png" alt="">
	152	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	153	+ <p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
	154	+ <p>GIS 기반 통합 관제<br> 시스템 구축</p>
154	155	</div>
155	156	</div>
156		- <div class="flex justify-between align-end taken-wrap-box"
157		- style="flex-wrap: nowrap; gap: 20px; ">
158		- <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
159		-
160		- <img src="../../resources/img/common/ai-img.png" alt="">
161		- <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
162		- <p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
163		- <p>GIS 기반 통합 관제<br> 시스템 구축</p>
164		- </div>
	157	+ <div class="taken-area taken-conteiner flex align-end" style="gap: 20px;">
	158	+ <div class="flex justify-end traffic-button">
	159	+ <button class="traffic-btn">영상보기</button>
165	160	</div>
166		- <div class="taken-area taken-conteiner flex align-end" style="gap: 20px;">
167		- <div class="flex justify-end traffic-button">
168		- <button class="traffic-btn">영상보기</button>
169		- </div>
170		- <div class="text-after solution-area-two">
171		- <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
172		- </div>
173		- <div class="solution-text-box ">
174		- <h3 class="text-box-title mb10">주요기능</h3>
175		- <p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
176		- <p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
177		- <p>- 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
178		- <p>- 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
179		- </div>
180		- <div class="solution-text-box">
181		- <h3 class="text-box-title mb10">특장점</h3>
182		- <div class="flex" style="gap: 30px; flex-wrap: nowrap;">
183		- <div class="flex-column">
184		- <p>- 횡단보도 관제 분석 시스템 구축</p>
185		- <p>- 현장모니터링 화면 구성</p>
186		- </div>
187		- <div class="flex-column">
188		- <p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
189		- <p>- GIS 기반 관제 화면 구성</p>
190		- </div>
	161	+ <div class="text-after solution-area-two">
	162	+ <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
	163	+ </div>
	164	+ <div class="solution-text-box ">
	165	+ <h3 class="text-box-title mb10">주요기능</h3>
	166	+ <p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
	167	+ <p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
	168	+ <p>- 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
	169	+ <p>- 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
	170	+ </div>
	171	+ <div class="solution-text-box">
	172	+ <h3 class="text-box-title mb10">특장점</h3>
	173	+ <div class="flex" style="gap: 30px; flex-wrap: nowrap;">
	174	+ <div class="flex-column">
	175	+ <p>- 횡단보도 관제 분석 시스템 구축</p>
	176	+ <p>- 현장모니터링 화면 구성</p>
	177	+ </div>
	178	+ <div class="flex-column">
	179	+ <p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
	180	+ <p>- GIS 기반 관제 화면 구성</p>
191	181	</div>
192	182	</div>
193	183	</div>
...	...	@@ -197,54 +187,52 @@
197	187	</div>
198	188	<div class="swiper-slide meta-wrap">
199	189	<div class=" text-area pb60 slide-section flex align-center">
200		- <div class="text-area flex">
201		- <div class="meta-title">
202		- <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
	190	+ <div class="meta-title">
	191	+ <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
	192	+ </div>
	193	+
	194	+
	195	+ <div class=" video-wrap">
	196	+ <div class="traffic-video">
	197	+ <div class="flex justify-between mb10 ">
	198	+ <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
	199	+ <p class="close-btn">x</p>
	200	+ </div>
	201	+ <video src="../../resources/img/common/hanti.mp4" autoplay muted controls></video>
203	202	</div>
	203	+ </div>
	204	+ <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
	205	+
	206	+ <div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
	207	+ <div class="text-after ">
	208	+ <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
	209	+
	210	+ </div>
	211	+ <div class="solution-text-box" style="padding: 15px 33px;">
	212	+ <h3 class="text-box-title mb10">주요기능</h3>
	213	+ <p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
	214	+ <p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
	215	+ <p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
	216	+ </div>
	217	+ <div class="solution-text-box">
	218	+ <h3 class="text-box-title mb10">특장점</h3>
	219	+
	220	+ <p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
	221	+ <p>- 실시간 채팅 및 방명록 기능 탑재</p>
	222	+ <p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
204	223
205	224
206		- <div class=" video-wrap">
207		- <div class="traffic-video">
208		- <div class="flex justify-between mb10 ">
209		- <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
210		- <p class="close-btn">x</p>
211		- </div>
212		- <video src="../../resources/img/common/hanti.mp4" autoplay muted controls></video>
213	225	</div>
214	226	</div>
215		- <div class="flex justify-between align-end taken-wrap-box"
216		- style="flex-wrap: nowrap; gap: 20px;">
217		-
218		- <div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
219		- <div class="text-after ">
220		- <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
221		-
222		- </div>
223		- <div class="solution-text-box" style="padding: 15px 33px;">
224		- <h3 class="text-box-title mb10">주요기능</h3>
225		- <p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
226		- <p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
227		- <p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
228		- </div>
229		- <div class="solution-text-box">
230		- <h3 class="text-box-title mb10">특장점</h3>
231		-
232		- <p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
233		- <p>- 실시간 채팅 및 방명록 기능 탑재</p>
234		- <p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
235		-
236		-
237		- </div>
	227	+ <div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
	228	+ <div class="flex justify-end traffic-button">
	229	+ <button class="traffic-btn">영상보기</button>
238	230	</div>
239		- <div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
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;">
244		- <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
245		- <p>가상과 현실공간을<br>연결하는 플랫폼</p>
246		- <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
247		- </div>
	231	+ <img src="../../resources/img/common/meta-img.png" alt="" class="mb30"
	232	+ style="height: 250px;">
	233	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	234	+ <p>가상과 현실공간을<br>연결하는 플랫폼</p>
	235	+ <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
248	236	</div>
249	237	</div>
250	238	</div>
...	...	@@ -252,37 +240,35 @@
252	240	</div>
253	241	<div class="swiper-slide">
254	242	<div class=" text-area pb60 slide-section flex align-center">
255		- <div class="text-area flex">
256		- <div class="smart-title ">
257		- <p>스마트제조 데이터 모니터링 서비스</p>
258		- </div>
259		- <div class="flex justify-between align-end taken-wrap-box"
260		- style="flex-wrap: nowrap; gap: 20px;">
261		- <div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
262	243
263		- <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
264		- <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
265		- <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
266		- <p>웹 및 앱 모니터링<br> 시스템 구축</p>
267		- </div>
	244	+ <div class="smart-title ">
	245	+ <p>스마트제조 데이터 모니터링 서비스</p>
	246	+ </div>
	247	+ <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
	248	+ <div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
	249	+
	250	+ <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
	251	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	252	+ <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
	253	+ <p>웹 및 앱 모니터링<br> 시스템 구축</p>
268	254	</div>
269		- <div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
	255	+ </div>
	256	+ <div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
270	257
271		- <div class="text-after">
272		- <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
273		- </div>
274		- <div class="solution-text-box">
275		- <h3 class="text-box-title mb10">주요기능</h3>
276		- <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
277		- <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
278		- <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
279		- </div>
280		- <div class="solution-text-box">
281		- <h3 class="text-box-title mb10">특장점</h3>
282		- <p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
283		- <p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
284		- <p>현재 공정 과정 모니터링 기능</p>
285		- </div>
	258	+ <div class="text-after">
	259	+ <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
	260	+ </div>
	261	+ <div class="solution-text-box">
	262	+ <h3 class="text-box-title mb10">주요기능</h3>
	263	+ <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
	264	+ <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
	265	+ <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
	266	+ </div>
	267	+ <div class="solution-text-box">
	268	+ <h3 class="text-box-title mb10">특장점</h3>
	269	+ <p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
	270	+ <p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
	271	+ <p>현재 공정 과정 모니터링 기능</p>
286	272	</div>
287	273	</div>
288	274	</div>

91d397a

e768fe7

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html


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

Add a comment

Open 0
Closed 0

List

...	...	@@ -8,6 +8,7 @@
8	8	padding-top: 6rem;
9	9	text-align: center;
10	10	}
	11	+
11	12	.mobil-wrap{
12	13	display: none;
13	14	}
...	...	@@ -1301,8 +1302,9 @@
1301	1302	}
1302	1303
1303	1304	.customized-box p {
1304		- font-size: 2rem;
1305		- font-weight: 500;
	1305	+ font-size: 1.5rem;
	1306	+ font-family: 'Pretendard';
	1307	+ font-weight: 600;
1306	1308	}
1307	1309
1308	1310	.etc-wrap-title h1 {
...	...	@@ -1318,9 +1320,13 @@
1318	1320	object-fit: contain;
1319	1321	}
1320	1322
1321		-.etc-box-title p {
	1323	+.etc-box-title{
1322	1324	font-weight: 900;
1323		- font-size: 2.5rem !important;
	1325	+ text-align: center !important;
	1326	+ font-size: 2.2rem !important;
	1327	+}
	1328	+.etc-box p{
	1329	+ text-align: left;
1324	1330	}
1325	1331
1326	1332	.etc-box p {

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

...	...	@@ -32,6 +32,7 @@
32	32	font-size: 2.2rem !important;
33	33	}
34	34
	35	+
35	36	.solution-title p,
36	37	.traffic-title p,
37	38	.ai-title p,
...	...	@@ -45,6 +46,7 @@
45	46	.solution-sub-text {
46	47	font-size: 1rem !important;
47	48	}
	49	+
48	50
49	51	.solution-box {
50	52	width: 100%;
...	...	@@ -60,7 +62,13 @@
60	62	}
61	63
62	64	.slide-solution .portfolio-text {
63		- padding: 6rem 1rem;
	65	+ padding: 0rem 1rem;
	66	+ }
	67	+ #contentHeadquarter{
	68	+ height: 350px;
	69	+ }
	70	+ #map1,#map2 {
	71	+ width: 100% !important;
64	72	}
65	73
66	74	.box:hover {
...	...	@@ -185,10 +193,7 @@
185	193	font-size: 1.8rem;
186	194	}
187	195
188		- #contentDaeguBranch {
189		- width: 100%;
190		- height: 100%;
191		- }
	196	+
192	197
193	198	.root_daum_roughmap_landing {
194	199	width: 100% !important;
...	...	@@ -258,15 +263,17 @@
258	263	.footer-text div p,
259	264	.footer-text p {
260	265	width: 100%;
	266	+ font-size: 1.2rem;
261	267	padding-left: 0px !important;
262	268	}
263	269
264	270	.about-wrap {
265	271	width: 100%;
266		- padding: 0px;
267		- padding-top: 50px;
	272	+ padding: 9rem 2rem;
268	273	}
269		-
	274	+ .container{
	275	+ width: 100%;
	276	+ }
270	277	.about-title-sub {
271	278	font-size: 1.2rem;
272	279	}
...	...	@@ -275,11 +282,15 @@
275	282	flex-wrap: nowrap;
276	283	width: 100%;
277	284	height: 10%;
	285	+ margin-bottom: 10px !important;
278	286	flex-direction: column;
279	287	gap: 10px !important;
280	288	}
281	289
282	290	.about-area p {
	291	+ font-size: 1.2rem;
	292	+ }
	293	+ .month-text p{
283	294	font-size: 1.2rem;
284	295	}
285	296
...	...	@@ -303,18 +314,13 @@
303	314	display: none;
304	315	}
305	316
306		- .about-title {
307		- margin-top: 60px;
308		- height: 20%;
309		- margin-bottom: 1rem !important;
310		- }
311	317
312	318	.about-text {
313	319	font-size: 1.5rem;
314	320	}
315	321
316	322	.silde-box {
317		- height: 60%;
	323	+ height: 75%;
318	324	display: flex;
319	325	flex-direction: column;
320	326	}
...	...	@@ -350,7 +356,9 @@
350	356	.slideTextDtail div div {
351	357	display: none;
352	358	}
353		-
	359	+ .about-title{
	360	+ margin-bottom: 1rem !important;
	361	+ }
354	362
355	363
356	364	.about img {
...	...	@@ -363,8 +371,8 @@
363	371	}
364	372
365	373	.about-vision-box img {
366		- width: 100%;
367		- height: 100%;
	374	+ height: 149px;
	375	+ display: block;
368	376	object-fit: contain;
369	377	}
370	378
...	...	@@ -414,16 +422,7 @@
414	422	.ai-area img {
415	423	opacity: 0;
416	424	}
417		-
418		- .solution-title,
419		- .traffic-title,
420		- .ai-title,
421		- .meta-title,
422		- .smart-title {
423		- height: 15%;
424		- padding-top: 5rem;
425		- margin-bottom: 1rem !important;
426		- }
	425	+
427	426
428	427	.taken-box {
429	428	width: 100%;
...	...	@@ -449,7 +448,9 @@
449	448	}
450	449
451	450
452		-
	451	+ .solution-title::after, .traffic-title::after, .ai-title::after, .meta-title::after, .smart-title::after{
	452	+ display: none;
	453	+ }
453	454	.solution-area {
454	455
455	456	gap: 40px !important;
...	...	@@ -468,10 +469,30 @@
468	469	gap: 0px !important;
469	470	}
470	471
471		- .solution-text-box div div {
472		- flex-direction: row;
	472	+ .solution-text-box div div p{
	473	+ width: 100%;
	474	+
	475	+ /* flex-direction: row; */
473	476	}
474		-
	477	+ .etc-wrap-text,.box-wrap{
	478	+ width: 100%;
	479	+ flex-direction: column;
	480	+ }
	481	+ .etc-wrap-text div,.box-wrap div{
	482	+ width: 100%;
	483	+ border-radius: 5px;
	484	+ border: 1px solid #333333;
	485	+ margin-bottom: 5px;
	486	+ }
	487	+ .box-wrap div{
	488	+ padding: 2rem 0;
	489	+ }
	490	+ .etc-wrap-text div img,.box-wrap div img{
	491	+ display: none;
	492	+ }
	493	+ .etc-wrap-text p,.box-wrap p{
	494	+ font-size: 1rem;
	495	+ }
475	496	.text-box-title::after {
476	497	left: -5px;
477	498	top: -1px;
...	...	@@ -522,27 +543,25 @@
522	543
523	544	.customized-wrap-title {
524	545	margin-top: 50px;
525		- margin-bottom: 1rem;
526		- height: 100%;
	546	+ margin-bottom: 1rem ;
527	547	}
528	548
529	549	.etc-wrap-title h1 {
530	550	padding-top: 0rem;
	551	+ }
	552	+ .etc-box-title{
	553	+ font-weight: 900;
	554	+ text-align: center !important;
	555	+ font-size: 2.2rem !important;
	556	+ }
	557	+ .etc-box p{
	558	+ text-align: left;
531	559	}
532	560
533	561	.box-grid {
534	562	grid-template-columns: 1fr 1fr 1fr !important;
535	563	}
536	564
537		- .box-wrap {
538		- width: 100% !important;
539		- height: 100%;
540		- gap: 10px !important;
541		- margin-bottom: 0px;
542		- display: grid !important;
543		- grid-template-columns: 1fr;
544		- flex-direction: column;
545		- }
546	565
547	566	.box-wrap img {
548	567	width: 100%;
...	...	@@ -550,16 +569,17 @@
550	569	object-fit: contain;
551	570	}
552	571
553		- .box-wrap div {
554		- height: 100%;
555		- }
556		-
	572	+
557	573	.box-wrap div p {
558	574	padding: 1px;
559	575	margin-bottom: 0rem !important;
560	576	font-size: 1rem !important;
561	577	}
562		-
	578	+ .etc-box-title{
	579	+ font-weight: 900;
	580	+ text-align: center !important;
	581	+ font-size: 2.2rem !important;
	582	+ }
563	583	.box-wrap div div {
564	584	display: none;
565	585	height: 37% !important;
...	...	@@ -817,10 +837,7 @@
817	837	font-size: 1.8rem;
818	838	}
819	839
820		- #contentDaeguBranch {
821		- width: 100%;
822		- height: 100%;
823		- }
	840	+
824	841
825	842	.root_daum_roughmap_landing {
826	843	width: 100% !important;
...	...	@@ -1055,6 +1072,34 @@
1055	1072	padding-top: 5rem;
1056	1073	margin-bottom: 0rem !important;
1057	1074	}
	1075	+ .etc-wrap-text,.box-wrap{
	1076	+ width: 100%;
	1077	+ display: grid;
	1078	+ grid-template-columns: 1fr 1fr 1fr;
	1079	+ gap: 5px;
	1080	+ }
	1081	+ .etc-grid-box{
	1082	+ grid-template-columns: 1fr 1fr;
	1083	+ }
	1084	+
	1085	+ /* .etc-grid-box p{height: 100px !important;} */
	1086	+
	1087	+ .etc-wrap-text div,.box-wrap div{
	1088	+ width: 100%;
	1089	+ border-radius: 5px;
	1090	+ margin-bottom: 5px;
	1091	+ }
	1092	+ .etc-wrap-text div img,.box-wrap div img{
	1093	+ width: 100% !important;
	1094	+ }
	1095	+ .box-wrap div{
	1096	+ padding: 2rem 0;
	1097	+ }
	1098	+
	1099	+ .etc-wrap-text p,.box-wrap p{
	1100	+ font-size: 1rem;
	1101	+ /* height: 50px; */
	1102	+ }
1058	1103
1059	1104	.taken-box {
1060	1105	width: 100%;
...	...	@@ -1148,7 +1193,6 @@
1148	1193	.etc-wrap-title {
1149	1194	margin-top: 50px;
1150	1195	margin-bottom: 1rem;
1151		- height: 100%;
1152	1196	}
1153	1197
1154	1198	.etc-wrap-title h1 {
...	...	@@ -1158,37 +1202,12 @@
1158	1202	.box-grid {
1159	1203	grid-template-columns: 1fr 1fr 1fr !important;
1160	1204	}
1161		-
1162		- .box-wrap {
1163		- width: 100% !important;
1164		- height: 100%;
1165		- gap: 10px !important;
1166		- margin-bottom: 0px;
1167		- display: grid !important;
1168		- grid-template-columns: 1fr 1fr 1fr 1fr;
1169		- flex-direction: column;
	1205	+ .box-wrap div div p{
	1206	+ font-size: 1.1rem !important;
1170	1207	}
1171	1208
1172		- .box-wrap img {
1173		- width: 100%;
1174		- padding-bottom: 0rem !important;
1175		- object-fit: contain;
1176		- }
1177		-
1178		- .box-wrap div {
1179		- height: 100%;
1180		- }
1181		-
1182		- .box-wrap div p {
1183		- padding: 1px;
1184		- margin-bottom: 0rem !important;
1185		- font-size: 1rem !important;
1186		- }
1187		-
1188		- .box-wrap div div {
1189		- display: none;
1190		- height: 37% !important;
1191		- }
	1209	+
	1210	+
1192	1211
1193	1212	.etc-wrap-title h1,
1194	1213	.customized-wrap-title h1 {
...	...	@@ -1200,10 +1219,6 @@
1200	1219	font-size: 1.2rem !important;
1201	1220	}
1202	1221
1203		- .etc-wrap-title {
1204		- height: 100%;
1205		- margin-bottom: 10px !important;
1206		- }
1207	1222
1208	1223	.customized-box {
1209	1224	width: 100%;
...	...	@@ -1407,9 +1422,11 @@
1407	1422	color: #333;
1408	1423	font-size: 1.2rem !important;
1409	1424	}
	1425	+
1410	1426	nav {
1411	1427	display: none;
1412	1428	}
	1429	+
1413	1430	nav>ul {
1414	1431	background-color: #fff;
1415	1432	border-bottom: 1px solid #333;
...	...	@@ -1432,10 +1449,11 @@
1432	1449	width: 29px;
1433	1450	}
1434	1451
1435		- .solution-web-box{
	1452	+ .solution-web-box {
1436	1453	display: grid !important;
1437	1454	grid-template-columns: 1fr 1fr;
1438	1455	}
	1456	+
1439	1457	.swiper {
1440	1458	width: 50%;
1441	1459	height: 100%;
...	...	@@ -1716,7 +1734,8 @@
1716	1734	.taken-area img,
1717	1735	.traffic-area img,
1718	1736	.ai-area img {
1719		-height: 20px; }
	1737	+ height: 20px;
	1738	+ }
1720	1739
1721	1740	.solution-title,
1722	1741	.traffic-title,

...	...	@@ -63,7 +63,7 @@
63	63	</div>
64	64	</div>
65	65	<div class="swiper-slide">
66		- <div class="taken-wrap slide-solution ">
	66	+ <div class="taken-wrap slide-solution slide-wrap">
67	67	<div class="text-area flex">
68	68	<div class="about-title mb20" style="width: 100%;">
69	69	<p class="mb20">Business</p>
...	...	@@ -169,10 +169,10 @@
169	169	<p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
170	170	매출을 확대해 나갑니다.
171	171	</p>
172		- <div class="flex justify-center about-vision-box">
173		- <img src="../../resources/img/common/about-img5.png" alt="">
174		- <img src="../../resources/img/common/about-img4.png" alt="">
175		- </div>
	172	+ </div>
	173	+ <div class="flex justify-center about-vision-box">
	174	+ <img src="../../resources/img/common/about-img5.png" alt="">
	175	+ <img src="../../resources/img/common/about-img4.png" alt="">
176	176	</div>
177	177	</div>
178	178	</div>
...	...	@@ -562,7 +562,7 @@
562	562	targetArea.addEventListener('mouseleave', function () {
563	563	swiper.mousewheel.enable();
564	564	console.log('벗어남');
565		-
	565	+
566	566	});
567	567	$(function () {
568	568	$("#header").load("../layout/Header.html");
...	...	@@ -653,7 +653,6 @@
653	653
654	654	.container {
655	655	width: 1200px;
656		- height: 50px;
657	656	display: flex;
658	657	flex-wrap: nowrap;
659	658	border-radius: 20px;

...	...	@@ -22,7 +22,7 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area slide-section flex align-center">
	25	+ <div class=" text-area pb60 slide-section flex align-center">
26	26
27	27
28	28	<div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">

...	...	@@ -22,39 +22,27 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class="taken-wrap " style=" height: 100%;">
	25	+ <div class=" text-area pb60 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 mb30">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="etc-wrap-title mb30">
31	31	<h1 class="mb20">기타사례</h1>
32	32	</div>
33		- <div class="flex justify-between customized-box" style="width: 100%; gap: 20px;">
	33	+ <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 20px; ">
34	34	<div class="etc-box">
35		- <div class="mb20">
36	35	<img src="../../resources/img/common/etc-img.png" alt="">
37		- </div>
38		- <div class="etc-box-title mb20">
39		- <p>정부혁신 웹사이트 기능개선 및 유지관리</p>
40		- </div>
41		- <div style="text-align: left;">
	36	+ <p class="etc-box-title">정부혁신 웹사이트 기능개선 및 유지관리</p>
42	37	<p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
43	38	<p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
44	39	<p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
45		- </div>
46	40	</div>
47	41	<div class="etc-box">
48		- <div class="mb20">
49	42	<img src="../../resources/img/common/etc-img2.png" alt="">
50		- </div>
51		- <div class="etc-box-title mb20">
52		- <p>AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
53		- </div>
54		- <div style="text-align: left;">
	43	+ <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
55	44	<p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
56	45	<p>- AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
57		- </div>
58	46	</div>
59	47
60	48	</div>

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

Delete comment