Commit @b032dd18ac152d8e63954677c2ff89a0ec7a4901

mycoms 2024-04-11

240411 김하영

@b032dd18ac152d8e63954677c2ff89a0ec7a4901

efa3073

b032dd1

resources/css/common.css

--- resources/css/common.css

+++ resources/css/common.css


 .pt100 {
     padding-top: 10rem;
 }
+.pt120 {
+    padding-top: 12rem;
+}
 
 .pb0 {
     padding-bottom: 0;

efa3073

b032dd1

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


     .map-text,
     .about-title p:nth-child(1) {
         font-size: 2.5rem !important;
+        padding-bottom: 1rem;
     }
 
 

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

 
     .slide-wrap {
         width: 100%;
-        height: 100% !important;
     }
 
     .text-area {

         font-size: 1.2rem;
     }
 
+    .taken-area p{
+        font-size: 1.5rem;
+    }
+
     .traffic-button {
         justify-content: center;
     }

         padding-bottom: 0rem !important;
         object-fit: contain;
     }
-
+    .solution-title, .traffic-title, .ai-title, .meta-title, .smart-title{
+        margin-bottom: 10px !important;
+    }
 
     .box-wrap div p {
         text-align: center;

efa3073

b032dd1

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     text-align: center;
 }
 
-.mobil-wrap{
+.mobil-wrap {
     display: none;
 }
-.mobil-menu{
+
+.mobil-menu {
     display: none;
 }
+
 #header.active {
     border-bottom: 1px solid #ced4da;
     background-color: white;

     color: #333;
     display: block;
 }
+
 #header.active .header .mobil-menu ul {
     background-color: #fff;
 }
+
 .slide-back {
     background: url(../img/common/main-2.png)no-repeat;
     width: 0;

 .solution-ani:nth-child(3) {
     animation-delay: 0.5s;
 }
+
 .solution-ani:nth-child(4) {
     animation-delay: 0.7s;
 }

 .solution-ani:nth-child(6) {
     animation-delay: 1s;
 }
+
 .solution-ani:nth-child(7) {
     animation-delay: 1.2s;
 }
+
 .solution-ani:nth-child(8) {
     animation-delay: 1.4s;
 }

 }
 
 .solution-text.active {
+    opacity: 1;
+    height: 100%;
 
-    -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
-    animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+    transition: all 1s ease;
+    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 
 
 }

     animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 }
 
+@keyframes tracking-in-expand {
+    0% {
+      letter-spacing: -0.5em;
+      opacity: 0;
+    }
+    40% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 
 .solution-box {
     flex-wrap: nowrap;

 .ivory-box div p:nth-child(1) {
     color: #242a30;
 }
-.traffic-btn:hover{
+
+.traffic-btn:hover {
     transform: scale(1.1);
     transition: all 0.5s ease;
 }
+
 .hvr-grow {
     display: inline-block;
     vertical-align: middle;

 
 
 
-/* .slide1 ,.slide2,.slide3,.slide4,.slide5,.slide6{
-    border-radius: 10px;
-    width: 100%;
-    height: 400px;
-    box-shadow: 2px 2px 5px #5454541b;
-    background-color: #F8F9FA;
-
-} */
 
 
 .innerSwiper-textBox {

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

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

 
 
 .taken-area p {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     font-weight: 600;
     padding-left: 20px;
 }

     background-color: #F8F9FA;
     padding: 13px;
     text-align: center;
-    font-size: 1.6rem;
+    font-size: 2rem;
     border-radius: 10px;
     font-weight: 600;
+    z-index: 2;
 }
 
 .solution-text-box {
     width: 100%;
-    padding: 15px 40px;
+    padding: 15px 30px;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 2px 2px 5px #3e3e3e30;

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

     color: #fff;
     border-radius: 50px;
     font-weight: 600;
-    font-size: 1.5rem;
+    font-size: 1.8rem;
     font-family: 'Pretendard';
     position: relative;
 

     background-size: cover;
     width: 30%;
     height: 70%;
-    z-index: -1;
 }
 
 .marketing-wrapper {

 
 .customized-box p {
     font-size: 1.5rem;
-	font-family: 'Pretendard';
+    font-family: 'Pretendard';
     font-weight: 600;
 }
 

     object-fit: contain;
 }
 
-.etc-box-title{
+.etc-box-title {
     font-weight: 600;
     text-align: center !important;
     font-size: 2.2rem !important;
 }
-.etc-box p{
+
+.etc-box p {
     text-align: left;
 }
-.Portfolio{
+
+.Portfolio {
     margin: auto;
     align-content: center;
     padding-top: 6rem;
     text-align: center;
 }
+
 .etc-box p {
     font-size: 1.8rem;
     line-height: 2;

     z-index: 1111;
     background-color: #242a305e;
 }
-.mobil-swiper{
+
+.mobil-swiper {
     display: none;
 }
+
 .traffic-video {
     position: absolute;
     top: 50%;
-    transform: translate(-50% ,-50%);
+    transform: translate(-50%, -50%);
     left: 50%;
     z-index: 111;
     width: 50%;

 }
 
 .traffic-video p {
-    font-size:3rem;
+    font-size: 3rem;
     color: #213F99;
     font-weight: 600;
 }

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

efa3073

b032dd1

views/index.html

--- views/index.html

+++ views/index.html

...	...	@@ -13,7 +13,170 @@
13	13	<link rel="stylesheet" href="../../resources/css/responsive.css">
14	14	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
15	15
16		-
	16	+ <style scoped>
	17	+ #footer{
	18	+ bottom: 0%;
	19	+ }
	20	+
	21	+ .footer-img{
	22	+ text-align: left;
	23	+ }
	24	+
	25	+ #header {
	26	+ position: fixed;
	27	+ top: 0;
	28	+ z-index: 3;
	29	+ }
	30	+
	31	+ .dropdown {
	32	+ opacity: 0;
	33	+ visibility: hidden;
	34	+ position: absolute;
	35	+ top: 35px;
	36	+ right: 0;
	37	+ width: 100%;
	38	+ margin: 0 auto;
	39	+ text-align: center;
	40	+ background-color: #ffffff43;
	41	+ transition: opacity 0.3s ease, visibility 0.3s ease;
	42	+ z-index: 1;
	43	+ }
	44	+
	45	+
	46	+ html,
	47	+ body {
	48	+ position: relative;
	49	+ height: 100%;
	50	+ -ms-overflow-style: none;
	51	+
	52	+ }
	53	+
	54	+ .mobile-menu-button,
	55	+ .mobile-menu-button-close {
	56	+ font-size: 2rem;
	57	+ color: #fff;
	58	+ height: 29px;
	59	+ width: 29px;
	60	+ }
	61	+
	62	+ .mobil-menu {
	63	+ width: 100%;
	64	+ height: 100%;
	65	+ top: 40px;
	66	+ }
	67	+
	68	+ .mobil-menu ul {
	69	+ list-style: none;
	70	+ margin: 0;
	71	+ background-color: #ffffff43;
	72	+ }
	73	+
	74	+ .mobil-menu ul li ul li a {
	75	+ font-weight: 500;
	76	+ color: #fff;
	77	+ font-size: 1.2rem !important;
	78	+ }
	79	+
	80	+ ::-webkit-scrollbar {
	81	+ display: none;
	82	+ }
	83	+
	84	+
	85	+ .swiper {
	86	+ width: 100%;
	87	+ height: 100%;
	88	+ }
	89	+
	90	+ .swiper-slide {
	91	+ text-align: center;
	92	+ font-size: 18px;
	93	+ background: #fff;
	94	+ justify-content: center;
	95	+ align-items: center;
	96	+ }
	97	+
	98	+
	99	+
	100	+ .slide-wrap {
	101	+ width: 100%;
	102	+ height: 100%;
	103	+ }
	104	+
	105	+ .main-wrap {
	106	+ background: url(../resources/img/common/main.png) no-repeat;
	107	+ width: 100%;
	108	+ height: 100%;
	109	+ background-size: cover;
	110	+ background-position: bottom;
	111	+ }
	112	+
	113	+
	114	+ .main-text {
	115	+ padding-bottom: 50px;
	116	+ }
	117	+
	118	+ .main-text h2 {
	119	+ width: 100%;
	120	+ height: 20%;
	121	+ }
	122	+
	123	+ .main-text div {
	124	+ width: 100%;
	125	+ }
	126	+
	127	+ .main-text div img {
	128	+ width: 30px;
	129	+ }
	130	+
	131	+ .main-wrap .text-area h2 {
	132	+ text-align: left;
	133	+ font-size: 6rem;
	134	+ font-weight: 600;
	135	+ color: white;
	136	+ font-family: 'Pretendard';
	137	+
	138	+ }
	139	+
	140	+ .main-wrap .text-area h2 span {
	141	+ font-weight: 900;
	142	+ }
	143	+
	144	+
	145	+
	146	+ .text-main {
	147	+ font-weight: 600;
	148	+ color: #213f99;
	149	+ font-family: 'Pretendard';
	150	+ font-size: 5rem;
	151	+
	152	+ }
	153	+
	154	+ .text-main span {
	155	+ color: #F29600;
	156	+
	157	+
	158	+ }
	159	+
	160	+
	161	+ .gradient-back {
	162	+ background: linear-gradient(#e9ebff, #fff, #fff);
	163	+ }
	164	+
	165	+ .gradient-bottom {
	166	+ background: linear-gradient(#fff, #fff, #e9ebff);
	167	+ }
	168	+
	169	+ .slide-solution {
	170	+ font-family: 'Pretendard';
	171	+
	172	+
	173	+ }
	174	+
	175	+ .innerSwiper {
	176	+ transition-timing-function: linear;
	177	+ }
	178	+ </style>
	179	+
17	180
18	181	<title>TAKENSOFT</title>
19	182	</head>
...	...	@@ -36,7 +199,7 @@
36	199	</div>
37	200	<div class="swiper-slide">
38	201	<div class="slide-wrap slide-back scale-in-br">
39		- <div class="text-area slide-section flex align-center justify-center pb60">
	202	+ <div class="text-area pt60 slide-section flex align-center justify-center pb60">
40	203	<div style="height: 20%;">
41	204	<p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
42	205	class="text-event">혁신으로 선도</span>합니다.</p>
...	...	@@ -47,7 +210,7 @@
47	210	</div>
48	211	<div class="swiper-slide gradient-back">
49	212	<div class="slide-wrap slide-solution ">
50		- <div class=" text-area pb60 slide-section flex align-center" style="align-content: center;">
	213	+ <div class=" text-area pt60 pb60 slide-section flex align-center" style="align-content: center;">
51	214	<div class="sub-text-area mb20" style="width: 100%;">
52	215	<p class=" solution-text pb30">테이큰 소프트는</p>
53	216	<p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
...	...	@@ -81,7 +244,7 @@
81	244	</div>
82	245	</div>
83	246	<div class="swiper-slide">
84		- <div class="slide-wrap pt90 pb90 slide-solution">
	247	+ <div class="slide-wrap pt120 pb60 slide-solution">
85	248	<div class=" Portfolio flex align-center" style="align-content: center; width: 100%;">
86	249	<div style="width: 1200px; margin: auto;">
87	250	<p class="portfolio-text mb20 ">PORTFOLIO</p>
...	...	@@ -149,8 +312,8 @@
149	312	</div>
150	313
151	314	</div>
152		- <div class="swiper-slide">
153		- <div class="slide-wrap pt60 pb60 slide-solution gradient-bottom ">
	315	+ <div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
	316	+ <div class="slide-wrap pt120 pb60 slide-solution gradient-bottom ">
154	317	<div class=" text-area pb60 flex align-center justify-center"
155	318	style="height: 100%; align-content: center;">
156	319	<div style="width: 100%;" class="sub-text-area">
...	...	@@ -181,8 +344,8 @@
181	344	</div>
182	345	</div>
183	346
	347	+ <div id="footer"></div>
184	348	</div>
185		- <div id="footer"></div>
186	349
187	350
188	351	</div>
...	...	@@ -279,21 +442,20 @@
279	442
280	443
281	444	var swiper1 = new Swiper(".mySwiper", {
	445	+ cssMode: true,
282	446	direction: "vertical",
283	447	slidesPerView: 1,
284	448	spaceBetween: 0,
285		- speed: 700,
286		- mousewheel: true,
	449	+ speed: 1000,
	450	+ mousewheel: {
	451	+ eventsTarget: '.swiper-slide'
	452	+ },
287	453	pagination: {
288	454	el: ".swiper-pagination",
289	455	clickable: true,
290		- }, slidesOffsetAfter: 220,
	456	+ },
291	457	on: {
292		- // fromEdge: function () {
293		- // document.querySelector('#footer').classList.add('on');
294		-
295		- // },
296		-
	458	+
297	459
298	460	slideChangeTransitionEnd: function () {
299	461	if (this.activeIndex === 1) {
...	...	@@ -316,21 +478,65 @@
316	478
317	479	}
318	480	},
	481	+ init: function () {
	482	+ const slides = document.querySelectorAll('.swiper-slide');
	483	+ slides.forEach(slide => {
	484	+ slide.addEventListener('wheel', function (e) {
	485	+ const delta = e.wheelDelta \|\| -e.deltaY;
	486	+ console.log(delta)
	487	+ // 슬라이드 내부에서 상단 또는 하단 경계에 도달했을 경우 Swiper 슬라이드 전환 허용
	488	+ if ((this.scrollTop === (this.scrollHeight - this.offsetHeight) && delta < 0) \|\| (this.scrollTop === 0 && delta > 0)) {
	489	+ e.stopPropagation();
	490	+ }
	491	+ }, { passive: false });
	492	+
	493	+
	494	+ });
	495	+ },
	496	+
319	497	slideChange: function () {
	498	+ if (this.activeIndex === 1) {
	499	+ $('.text-event').addClass('active');
	500	+ $('.sub-text').addClass('active');
	501	+ $('.slide-back').addClass('active');
	502	+ } else {
	503	+ $('.text-event').removeClass('active');
	504	+ $('.sub-text').removeClass('active');
	505	+ $('.slide-back').removeClass('active');
	506	+ }
	507	+ if (this.activeIndex === 2) {
	508	+ $('.solution-text').addClass('active');
	509	+ $('.solution-sub-text').addClass('active');
	510	+ $('.box').addClass('active');
	511	+ } else {
	512	+ $('.solution-text').removeClass('active');
	513	+ $('.solution-sub-text').removeClass('active');
	514	+ $('.box').removeClass('active');
	515	+
	516	+ }
320	517	var currentIndex = this.realIndex;
321	518	if (currentIndex === 0) {
322	519	$('#header').removeClass('active');
323	520	} else {
324	521	$('#header').addClass('active');
325	522	}
	523	+ const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
	524	+ const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
	525	+ const footer = document.getElementById('footer'); // 푸터 요소 선택
326	526
327		-
328		- },
329		- reachEnd: function () {
330		- swiper1.mousewheel.disable();
	527	+ if (isLastSlide) {
	528	+ // 마지막 슬라이드에 도달했을 때 푸터 표시
	529	+ footer.style.display = 'block';
	530	+ } else {
	531	+ // 마지막 슬라이드가 아닐 때 푸터 숨기기 (필요한 경우)
	532	+ footer.style.display = 'none';
	533	+ }
331	534	},
332	535
333		- }
	536	+ },
	537	+
	538	+
	539	+
334	540	});
335	541
336	542	window.addEventListener('load', () => {
...	...	@@ -363,7 +569,7 @@
363	569	},
364	570	loop: true,
365	571	speed: 5000,
366		- loopAdditionalSlides: 1,
	572	+ // loopAdditionalSlides: 1,
367	573	activeIndexChange: function () {
368	574
369	575	}, on: {
...	...	@@ -402,169 +608,5 @@
402	608
403	609
404	610
405		-<style scoped>
406		- .footer-text p {
407		- font-size: 1.3rem;
408		- }
409		-
410		- .copyright {
411		- font-size: 1.3rem;
412		- }
413		-
414		- #header {
415		- position: fixed;
416		- top: 0;
417		- z-index: 3;
418		- }
419		-
420		- .dropdown {
421		- opacity: 0;
422		- visibility: hidden;
423		- position: absolute;
424		- top: 35px;
425		- right: 0;
426		- width: 100%;
427		- margin: 0 auto;
428		- text-align: center;
429		- background-color: #ffffff43;
430		- transition: opacity 0.3s ease, visibility 0.3s ease;
431		- z-index: 1;
432		- }
433		-
434		-
435		- html,
436		- body {
437		- position: relative;
438		- height: 100%;
439		- -ms-overflow-style: none;
440		-
441		- }
442		-
443		- .mobile-menu-button,
444		- .mobile-menu-button-close {
445		- font-size: 2rem;
446		- color: #fff;
447		- height: 29px;
448		- width: 29px;
449		- }
450		-
451		- .mobil-menu {
452		- width: 100%;
453		- height: 100%;
454		- top: 40px;
455		- }
456		-
457		- .mobil-menu ul {
458		- list-style: none;
459		- margin: 0;
460		- background-color: #ffffff43;
461		- }
462		-
463		- .mobil-menu ul li ul li a {
464		- font-weight: 500;
465		- color: #fff;
466		- font-size: 1.2rem !important;
467		- }
468		-
469		- ::-webkit-scrollbar {
470		- display: none;
471		- }
472		-
473		-
474		- .swiper {
475		- width: 100%;
476		- height: 100%;
477		- }
478		-
479		- .swiper-slide {
480		- text-align: center;
481		- font-size: 18px;
482		- background: #fff;
483		- display: flex;
484		- justify-content: center;
485		- align-items: center;
486		- }
487		-
488		-
489		-
490		- .slide-wrap {
491		- width: 100%;
492		- height: 100%;
493		- }
494		-
495		- .main-wrap {
496		- background: url(../resources/img/common/main.png) no-repeat;
497		- width: 100%;
498		- height: 100%;
499		- background-size: cover;
500		- background-position: bottom;
501		- }
502		-
503		-
504		- .main-text {
505		- padding-bottom: 50px;
506		- }
507		-
508		- .main-text h2 {
509		- width: 100%;
510		- height: 20%;
511		- }
512		-
513		- .main-text div {
514		- width: 100%;
515		- }
516		-
517		- .main-text div img {
518		- width: 30px;
519		- }
520		-
521		- .main-wrap .text-area h2 {
522		- text-align: left;
523		- font-size: 6rem;
524		- font-weight: 600;
525		- color: white;
526		- font-family: 'Pretendard';
527		-
528		- }
529		-
530		- .main-wrap .text-area h2 span {
531		- font-weight: 900;
532		- }
533		-
534		-
535		-
536		- .text-main {
537		- font-weight: 600;
538		- color: #213f99;
539		- font-family: 'Pretendard';
540		- font-size: 5rem;
541		-
542		- }
543		-
544		- .text-main span {
545		- color: #F29600;
546		-
547		-
548		- }
549		-
550		-
551		- .gradient-back {
552		- background: linear-gradient(#e9ebff, #fff, #fff);
553		- }
554		-
555		- .gradient-bottom {
556		- background: linear-gradient(#fff, #fff, #e9ebff);
557		- }
558		-
559		- .slide-solution {
560		- font-family: 'Pretendard';
561		-
562		-
563		- }
564		-
565		- .innerSwiper {
566		- transition-timing-function: linear;
567		- }
568		-</style>
569	611
570	612	</html> (No newline at end of file)

efa3073

b032dd1

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


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

efa3073

views/pages/AboutUs copy 2.html (deleted)

--- views/pages/AboutUs copy 2.html

...	...	@@ -1,550 +0,0 @@
	1	-<!DOCTYPE html>
	2	-<html lang="en">
	3	-
	4	-<head>
	5	- <meta charset="UTF-8">
	6	- <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	- <link rel="stylesheet" href="../../resources/css/reset.css">
	11	- <link rel="stylesheet" href="../../resources/css/style.css">
	12	- <link rel="stylesheet" href="../../resources/css/component.css">
	13	- <link rel="stylesheet" href="../../resources/css/common.css">
	14	- <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	-
	16	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	-
	18	-
	19	-
	20	-
	21	- <title>TAKENSOFT</title>
	22	-</head>
	23	-
	24	-<body>
	25	- <div id="header"></div>
	26	- <div class="section" id="section1">
	27	- <div class="about-wrap slide-wrap ">
	28	- <div class="flex">
	29	- <div class="about-title mb90" style="width: 100%;">
	30	- <p class="mb20">ABOUT US</p>
	31	- <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
	32	- </div>
	33	-
	34	- <div class=" flex justify-center about-area" style="width: 100%; gap: 190px; margin-bottom: 50px;">
	35	- <div class="about-radius-left solution-ani">
	36	- <p class="about-text">공감</p>
	37	- <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
	38	- </div>
	39	- <div class="about-radius solution-ani">
	40	- <p class="about-text">구현</p>
	41	- <p class="about-sub-text">가치를 주는 솔루션 도출</p>
	42	- </div>
	43	-
	44	- <div class="about-radius-right solution-ani">
	45	- <p class="about-text">생각</p>
	46	- <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
	47	- </div>
	48	- </div>
	49	- <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
	50	- <div class="about-radius-bottom-left ">
	51	- <p class="about-text">검증</p>
	52	- <p class="about-sub-text">결과물의 철저한 검증</p>
	53	- </div>
	54	- <div class="about-radius-bottom-right solution-ani">
	55	- <p class="about-text">소통</p>
	56	- <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
	57	- </div>
	58	-
	59	- </div>
	60	- </div>
	61	- </div>
	62	- </div>
	63	- <div class="section" id="section2">
	64	- <div class="text-area flex align-center justify-center pb60">
	65	- <div class="about-title mb20" style="width: 100%;">
	66	- <p class="mb20">Business</p>
	67	- <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
	68	- 해결합니다.</p>
	69	- </div>
	70	- <div class="container silde-box">
	71	- <div class="accordion flex justify-between"
	72	- style="background-image: url(../../resources/img/common/about-img1.png);">
	73	- <div class="slideText pl20">
	74	- <p class="accordion-num"><span>01.</span> AI Solution</p>
	75	- <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
	76	- </div>
	77	- <div class="slideImg">
	78	- <img src="../../resources/img/common/about-img-db.png" alt="">
	79	- </div>
	80	- <div class="slideTextDtail">
	81	- <div>
	82	- <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
	83	- <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
	84	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
	85	- 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
	86	- </div>
	87	- <div class=" flex justify-between" style="flex-wrap: nowrap;">
	88	- <div style="width: 20%;">
	89	- <p>[대표사례]</p>
	90	- </div>
	91	- <div class=" flex justify-between accordion-box">
	92	- <p>·도로 위험 감지 시스템</p>
	93	- <p>·경로 최적화 서비스</p>
	94	- <p>·안개 감지 시스템</p>
	95	- <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
	96	- </div>
	97	- </div>
	98	- </div>
	99	-
	100	-
	101	- </div>
	102	- <div class="accordion " style="background-image: url(../../resources/img/common/about-img2.png);">
	103	- <div class="slideText pl20">
	104	- <p class="accordion-num"><span>02.</span> System Design</p>
	105	- <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
	106	- </div>
	107	- <div class="slideImg">
	108	- <img src="../../resources/img/common/about-img-bg02.png" alt="">
	109	- </div>
	110	- <div class="slideTextDtail">
	111	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
	112	- 통해 고객사 최적화 UI 도출 </p>
	113	- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	114	- <div style="width: 20%;">
	115	- <p>[대표사례]</p>
	116	- </div>
	117	- <div class="flex-column">
	118	- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
	119	- <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
	120	- <p>· 경로 최적화 서비스</p>
	121	- <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
	122	- </div>
	123	- </div>
	124	- </div>
	125	- </div>
	126	- <div class="accordion" style="background-image: url(../../resources/img/common/about-img3.png);">
	127	- <div class="slideText pl20">
	128	- <p class="accordion-num"><span>03.</span> Data Science </p>
	129	- <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
	130	- </div>
	131	- <div class="slideImg">
	132	- <img src="../../resources/img/common/about-img-bg03.png" alt="">
	133	- </div>
	134	- <div class="slideTextDtail">
	135	- <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
	136	- <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
	137	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
	138	- 수요기관 및 기업 확장
	139	- </p>
	140	- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	141	- <div style="width: 20%;">
	142	- <p>[대표사례]</p>
	143	- </div>
	144	- <div class="flex-column">
	145	- <p>· 데이터 품질관리 컨설팅</p>
	146	- <p>· AI 안전통합 횡단보도 플랫폼</p>
	147	- </div>
	148	- </div>
	149	- </div>
	150	- </div>
	151	-
	152	-
	153	- </div>
	154	- </div>
	155	- </div>
	156	- <div class="section" id="section3">
	157	- <div class="text-area flex pb60">
	158	- <div class="about-title mb20" style="width: 100%;">
	159	- <p class="mb20">Vision</p>
	160	- <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
	161	- 매출을 확대해 나갑니다.
	162	- </p>
	163	- </div>
	164	- <div class="flex justify-center about-vision-box">
	165	- <img src="../../resources/img/common/about-img5.png" alt="">
	166	- <img src="../../resources/img/common/about-img4.png" alt="">
	167	- </div>
	168	- </div>
	169	- </div>
	170	- <div class="section" id="section4">
	171	- <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
	172	- <div class="text-area felx">
	173	- <div class="about-title mb20">
	174	- <p>History</p>
	175	- </div>
	176	- <div class="timeline flex align-center justify-between" style="gap: 0px;">
	177	- <div class="years" id="years">
	178	- <div class="year active-year" data-year="2021">2021</div>
	179	- <div class="year" data-year="2022">2022</div>
	180	- <div class="year" data-year="2023">2023</div>
	181	- </div>
	182	- <div class="contents" id="contents">
	183	- <div class="content" data-year="2021">
	184	- <div class="flex">
	185	- <p class="month mr30">5월</p>
	186	- <div class="month-text" style="text-align: left;">
	187	- <p>· 주식회사 테이큰 소프트 설립</p>
	188	- <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
	189	-
	190	- </div>
	191	- </div>
	192	- <div class="flex">
	193	- <p class="month mr30">10월</p>
	194	- <div class="month-text text-section" style="text-align: left;">
	195	- <p>· 소프트웨어 기업 등록</p>
	196	- <img src="../../resources/img/common/history-img1.png" alt="">
	197	- </div>
	198	- </div>
	199	- <div class="flex">
	200	- <p class="month mr30">11월</p>
	201	- <div class="month-text" style="text-align: left;">
	202	- <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
	203	- <p>· Taken BI Manager v1.0 저작권 등록</p>
	204	- <img src="../../resources/img/common/history-img2.png" alt="">
	205	- </div>
	206	- </div>
	207	- <div class="flex">
	208	- <p class="month mr30">12월</p>
	209	- <div class="month-text" style="text-align: left;">
	210	- <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
	211	- <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
	212	- <p>· 도로 모니터링 시스템 저작권 등록</p>
	213	- <div class="flex">
	214	- <img src="../../resources/img/common/history-img31.png" alt="">
	215	- <img src="../../resources/img/common/history-img32.png" alt="">
	216	- <img src="../../resources/img/common/history-img33.png" alt="">
	217	- </div>
	218	- </div>
	219	- </div>
	220	-
	221	-
	222	- </div>
	223	- <div class="content" data-year="2022">
	224	- <!-- 2021년 내용 -->
	225	- <div class="flex">
	226	- <p class="month mr30">1월</p>
	227	- <div class="month-text" style="text-align: left;">
	228	- <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
	229	- </div>
	230	- </div>
	231	- <div class="flex">
	232	- <p class="month mr30">3월</p>
	233	- <div class="month-text" style="text-align: left;">
	234	- <p>· 기업부설연구소 설립</p>
	235	- </div>
	236	- </div>
	237	- <div class="flex">
	238	- <p class="month mr30">4월</p>
	239	- <div class="month-text" style="text-align: left;">
	240	- <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
	241	- </div>
	242	- </div>
	243	- <div class="flex">
	244	- <p class="month mr30">5월</p>
	245	- <div class="month-text" style="text-align: left;">
	246	- <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
	247	- <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
	248	- </div>
	249	- </div>
	250	- <div class="flex">
	251	- <p class="month mr30">7월</p>
	252	- <div class="month-text" style="text-align: left;">
	253	- <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
	254	- </div>
	255	- </div>
	256	- <div class="flex">
	257	- <p class="month mr30">9월</p>
	258	- <div class="month-text" style="text-align: left;">
	259	- <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
	260	- </div>
	261	- </div>
	262	- <div class="flex">
	263	- <p class="month mr30">10월</p>
	264	- <div class="month-text" style="text-align: left;">
	265	- <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
	266	- </div>
	267	- </div>
	268	- <div class="flex">
	269	- <p class="month mr30">12월</p>
	270	- <div class="month-text" style="text-align: left;">
	271	- <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
	272	- <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
	273	- <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
	274	- <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
	275	- <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
	276	- <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
	277	- <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
	278	- <p>· 경로 생성 기술 관련 출원사실증명 </p>
	279	- <img src="../../resources/img/common/history-img4.png" alt="">
	280	-
	281	- </div>
	282	- </div>
	283	-
	284	- </div>
	285	- <div class="content" data-year="2023">
	286	- <!-- 2022년 내용 -->
	287	- <div class="flex">
	288	- <p class="month mr30">1월</p>
	289	- <div class="month-text" style="text-align: left;">
	290	- <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
	291	- <p>· 복약지도 장치 및 방법 출원사실증명 </p>
	292	- <p>· Traffic Agent 저작권 등록 </p>
	293	-
	294	- <div class="flex">
	295	- <img src="../../resources/img/common/history-img51.png" alt="">
	296	- <img src="../../resources/img/common/history-img52.png" alt="">
	297	- </div>
	298	-
	299	- </div>
	300	- </div>
	301	- <div class="flex">
	302	- <p class="month mr30">2월</p>
	303	- <div class="month-text" style="text-align: left;">
	304	- <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
	305	- <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
	306	- </div>
	307	- </div>
	308	- <div class="flex">
	309	- <p class="month mr30">3월</p>
	310	- <div class="month-text" style="text-align: left;">
	311	- <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
	312	- </div>
	313	- </div>
	314	- <div class="flex">
	315	- <p class="month mr30">4월</p>
	316	- <div class="month-text" style="text-align: left;">
	317	- <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
	318	- <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
	319	- <p>· 기업부설연구소 인정서 획득 </p>
	320	- <img src="../../resources/img/common/history-img6.png" alt="">
	321	-
	322	- </div>
	323	- </div>
	324	- <div class="flex">
	325	- <p class="month mr30">5월</p>
	326	- <div style="text-align: left;">
	327	- <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
	328	- </div>
	329	- </div>
	330	- <div class="flex">
	331	- <p class="month mr30">6월</p>
	332	- <div class="month-text" style="text-align: left;">
	333	- <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
	334	- <div class="flex">
	335	- <img src="../../resources/img/common/history-img71.png" alt="">
	336	- <img src="../../resources/img/common/history-img72.png" alt="">
	337	- </div>
	338	- </div>
	339	- </div>
	340	- <div class="flex">
	341	- <p class="month mr30">7월</p>
	342	- <div class="month-text" style="text-align: left;">
	343	- <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
	344	- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
	345	- </div>
	346	- </div>
	347	- <div class="flex">
	348	- <p class="month mr30">8월</p>
	349	- <div class="month-text" style="text-align: left;">
	350	- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	351	- <p>· 메타버스 기술 관련 출원사실증명</p>
	352	- <img src="../../resources/img/common/history-img8.png" alt="">
	353	- </div>
	354	- </div>
	355	- <div class="flex">
	356	- <p class="month mr30">9월</p>
	357	- <div class="month-text" style="text-align: left;">
	358	- <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
	359	- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	360	- <p>· 시니어 케어 시스템 저작권 등록</p>
	361	- <img src="../../resources/img/common/history-img9.png" alt="">
	362	-
	363	- </div>
	364	- </div>
	365	- <div class="flex">
	366	- <p class="month mr30">11월</p>
	367	- <div class="month-text" style="text-align: left;">
	368	- <p>· 한기술평가 우수기업 인증 (T-5)</p>
	369	- <p>· 통합 모빌리티 솔루션 저작권 등록</p>
	370	- <div class="flex">
	371	- <img src="../../resources/img/common/history-img100.png" alt="">
	372	- <img src="../../resources/img/common/history-img101.png" alt="">
	373	- </div>
	374	- </div>
	375	- </div>
	376	- <div class="flex">
	377	- <p class="month mr30">12월</p>
	378	- <div class="month-text" style="text-align: left;">
	379	- <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
	380	- <p>· 구미시 키워드 분석 용역 (구미시)</p>
	381	- <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
	382	- <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
	383	- <p>· AI 횡단보도 기술 관련 출원사실증명</p>
	384	- <img src="../../resources/img/common/history-img110.png" alt="">
	385	-
	386	-
	387	- </div>
	388	- </div>
	389	- </div>
	390	- <!-- 더 많은 내용 추가 -->
	391	- </div>
	392	- </div>
	393	- </div>
	394	- </div>
	395	- </div>
	396	- <!-- <footer id="footer"></footer> -->
	397	-
	398	-
	399	-
	400	-
	401	-
	402	-
	403	-</body>
	404	-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	405	-<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> -->
	406	-
	407	-
	408	-<script>
	409	- let startTouchY = 0;
	410	- let endTouchY = 0;
	411	- let currentSectionIndex = 0;
	412	- const sections = document.querySelectorAll('.section');
	413	-
	414	- function handleTouchStart(event) {
	415	- startTouchY = event.touches[0].clientY;
	416	- }
	417	-
	418	- function handleTouchMove(event) {
	419	- endTouchY = event.changedTouches[0].clientY;
	420	- }
	421	-
	422	- function handleTouchEnd() {
	423	- if (startTouchY > endTouchY + 100) {
	424	- // 아래로 스와이프
	425	- moveToNextSection();
	426	- } else if (startTouchY < endTouchY - 100) {
	427	- // 위로 스와이프
	428	- moveToPreviousSection();
	429	- }
	430	- }
	431	-
	432	- function moveToNextSection() {
	433	- if (currentSectionIndex < sections.length - 1) {
	434	- setTimeout(() => {
	435	- currentSectionIndex++;
	436	- scrollToSection(currentSectionIndex);
	437	- }, 100); // 500ms 딜레이를 추가
	438	- }
	439	- }
	440	-
	441	- function moveToPreviousSection() {
	442	- if (currentSectionIndex > 0) {
	443	- setTimeout(() => {
	444	- currentSectionIndex--;
	445	- scrollToSection(currentSectionIndex);
	446	- }, 100); // 500ms 딜레이를 추가
	447	- }
	448	- }
	449	- function scrollToSection(index) {
	450	- window.scrollTo({
	451	- top: window.innerHeight * index,
	452	- behavior: 'smooth'
	453	- });
	454	- }
	455	-
	456	- window.addEventListener('wheel', handleScroll, { passive: false });
	457	- window.addEventListener('touchstart', handleTouchStart, { passive: true });
	458	- window.addEventListener('touchmove', handleTouchMove, { passive: true });
	459	- window.addEventListener('touchend', handleTouchEnd, { passive: true });
	460	-
	461	- function handleScroll(event) {
	462	- const direction = detectScrollDirection(event);
	463	- if (direction === 'down') {
	464	- moveToNextSection();
	465	- } else {
	466	- moveToPreviousSection();
	467	- }
	468	- event.preventDefault();
	469	- }
	470	-
	471	- function detectScrollDirection(event) {
	472	- const wheelDelta = event.wheelDelta \|\| -event.deltaY;
	473	- return wheelDelta > 0 ? 'up' : 'down';
	474	- }
	475	- function slidesPlugin(activeSlide = 0) {
	476	- const slides = document.querySelectorAll('.accordion');
	477	- let previousSlide = slides[activeSlide];
	478	-
	479	- previousSlide.classList.add('active');
	480	- swapImage(previousSlide);
	481	-
	482	- slides.forEach((slide) => {
	483	- slide.addEventListener('click', () => {
	484	- if (slide !== previousSlide) {
	485	- clearActiveClasses();
	486	- swapImage(previousSlide);
	487	- slide.classList.add('active');
	488	- swapImage(slide);
	489	- previousSlide = slide;
	490	-
	491	- }
	492	-
	493	- });
	494	- });
	495	-
	496	- function clearActiveClasses() {
	497	- slides.forEach((slide) => {
	498	- slide.classList.remove('active');
	499	- });
	500	- }
	501	-
	502	- function swapImage(slide) {
	503	- const slideImg = slide.querySelector('.accordion img');
	504	- const bgImg = slide.style.backgroundImage;
	505	-
	506	- slide.style.backgroundImage = `url(${slideImg.src})`;
	507	- slideImg.src = bgImg.slice(5, -2);
	508	- }
	509	- }
	510	-
	511	-
	512	- slidesPlugin();
	513	-
	514	-
	515	-</script>
	516	-
	517	-
	518	-
	519	-
	520	-<style scoped>
	521	- html,
	522	- body {
	523	- scroll-behavior: smooth;
	524	- }
	525	-
	526	- .section {
	527	- height: 100vh;
	528	- width: 100%;
	529	- display: flex;
	530	- justify-content: center;
	531	- align-items: center;
	532	- font-size: 40px;
	533	- color: white;
	534	- }
	535	-
	536	- #section1 {
	537	- /* background: red; */
	538	- border: 1px solid red;
	539	- }
	540	-
	541	- #section2 {
	542	- background: green;
	543	- }
	544	-
	545	- #section3 {
	546	- background: blue;
	547	- }
	548	-</style>
	549	-
	550	-</html>(No newline at end of file)

efa3073

views/pages/AboutUs copy 3.html (deleted)

--- views/pages/AboutUs copy 3.html

...	...	@@ -1,326 +0,0 @@
	1	-<!DOCTYPE html>
	2	-<html lang="en">
	3	-
	4	-<head>
	5	- <meta charset="UTF-8">
	6	- <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	- <link rel="stylesheet" href="../../resources/css/reset.css">
	11	- <link rel="stylesheet" href="../../resources/css/style.css">
	12	- <link rel="stylesheet" href="../../resources/css/component.css">
	13	- <link rel="stylesheet" href="../../resources/css/common.css">
	14	- <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	-
	16	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	- <style>
	18	- html,
	19	- body {
	20	- position: relative;
	21	- height: 100%;
	22	- }
	23	-
	24	- body {
	25	- background: #eee;
	26	- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	27	- font-size: 14px;
	28	- color: #000;
	29	- margin: 0;
	30	- padding: 0;
	31	- }
	32	-
	33	- .swiper {
	34	- width: 100%;
	35	- height: 100%;
	36	- }
	37	-
	38	- .swiper-slide {
	39	- text-align: center;
	40	- font-size: 18px;
	41	- background: #fff;
	42	- display: flex;
	43	- justify-content: center;
	44	- align-items: center;
	45	- }
	46	-
	47	- .swiper-slide img {
	48	- display: block;
	49	- width: 100%;
	50	- height: 100%;
	51	- object-fit: cover;
	52	- }
	53	-
	54	- .test {
	55	- height: 100%;
	56	- }
	57	- </style>
	58	-
	59	- <title>TAKENSOFT</title>
	60	-</head>
	61	-
	62	-<body>
	63	- <!-- Swiper -->
	64	- <div class="swiper mySwiper">
	65	- <div class="swiper-wrapper">
	66	- <div class="swiper-slide">Slide 1</div>
	67	- <div class="swiper-slide">Slide 2</div>
	68	-
	69	- <div class="swiper-slide">
	70	- <div class="test" style="overflow-y: auto;">
	71	- <div class="content" data-year="2021">
	72	- <p class="mobil-year">2021</p>
	73	- <div class="flex">
	74	-
	75	- <p class="month mr30">5월</p>
	76	- <div class="month-text" style="text-align: left;">
	77	- <p>· 주식회사 테이큰 소프트 설립</p>
	78	- <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
	79	-
	80	- </div>
	81	- </div>
	82	- <div class="flex">
	83	- <p class="month mr30">10월</p>
	84	- <div class="month-text text-section" style="text-align: left;">
	85	- <p>· 소프트웨어 기업 등록</p>
	86	- <img src="../../resources/img/common/history-img1.png" alt="">
	87	- </div>
	88	- </div>
	89	- <div class="flex">
	90	- <p class="month mr30">11월</p>
	91	- <div class="month-text" style="text-align: left;">
	92	- <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
	93	- <p>· Taken BI Manager v1.0 저작권 등록</p>
	94	- <img src="../../resources/img/common/history-img2.png" alt="">
	95	- </div>
	96	- </div>
	97	- <div class="flex">
	98	- <p class="month mr30">12월</p>
	99	- <div class="month-text" style="text-align: left;">
	100	- <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
	101	- <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
	102	- <p>· 도로 모니터링 시스템 저작권 등록</p>
	103	- <div class="flex">
	104	- <img src="../../resources/img/common/history-img31.png" alt="">
	105	- <img src="../../resources/img/common/history-img32.png" alt="">
	106	- <img src="../../resources/img/common/history-img33.png" alt="">
	107	- </div>
	108	- </div>
	109	- </div>
	110	-
	111	-
	112	- </div>
	113	-
	114	- <div class="content" data-year="2022">
	115	- <p class="mobil-year">2022</p>
	116	-
	117	- <!-- 2021년 내용 -->
	118	- <div class="flex">
	119	- <p class="month mr30">1월</p>
	120	- <div class="month-text" style="text-align: left;">
	121	- <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
	122	- </div>
	123	- </div>
	124	- <div class="flex">
	125	- <p class="month mr30">3월</p>
	126	- <div class="month-text" style="text-align: left;">
	127	- <p>· 기업부설연구소 설립</p>
	128	- </div>
	129	- </div>
	130	- <div class="flex">
	131	- <p class="month mr30">4월</p>
	132	- <div class="month-text" style="text-align: left;">
	133	- <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
	134	- </div>
	135	- </div>
	136	- <div class="flex">
	137	- <p class="month mr30">5월</p>
	138	- <div class="month-text" style="text-align: left;">
	139	- <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
	140	- <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
	141	- </div>
	142	- </div>
	143	- <div class="flex">
	144	- <p class="month mr30">7월</p>
	145	- <div class="month-text" style="text-align: left;">
	146	- <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
	147	- </div>
	148	- </div>
	149	- <div class="flex">
	150	- <p class="month mr30">9월</p>
	151	- <div class="month-text" style="text-align: left;">
	152	- <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
	153	- </div>
	154	- </div>
	155	- <div class="flex">
	156	- <p class="month mr30">10월</p>
	157	- <div class="month-text" style="text-align: left;">
	158	- <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
	159	- </div>
	160	- </div>
	161	- <div class="flex">
	162	- <p class="month mr30">12월</p>
	163	- <div class="month-text" style="text-align: left;">
	164	- <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
	165	- <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
	166	- <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
	167	- <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
	168	- <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
	169	- <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
	170	- <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
	171	- <p>· 경로 생성 기술 관련 출원사실증명 </p>
	172	- <img src="../../resources/img/common/history-img4.png" alt="">
	173	-
	174	- </div>
	175	- </div>
	176	-
	177	- </div>
	178	- <div class="content" data-year="2023">
	179	- <p class="mobil-year">2023</p>
	180	-
	181	- <!-- 2022년 내용 -->
	182	- <div class="flex">
	183	- <p class="month mr30">1월</p>
	184	- <div class="month-text" style="text-align: left;">
	185	- <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
	186	- <p>· 복약지도 장치 및 방법 출원사실증명 </p>
	187	- <p>· Traffic Agent 저작권 등록 </p>
	188	-
	189	- <div class="flex">
	190	- <img src="../../resources/img/common/history-img51.png" alt="">
	191	- <img src="../../resources/img/common/history-img52.png" alt="">
	192	- </div>
	193	-
	194	- </div>
	195	- </div>
	196	- <div class="flex">
	197	- <p class="month mr30">2월</p>
	198	- <div class="month-text" style="text-align: left;">
	199	- <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
	200	- <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
	201	- </div>
	202	- </div>
	203	- <div class="flex">
	204	- <p class="month mr30">3월</p>
	205	- <div class="month-text" style="text-align: left;">
	206	- <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
	207	- </div>
	208	- </div>
	209	- <div class="flex">
	210	- <p class="month mr30">4월</p>
	211	- <div class="month-text" style="text-align: left;">
	212	- <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
	213	- <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
	214	- <p>· 기업부설연구소 인정서 획득 </p>
	215	- <img src="../../resources/img/common/history-img6.png" alt="">
	216	-
	217	- </div>
	218	- </div>
	219	- <div class="flex">
	220	- <p class="month mr30">5월</p>
	221	- <div style="text-align: left;">
	222	- <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
	223	- </div>
	224	- </div>
	225	- <div class="flex">
	226	- <p class="month mr30">6월</p>
	227	- <div class="month-text" style="text-align: left;">
	228	- <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
	229	- <div class="flex">
	230	- <img src="../../resources/img/common/history-img71.png" alt="">
	231	- <img src="../../resources/img/common/history-img72.png" alt="">
	232	- </div>
	233	- </div>
	234	- </div>
	235	- <div class="flex">
	236	- <p class="month mr30">7월</p>
	237	- <div class="month-text" style="text-align: left;">
	238	- <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
	239	- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
	240	- </div>
	241	- </div>
	242	- <div class="flex">
	243	- <p class="month mr30">8월</p>
	244	- <div class="month-text" style="text-align: left;">
	245	- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	246	- <p>· 메타버스 기술 관련 출원사실증명</p>
	247	- <img src="../../resources/img/common/history-img8.png" alt="">
	248	- </div>
	249	- </div>
	250	- <div class="flex">
	251	- <p class="month mr30">9월</p>
	252	- <div class="month-text" style="text-align: left;">
	253	- <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
	254	- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	255	- <p>· 시니어 케어 시스템 저작권 등록</p>
	256	- <img src="../../resources/img/common/history-img9.png" alt="">
	257	-
	258	- </div>
	259	- </div>
	260	- <div class="flex">
	261	- <p class="month mr30">11월</p>
	262	- <div class="month-text" style="text-align: left;">
	263	- <p>· 한기술평가 우수기업 인증 (T-5)</p>
	264	- <p>· 통합 모빌리티 솔루션 저작권 등록</p>
	265	- <div class="flex">
	266	- <img src="../../resources/img/common/history-img100.png" alt="">
	267	- <img src="../../resources/img/common/history-img101.png" alt="">
	268	- </div>
	269	- </div>
	270	- </div>
	271	- <div class="flex">
	272	- <p class="month mr30">12월</p>
	273	- <div class="month-text" style="text-align: left;">
	274	- <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
	275	- <p>· 구미시 키워드 분석 용역 (구미시)</p>
	276	- <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
	277	- <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
	278	- <p>· AI 횡단보도 기술 관련 출원사실증명</p>
	279	- <img src="../../resources/img/common/history-img110.png" alt="">
	280	-
	281	-
	282	- </div>
	283	- </div>
	284	- </div>
	285	- </div>
	286	- </div>
	287	- </div>
	288	- <div class="swiper-pagination"></div>
	289	- </div>
	290	- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	291	- <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	292	-
	293	-
	294	- <script>
	295	- var swiper = new Swiper(".mySwiper", {
	296	- cssMode:true,
	297	- direction: "vertical",
	298	- slidesPerView: 1,
	299	- spaceBetween: 30,
	300	- mousewheel: {
	301	- eventsTarget: '.swiper-slide'
	302	- },
	303	- slidesOffsetAfter: 220,
	304	- pagination: {
	305	- el: ".swiper-pagination",
	306	- clickable: true,
	307	- },
	308	- on: {
	309	- init: function () {
	310	- const slides = document.querySelectorAll('.swiper-slide');
	311	- slides.forEach(slide => {
	312	- slide.addEventListener('wheel', function (e) {
	313	- const delta = e.wheelDelta \|\| -e.deltaY;
	314	- console.log(delta)
	315	- // 슬라이드 내부에서 상단 또는 하단 경계에 도달했을 경우 Swiper 슬라이드 전환 허용
	316	- if ((this.scrollTop === (this.scrollHeight - this.offsetHeight) && delta < 0) \|\| (this.scrollTop === 0 && delta > 0)) {
	317	- e.stopPropagation();
	318	- }
	319	- }, { passive: false });
	320	- });
	321	- }
	322	- }
	323	- });
	324	- </script>
	325	-
	326	-</html>(No newline at end of file)

efa3073

views/pages/AboutUs copy.html (deleted)

--- views/pages/AboutUs copy.html

...	...	@@ -1,495 +0,0 @@
	1	-<!DOCTYPE html>
	2	-<html lang="en">
	3	-
	4	-<head>
	5	- <meta charset="UTF-8">
	6	- <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	- <link rel="stylesheet" href="../../resources/css/reset.css">
	11	- <link rel="stylesheet" href="../../resources/css/style.css">
	12	- <link rel="stylesheet" href="../../resources/css/component.css">
	13	- <link rel="stylesheet" href="../../resources/css/common.css">
	14	- <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	-
	16	- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	-
	18	-
	19	-
	20	-
	21	- <title>TAKENSOFT</title>
	22	-</head>
	23	-
	24	-<body>
	25	- <div id="header"></div>
	26	- <div class="swiper mySwiper About">
	27	- <div class="swiper-wrapper">
	28	- <div class="swiper-slide about-wrapper">
	29	- <div class="about-wrap slide-wrap ">
	30	- <div class="flex">
	31	- <div class="about-title mb90" style="width: 100%;">
	32	- <p class="mb20">ABOUT US</p>
	33	- <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
	34	- </div>
	35	-
	36	- <div class=" flex justify-center about-area"
	37	- style="width: 100%; gap: 190px; margin-bottom: 50px;">
	38	- <div class="about-radius-left solution-ani">
	39	- <p class="about-text">공감</p>
	40	- <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
	41	- </div>
	42	- <div class="about-radius solution-ani">
	43	- <p class="about-text">구현</p>
	44	- <p class="about-sub-text">가치를 주는 솔루션 도출</p>
	45	- </div>
	46	-
	47	- <div class="about-radius-right solution-ani">
	48	- <p class="about-text">생각</p>
	49	- <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
	50	- </div>
	51	- </div>
	52	- <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
	53	- <div class="about-radius-bottom-left ">
	54	- <p class="about-text">검증</p>
	55	- <p class="about-sub-text">결과물의 철저한 검증</p>
	56	- </div>
	57	- <div class="about-radius-bottom-right solution-ani">
	58	- <p class="about-text">소통</p>
	59	- <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
	60	- </div>
	61	-
	62	- </div>
	63	- </div>
	64	- </div>
	65	- </div>
	66	- <div class="swiper-slide">
	67	- <div class="text-area flex align-center justify-center pb60">
	68	- <div class="about-title mb20" style="width: 100%;">
	69	- <p class="mb20">Business</p>
	70	- <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
	71	- 해결합니다.</p>
	72	- </div>
	73	- <div class="container silde-box">
	74	- <div class="accordion flex justify-between"
	75	- style="background-image: url(../../resources/img/common/about-img1.png);">
	76	- <div class="slideText pl20">
	77	- <p class="accordion-num"><span>01.</span> AI Solution</p>
	78	- <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
	79	- </div>
	80	- <div class="slideImg">
	81	- <img src="../../resources/img/common/about-img-db.png" alt="">
	82	- </div>
	83	- <div class="slideTextDtail">
	84	- <div>
	85	- <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
	86	- <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
	87	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
	88	- 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
	89	- </div>
	90	- <div class=" flex justify-between" style="flex-wrap: nowrap;">
	91	- <div style="width: 20%;">
	92	- <p>[대표사례]</p>
	93	- </div>
	94	- <div class=" flex justify-between accordion-box">
	95	- <p>·도로 위험 감지 시스템</p>
	96	- <p>·경로 최적화 서비스</p>
	97	- <p>·안개 감지 시스템</p>
	98	- <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
	99	- </div>
	100	- </div>
	101	- </div>
	102	-
	103	-
	104	- </div>
	105	- <div class="accordion "
	106	- style="background-image: url(../../resources/img/common/about-img2.png);">
	107	- <div class="slideText pl20">
	108	- <p class="accordion-num"><span>02.</span> System Design</p>
	109	- <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
	110	- </div>
	111	- <div class="slideImg">
	112	- <img src="../../resources/img/common/about-img-bg02.png" alt="">
	113	- </div>
	114	- <div class="slideTextDtail">
	115	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
	116	- 통해 고객사 최적화 UI 도출 </p>
	117	- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	118	- <div style="width: 20%;">
	119	- <p>[대표사례]</p>
	120	- </div>
	121	- <div class="flex-column">
	122	- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
	123	- <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
	124	- <p>· 경로 최적화 서비스</p>
	125	- <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
	126	- </div>
	127	- </div>
	128	- </div>
	129	- </div>
	130	- <div class="accordion"
	131	- style="background-image: url(../../resources/img/common/about-img3.png);">
	132	- <div class="slideText pl20">
	133	- <p class="accordion-num"><span>03.</span> Data Science </p>
	134	- <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
	135	- </div>
	136	- <div class="slideImg">
	137	- <img src="../../resources/img/common/about-img-bg03.png" alt="">
	138	- </div>
	139	- <div class="slideTextDtail">
	140	- <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
	141	- <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
	142	- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
	143	- 수요기관 및 기업 확장
	144	- </p>
	145	- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	146	- <div style="width: 20%;">
	147	- <p>[대표사례]</p>
	148	- </div>
	149	- <div class="flex-column">
	150	- <p>· 데이터 품질관리 컨설팅</p>
	151	- <p>· AI 안전통합 횡단보도 플랫폼</p>
	152	- </div>
	153	- </div>
	154	- </div>
	155	- </div>
	156	-
	157	-
	158	- </div>
	159	- </div>
	160	-
	161	-
	162	- </div>
	163	- <div class="swiper-slide about">
	164	- <div class="text-area flex pb60">
	165	- <div class="about-title mb20" style="width: 100%;">
	166	- <p class="mb20">Vision</p>
	167	- <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
	168	- 매출을 확대해 나갑니다.
	169	- </p>
	170	- </div>
	171	- <div class="flex justify-center about-vision-box">
	172	- <img src="../../resources/img/common/about-img5.png" alt="">
	173	- <img src="../../resources/img/common/about-img4.png" alt="">
	174	- </div>
	175	- </div>
	176	- </div>
	177	- <div class="swiper-slide history" id="history">
	178	- <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
	179	- <div class="text-area felx">
	180	- <div class="about-title mb20">
	181	- <p>History</p>
	182	- </div>
	183	- <div class="timeline flex align-center justify-between" style="gap: 0px;">
	184	- <div class="years" id="years">
	185	- <div class="year active-year" data-year="2021">2021</div>
	186	- <div class="year" data-year="2022">2022</div>
	187	- <div class="year" data-year="2023">2023</div>
	188	- </div>
	189	- <div class=" scrollSwiper">
	190	- <div class="swiper-wrapper">
	191	- <div class="swiper-slide">Slide 1</div>
	192	- <div class="swiper-slide">Slide 2</div>
	193	- <div class="swiper-slide">Slide 3</div>
	194	- <div class="swiper-slide">Slide 4</div>
	195	- <div class="swiper-slide">Slide 5</div>
	196	- <div class="swiper-slide">Slide 6</div>
	197	- <div class="swiper-slide">Slide 7</div>
	198	- <div class="swiper-slide">Slide 8</div>
	199	- <div class="swiper-slide">Slide 9</div>
	200	- </div>
	201	- <div class="swiper-pagination"></div>
	202	- </div>
	203	-
	204	- </div>
	205	- </div>
	206	- </div>
	207	- </div>
	208	-
	209	-
	210	- </div>
	211	- </div>
	212	- <footer id="footer"></footer>
	213	-
	214	-
	215	-
	216	-
	217	-
	218	-
	219	-</body>
	220	-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	221	-<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	222	-
	223	-
	224	-<script>
	225	-
	226	-
	227	-
	228	- $(document).ready(function () {
	229	- $("#btnHeadquarter").click(function () {
	230	- $("#btnHeadquarter").addClass('on');
	231	- $("#btnDaeguBranch").removeClass('on');
	232	- $("#contentDaeguBranch").hide();
	233	-
	234	- $("#contentHeadquarter").show();
	235	- });
	236	-
	237	- $("#btnDaeguBranch").click(function () {
	238	- $("#btnDaeguBranch").addClass('on');
	239	- $("#btnHeadquarter").removeClass('on');
	240	-
	241	- $("#contentHeadquarter").hide();
	242	-
	243	- $("#contentDaeguBranch").show();
	244	-
	245	-
	246	-
	247	-
	248	-
	249	- });
	250	- });
	251	-
	252	-
	253	- function slidesPlugin(activeSlide = 0) {
	254	- const slides = document.querySelectorAll('.accordion');
	255	- let previousSlide = slides[activeSlide];
	256	-
	257	- previousSlide.classList.add('active');
	258	- swapImage(previousSlide);
	259	-
	260	- slides.forEach((slide) => {
	261	- slide.addEventListener('click', () => {
	262	- if (slide !== previousSlide) {
	263	- clearActiveClasses();
	264	- swapImage(previousSlide);
	265	- slide.classList.add('active');
	266	- swapImage(slide);
	267	- previousSlide = slide;
	268	-
	269	- }
	270	-
	271	- });
	272	- });
	273	-
	274	- function clearActiveClasses() {
	275	- slides.forEach((slide) => {
	276	- slide.classList.remove('active');
	277	- });
	278	- }
	279	-
	280	- function swapImage(slide) {
	281	- const slideImg = slide.querySelector('.accordion img');
	282	- const bgImg = slide.style.backgroundImage;
	283	-
	284	- slide.style.backgroundImage = `url(${slideImg.src})`;
	285	- slideImg.src = bgImg.slice(5, -2);
	286	- }
	287	- }
	288	-
	289	-
	290	- slidesPlugin();
	291	- // 마우스 휠을 비활성화할 영역 선택
	292	- var targetArea = document.querySelector(' .scrollSwiper .swiper-slide div');
	293	-
	294	- // 선택된 영역을 콘솔에 출력
	295	- console.log(targetArea);
	296	- var swiper = new Swiper(".mySwiper", {
	297	- direction: "vertical",
	298	- slidesPerView: 1,
	299	- spaceBetween: 30,
	300	- preventDefault: false, //per의 시작점이나 끝점에 도달했을 때 기본 스크롤 행동을 다시 활성화합니다.
	301	-
	302	- mousewheel: {
	303	- releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
	304	- },
	305	- on: {
	306	-
	307	- slideChange: function () {
	308	- var currentIndex = this.realIndex;
	309	- if (currentIndex === 0) {
	310	- $('#header').removeClass('active');
	311	- } else {
	312	- $('#header').addClass('active');
	313	- }
	314	- var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
	315	- if (this.activeIndex === lastIndex) {
	316	- $("#footer").show(); // 마지막 슬라이드에 도달하면 푸터를 보여줌
	317	- } else {
	318	- $("#footer").hide(); // 그렇지 않으면 푸터를 숨김
	319	- }
	320	- },
	321	-
	322	- }
	323	- });
	324	-
	325	-
	326	-
	327	- var scrollSwiper = new Swiper(".scrollSwiper", {
	328	- direction: "vertical",
	329	- slidesPerView: 1,
	330	- spaceBetween: 30,
	331	- mousewheel: true,
	332	- pagination: {
	333	- el: ".swiper-pagination",
	334	- clickable: true,
	335	- },
	336	- });
	337	-
	338	-
	339	- // var swiperContainer = document.querySelector('.scrollSwiper');
	340	-
	341	- // // Swiper 컨테이너 내에서 마우스 휠 이벤트 발생 시 기본 동작 방지
	342	- // swiperContainer.addEventListener('wheel', function (event) {
	343	- // event.preventDefault();
	344	- // }, { passive: false });
	345	- // document.addEventListener('DOMContentLoaded', function () {
	346	- // // 연도 요소를 모두 선택
	347	- // var years = document.querySelectorAll('.year');
	348	-
	349	- // // 각 연도 요소에 대해 클릭 이벤트 리스너를 추가
	350	- // years.forEach(function (year) {
	351	- // year.addEventListener('click', function () {
	352	- // // 모든 연도에서 'active-year' 클래스를 제거
	353	- // years.forEach(function (y) {
	354	- // y.classList.remove('active-year');
	355	- // });
	356	-
	357	- // // 클릭한 연도에 'active-year' 클래스를 추가
	358	- // this.classList.add('active-year');
	359	-
	360	- // // 모든 내용을 숨김
	361	- // var contents = document.querySelectorAll('.scrollSwiper .swiper-slide > div');
	362	- // contents.forEach(function (content) {
	363	- // content.style.display = 'none';
	364	- // });
	365	-
	366	- // // 클릭한 연도와 일치하는 data-year 속성을 가진 내용만 표시
	367	- // var activeYear = this.getAttribute('data-year');
	368	- // var activeContent = document.querySelector('.scrollSwiper .swiper-slide > div[data-year="' + activeYear + '"]');
	369	- // if (activeContent) {
	370	- // activeContent.style.display = 'block';
	371	- // }
	372	- // });
	373	- // });
	374	- // });
	375	- $(function () {
	376	- $("#header").load("../layout/Header.html");
	377	-
	378	- });
	379	-
	380	-
	381	-</script>
	382	-
	383	-
	384	-
	385	-
	386	-<style scoped>
	387	- /* 스크롤바 없애기 */
	388	- body {
	389	- -ms-overflow-style: none;
	390	- /* 인터넷 익스플로러 */
	391	- scrollbar-width: none;
	392	- /* 파이어폭스 */
	393	- }
	394	-
	395	- ::-webkit-scrollbar {
	396	- display: none;
	397	- }
	398	-
	399	- #header {
	400	- position: fixed;
	401	- top: 0;
	402	- z-index: 3;
	403	- border-bottom: 1px solid #ced4da;
	404	- background-color: white;
	405	- }
	406	-
	407	- #header .header .logo {
	408	- background: url(../../resources/img/component/logo-color.png) no-repeat;
	409	- width: 200px;
	410	- background-size: contain;
	411	- height: 25px;
	412	-
	413	-
	414	- }
	415	-
	416	- #header .header nav li a {
	417	- color: #333;
	418	-
	419	- }
	420	-
	421	-
	422	-
	423	- html,
	424	- body {
	425	- position: relative;
	426	- height: 100%;
	427	- }
	428	-
	429	- body {
	430	- background: #eee;
	431	- font-family: 'Pretendard';
	432	- font-size: 14px;
	433	- color: #000;
	434	- margin: 0;
	435	- padding: 0;
	436	- }
	437	-
	438	- .swiper {
	439	- width: 100%;
	440	- height: 100%;
	441	- }
	442	-
	443	- .About .swiper-slide {
	444	- text-align: center;
	445	- font-size: 18px;
	446	- /* display: flex; */
	447	- height: 100%;
	448	- position: relative;
	449	- justify-content: center;
	450	- align-items: center;
	451	- background-color: #fff;
	452	- }
	453	-
	454	- .swiper-slide img {
	455	- /* height: 356px; */
	456	- display: block;
	457	- object-fit: cover;
	458	- }
	459	-
	460	- .container {
	461	- width: 1200px;
	462	- height: 70%;
	463	- display: flex;
	464	- flex-wrap: nowrap;
	465	- border-radius: 20px;
	466	- overflow: hidden;
	467	- }
	468	-
	469	- #history {
	470	- touch-action: none;
	471	- }
	472	-
	473	- .scrollSwiper {
	474	- /* width: 100%; */
	475	- height: 100%;
	476	- overflow-y: scroll;
	477	- border: 1px solid blue;
	478	- }
	479	-
	480	- .scrollSwiper .swiper-slide {
	481	- font-size: 18px;
	482	- height: auto;
	483	- -webkit-box-sizing: border-box;
	484	- box-sizing: border-box;
	485	- padding: 30px;
	486	- }
	487	-
	488	- .scrollSwiper .swiper-slide div {
	489	- border: 1px solid red;
	490	- text-align: left;
	491	- width: 100%;
	492	- }
	493	-</style>
	494	-
	495	-</html>(No newline at end of file)

efa3073

b032dd1

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html

...	...	@@ -14,16 +14,97 @@
14	14	<link rel="stylesheet" href="../../resources/css/responsive.css">
15	15
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+ <style>
	18	+ html,
	19	+ body {
	20	+ position: relative;
	21	+ height: 100%;
	22	+ }
	23	+
	24	+ body {
	25	+ background: #eee;
	26	+ font-family: 'Pretendard';
	27	+ font-size: 14px;
	28	+ color: #000;
	29	+ margin: 0;
	30	+ padding: 0;
	31	+ }
	32	+
	33	+ .swiper {
	34	+ width: 100%;
	35	+ height: 100%;
	36	+ }
	37	+
	38	+ .swiper-slide {
	39	+ text-align: center;
	40	+ font-size: 18px;
	41	+ background: #fff;
	42	+ display: flex;
	43	+ justify-content: center;
	44	+ align-items: center;
	45	+ }
	46	+
	47	+ .swiper-slide img {
	48	+ display: block;
	49	+ width: 100%;
	50	+ height: 100%;
	51	+ object-fit: cover;
	52	+ }
	53	+
	54	+ .test {
	55	+ height: 100%;
	56	+ }
	57	+
	58	+ .container {
	59	+ width: 1200px;
	60	+ height: 70%;
	61	+ display: flex;
	62	+ flex-wrap: nowrap;
	63	+ border-radius: 20px;
	64	+ overflow: hidden;
	65	+ }
	66	+
	67	+ .content img {
	68	+ width: 100px;
	69	+ height: 150px;
	70	+ }
	71	+
	72	+ #header {
	73	+ position: fixed;
	74	+ top: 0;
	75	+ z-index: 3;
	76	+ border-bottom: 1px solid #ced4da;
	77	+ background-color: white;
	78	+ }
	79	+
	80	+ #header .header .logo {
	81	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	82	+ width: 200px;
	83	+ background-size: contain;
	84	+ height: 25px;
17	85
18	86
	87	+ }
	88	+
	89	+ #header .header nav li a {
	90	+ color: #333;
	91	+
	92	+ }
	93	+ .dropdown {
	94	+ background-color: #fff !important;
	95	+ }
	96	+
	97	+
	98	+
	99	+ </style>
19	100
20	101	<title>TAKENSOFT</title>
21	102	</head>
22	103
23	104	<body>
24	105	<div id="header"></div>
25		- <div class="swiper mySwiper About">
26		- <div class="swiper-wrapper" style=" touch-action: pan-y;">
	106	+ <div class="swiper mySwiper">
	107	+ <div class="swiper-wrapper">
27	108	<div class="swiper-slide about-wrapper">
28	109	<div class="about-wrap slide-wrap ">
29	110	<div class="flex">
...	...	@@ -159,246 +240,28 @@
159	240
160	241
161	242	</div>
162		- <div class="swiper-slide about">
163		- <div class="text-area flex pb60 pt60" style="align-content: center;">
164		- <div class="about-title mb20" style="width: 100%;">
165		- <p class="mb20">Vision</p>
166		- <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
167		- 매출을 확대해 나갑니다.
168		- </p>
169		- </div>
170		- <div class="flex justify-center about-vision-box">
171		- <img src="../../resources/img/common/about-img5.png" alt="">
172		- <img src="../../resources/img/common/about-img4.png" alt="">
173		- </div>
174		- </div>
175		- </div>
176		- <div class="swiper-slide" id="history" style="touch-action: none;">
177		- <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
178		- <div class="text-area flex pb60 pt60" style="align-content: center;">
	243	+
	244	+ <div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
	245	+ <div style="width: 100%; height: 100%; flex-wrap: nowrap;" class="flex ">
	246	+
	247	+
	248	+ <div class="text-area flex pb60 pt120" style="align-content: center;">
	249	+
179	250	<div class="about-title mb20" style="width: 100%;">
180	251	<p>History</p>
181	252	</div>
182		- <div class="timeline flex align-center justify-between web-swiper" style="gap: 0px;">
	253	+ <div class="flex" style="height: 100%; width: 100%;">
	254	+
183	255	<div class="years" id="years">
184		- <div class="year active-year" data-year="2021">2021</div>
185		- <div class="year" data-year="2022">2022</div>
186		- <div class="year" data-year="2023">2023</div>
	256	+ <div class="year tab active-year" data-year="section1">2021</div>
	257	+ <div class="year tab" data-year="section2">2022</div>
	258	+ <div class="year tab" data-year="section3">2023</div>
187	259	</div>
188		- <div class="contents" id="contents" style="touch-action: none;">
189		- <div class="content" data-year="2021">
190		- <div class="flex">
191		- <p class="month mr30">5월</p>
192		- <div class="month-text" style="text-align: left;">
193		- <p>· 주식회사 테이큰 소프트 설립</p>
194		- <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
	260	+ <div style="align-content: center; overflow-y: auto; height: 100%;" class="history-box">
195	261
196		- </div>
197		- </div>
198		- <div class="flex">
199		- <p class="month mr30">10월</p>
200		- <div class="month-text text-section" style="text-align: left;">
201		- <p>· 소프트웨어 기업 등록</p>
202		- <img src="../../resources/img/common/history-img1.png" alt="">
203		- </div>
204		- </div>
205		- <div class="flex">
206		- <p class="month mr30">11월</p>
207		- <div class="month-text" style="text-align: left;">
208		- <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
209		- <p>· Taken BI Manager v1.0 저작권 등록</p>
210		- <img src="../../resources/img/common/history-img2.png" alt="">
211		- </div>
212		- </div>
213		- <div class="flex">
214		- <p class="month mr30">12월</p>
215		- <div class="month-text" style="text-align: left;">
216		- <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
217		- <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
218		- <p>· 도로 모니터링 시스템 저작권 등록</p>
219		- <div class="flex">
220		- <img src="../../resources/img/common/history-img31.png" alt="">
221		- <img src="../../resources/img/common/history-img32.png" alt="">
222		- <img src="../../resources/img/common/history-img33.png" alt="">
223		- </div>
224		- </div>
225		- </div>
	262	+ <div class="test">
226	263
227		-
228		- </div>
229		- <div class="content" data-year="2022">
230		- <div class="flex">
231		- <p class="month mr30">1월</p>
232		- <div class="month-text" style="text-align: left;">
233		- <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
234		- </div>
235		- </div>
236		- <div class="flex">
237		- <p class="month mr30">3월</p>
238		- <div class="month-text" style="text-align: left;">
239		- <p>· 기업부설연구소 설립</p>
240		- </div>
241		- </div>
242		- <div class="flex">
243		- <p class="month mr30">4월</p>
244		- <div class="month-text" style="text-align: left;">
245		- <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
246		- </div>
247		- </div>
248		- <div class="flex">
249		- <p class="month mr30">5월</p>
250		- <div class="month-text" style="text-align: left;">
251		- <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
252		- <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
253		- </div>
254		- </div>
255		- <div class="flex">
256		- <p class="month mr30">7월</p>
257		- <div class="month-text" style="text-align: left;">
258		- <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
259		- </div>
260		- </div>
261		- <div class="flex">
262		- <p class="month mr30">9월</p>
263		- <div class="month-text" style="text-align: left;">
264		- <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
265		- </div>
266		- </div>
267		- <div class="flex">
268		- <p class="month mr30">10월</p>
269		- <div class="month-text" style="text-align: left;">
270		- <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
271		- </div>
272		- </div>
273		- <div class="flex">
274		- <p class="month mr30">12월</p>
275		- <div class="month-text" style="text-align: left;">
276		- <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
277		- <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
278		- <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
279		- <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
280		- <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
281		- <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
282		- <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
283		- <p>· 경로 생성 기술 관련 출원사실증명 </p>
284		- <img src="../../resources/img/common/history-img4.png" alt="">
285		-
286		- </div>
287		- </div>
288		-
289		- </div>
290		- <div class="content" data-year="2023">
291		- <div class="flex">
292		- <p class="month mr30">1월</p>
293		- <div class="month-text" style="text-align: left;">
294		- <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
295		- <p>· 복약지도 장치 및 방법 출원사실증명 </p>
296		- <p>· Traffic Agent 저작권 등록 </p>
297		-
298		- <div class="flex">
299		- <img src="../../resources/img/common/history-img51.png" alt="">
300		- <img src="../../resources/img/common/history-img52.png" alt="">
301		- </div>
302		-
303		- </div>
304		- </div>
305		- <div class="flex">
306		- <p class="month mr30">2월</p>
307		- <div class="month-text" style="text-align: left;">
308		- <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
309		- <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
310		- </div>
311		- </div>
312		- <div class="flex">
313		- <p class="month mr30">3월</p>
314		- <div class="month-text" style="text-align: left;">
315		- <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
316		- </div>
317		- </div>
318		- <div class="flex">
319		- <p class="month mr30">4월</p>
320		- <div class="month-text" style="text-align: left;">
321		- <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
322		- <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
323		- <p>· 기업부설연구소 인정서 획득 </p>
324		- <img src="../../resources/img/common/history-img6.png" alt="">
325		-
326		- </div>
327		- </div>
328		- <div class="flex">
329		- <p class="month mr30">5월</p>
330		- <div style="text-align: left;">
331		- <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
332		- </div>
333		- </div>
334		- <div class="flex">
335		- <p class="month mr30">6월</p>
336		- <div class="month-text" style="text-align: left;">
337		- <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
338		- <div class="flex">
339		- <img src="../../resources/img/common/history-img71.png" alt="">
340		- <img src="../../resources/img/common/history-img72.png" alt="">
341		- </div>
342		- </div>
343		- </div>
344		- <div class="flex">
345		- <p class="month mr30">7월</p>
346		- <div class="month-text" style="text-align: left;">
347		- <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
348		- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
349		- </div>
350		- </div>
351		- <div class="flex">
352		- <p class="month mr30">8월</p>
353		- <div class="month-text" style="text-align: left;">
354		- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
355		- <p>· 메타버스 기술 관련 출원사실증명</p>
356		- <img src="../../resources/img/common/history-img8.png" alt="">
357		- </div>
358		- </div>
359		- <div class="flex">
360		- <p class="month mr30">9월</p>
361		- <div class="month-text" style="text-align: left;">
362		- <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
363		- <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
364		- <p>· 시니어 케어 시스템 저작권 등록</p>
365		- <img src="../../resources/img/common/history-img9.png" alt="">
366		-
367		- </div>
368		- </div>
369		- <div class="flex">
370		- <p class="month mr30">11월</p>
371		- <div class="month-text" style="text-align: left;">
372		- <p>· 한기술평가 우수기업 인증 (T-5)</p>
373		- <p>· 통합 모빌리티 솔루션 저작권 등록</p>
374		- <div class="flex">
375		- <img src="../../resources/img/common/history-img100.png" alt="">
376		- <img src="../../resources/img/common/history-img101.png" alt="">
377		- </div>
378		- </div>
379		- </div>
380		- <div class="flex">
381		- <p class="month mr30">12월</p>
382		- <div class="month-text" style="text-align: left;">
383		- <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
384		- <p>· 구미시 키워드 분석 용역 (구미시)</p>
385		- <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
386		- <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
387		- <p>· AI 횡단보도 기술 관련 출원사실증명</p>
388		- <img src="../../resources/img/common/history-img110.png" alt="">
389		-
390		-
391		- </div>
392		- </div>
393		- </div>
394		- </div>
395		- </div>
396		-
397		- <div class="inner mobil-swiper">
398		- <div class="swiper-wrapper mobile-contents ">
399		- <div class="swiper-slide ">
400		- <div class="content" data-year="2021">
401		- <p class="mobil-year">2021</p>
	264	+ <div class="content section" id="section1">
402	265	<div class="flex">
403	266
404	267	<p class="month mr30">5월</p>
...	...	@@ -440,8 +303,7 @@
440	303
441	304	</div>
442	305
443		- <div class="content" data-year="2022">
444		- <p class="mobil-year">2022</p>
	306	+ <div class="content section" id="section2">
445	307
446	308	<!-- 2021년 내용 -->
447	309	<div class="flex">
...	...	@@ -504,10 +366,8 @@
504	366	</div>
505	367
506	368	</div>
507		- <div class="content" data-year="2023">
508		- <p class="mobil-year">2023</p>
	369	+ <div class="content section" id="section3">
509	370
510		- <!-- 2022년 내용 -->
511	371	<div class="flex">
512	372	<p class="month mr30">1월</p>
513	373	<div class="month-text" style="text-align: left;">
...	...	@@ -615,252 +475,110 @@
615	475	</div>
616	476	</div>
617	477	</div>
	478	+
618	479	</div>
619		-
620		-
	480	+ <div id="footer" style="width: 100%;"></div>
621	481	</div>
622		- <footer id="footer"></footer>
	482	+
623	483	</div>
	484	+
624	485	</div>
	486	+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	487	+ <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
625	488
626	489
	490	+ <script>
	491	+ var swiper = new Swiper(".mySwiper", {
	492	+ cssMode: true,
	493	+ direction: "vertical",
	494	+ slidesPerView: 1,
	495	+ spaceBetween: 30,
	496	+ mousewheel: {
	497	+ eventsTarget: '.swiper-slide'
	498	+ },
	499	+ // slidesOffsetAfter: 220,
	500	+ pagination: {
	501	+ el: ".swiper-pagination",
	502	+ clickable: true,
	503	+ },
	504	+ on: {
	505	+ reachEnd: function () {
	506	+ const slides = document.querySelectorAll('.swiper-slide');
	507	+ slides.forEach(slide => {
	508	+ slide.addEventListener('wheel', function (e) {
	509	+ const delta = e.wheelDelta \|\| -e.deltaY;
	510	+ console.log(delta)
	511	+ // 슬라이드 내부에서 상단 또는 하단 경계에 도달했을 경우 Swiper 슬라이드 전환 허용
	512	+ if ((this.scrollTop === (this.scrollHeight - this.offsetHeight) && delta < 0) \|\| (this.scrollTop === 0 && delta > 0)) {
	513	+ e.stopPropagation();
	514	+ }
	515	+ }, { passive: false });
627	516
628	517
	518	+ });
	519	+ },
	520	+ slideChange: function () {
	521	+
	522	+ const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
	523	+ const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
	524	+ const footer = document.getElementById('footer'); // 푸터 요소 선택
629	525
630		-
631		-</body>
632		-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
633		-<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
634		-
635		-
636		-<script>
637		- // history에서 슬라이드시 영역 별 year active 시키는 코드
638		- document.addEventListener('DOMContentLoaded', function () {
639		- const years = document.querySelectorAll('.year');
640		- const contents = document.querySelector('.contents');
641		- const contentItems = document.querySelectorAll('.content');
642		-
643		- function updateActiveYear(visibleYear = '2020') {
644		- years.forEach((year) => {
645		- if (year.getAttribute('data-year') === visibleYear) {
646		- year.classList.add('active-year');
647		- } else {
648		- year.classList.remove('active-year');
649		- }
650		- });
651		- }
652		-
653		- contents.addEventListener('scroll', function () {
654		- let visibleYear = '';
655		- contentItems.forEach((item) => {
656		- const itemTop = item.offsetTop;
657		- const itemHeight = item.clientHeight;
658		- if (contents.scrollTop >= itemTop - 20 && contents.scrollTop < itemTop + itemHeight) {
659		- visibleYear = item.getAttribute('data-year');
660		- }
661		- });
662		-
663		- if (visibleYear) {
664		- updateActiveYear(visibleYear);
	526	+ if (isLastSlide) {
	527	+ // 마지막 슬라이드에 도달했을 때 푸터 표시
	528	+ footer.style.display = 'block';
	529	+ } else {
	530	+ // 마지막 슬라이드가 아닐 때 푸터 숨기기 (필요한 경우)
	531	+ footer.style.display = 'none';
	532	+ }
	533	+ },
665	534	}
666		- }, { passive: true }); // 여기에 passive 옵션 추가
667		-
668		- // 초기 활성 연도 설정을 위한 코드 추가
669		- const initialYearElement = Array.from(years).find(year => year.getAttribute('data-year') === '2020');
670		- if (initialYearElement) {
671		- updateActiveYear('2020');
672		- } else {
673		- }
674		- });
675		-
676		-
677		- // business 아코디언
678		- function slidesPlugin(activeSlide = 0) {
679		- const slides = document.querySelectorAll('.accordion');
680		- let previousSlide = slides[activeSlide];
681		-
682		- previousSlide.classList.add('active');
683		- swapImage(previousSlide);
684		-
685		- slides.forEach((slide) => {
686		- slide.addEventListener('click', () => {
687		- if (slide !== previousSlide) {
688		- clearActiveClasses();
689		- swapImage(previousSlide);
690		- slide.classList.add('active');
691		- swapImage(slide);
692		- previousSlide = slide;
693		-
694		- }
695		-
696		- });
697	535	});
	536	+ // business 아코디언
	537	+ function slidesPlugin(activeSlide = 0) {
	538	+ const slides = document.querySelectorAll('.accordion');
	539	+ let previousSlide = slides[activeSlide];
698	540
699		- function clearActiveClasses() {
	541	+ previousSlide.classList.add('active');
	542	+ swapImage(previousSlide);
	543	+
700	544	slides.forEach((slide) => {
701		- slide.classList.remove('active');
	545	+ slide.addEventListener('click', () => {
	546	+ if (slide !== previousSlide) {
	547	+ clearActiveClasses();
	548	+ swapImage(previousSlide);
	549	+ slide.classList.add('active');
	550	+ swapImage(slide);
	551	+ previousSlide = slide;
	552	+
	553	+ }
	554	+
	555	+ });
702	556	});
	557	+
	558	+ function clearActiveClasses() {
	559	+ slides.forEach((slide) => {
	560	+ slide.classList.remove('active');
	561	+ });
	562	+ }
	563	+
	564	+ function swapImage(slide) {
	565	+ const slideImg = slide.querySelector('.accordion img');
	566	+ const bgImg = slide.style.backgroundImage;
	567	+
	568	+ slide.style.backgroundImage = `url(${slideImg.src})`;
	569	+ slideImg.src = bgImg.slice(5, -2);
	570	+ }
703	571	}
704	572
705		- function swapImage(slide) {
706		- const slideImg = slide.querySelector('.accordion img');
707		- const bgImg = slide.style.backgroundImage;
708	573
709		- slide.style.backgroundImage = `url(${slideImg.src})`;
710		- slideImg.src = bgImg.slice(5, -2);
711		- }
712		- }
	574	+ slidesPlugin();
713	575
714	576
715		- slidesPlugin();
	577	+ $(function () {
	578	+ $("#header").load("../layout/Header.html");
	579	+ $("#footer").load("../layout/footer.html");
716	580
717		- // 페이지 스와이퍼
718		- var swiper = new Swiper(".mySwiper", {
719		- direction: "vertical",
720		- slidesPerView: 1,
721		- spaceBetween: 0,
722		-
723		- mousewheel: {
724		- releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
725		- },
726		- // slidesOffsetAfter: 220,
727		-
728		- });
729		- // history 스와이퍼
730		- var inner = new Swiper(".inner", {
731		- direction: "vertical",
732		- slidesPerView: "auto",
733		- scrollbar: {
734		- el: ".swiper-scrollbar",
735		- },
736		- });
737		-
738		- // 슬라이더 1이 움직이기 시작할 때 슬라이더 2의 움직임을 금지
739		- inner.on('slideChangeTransitionStart', function () {
740		- swiper.allowTouchMove = false;
741		- });
742		-
743		- // 슬라이더 1의 움직임이 끝나면 슬라이더 2의 움직임을 다시 허용
744		- inner.on('slideChangeTransitionEnd', function () {
745		- swiper.allowTouchMove = true;
746		- });
747		-
748		- $(function () {
749		- $("#header").load("../layout/Header.html");
750		- $("#footer").load("../layout/footer.html");
751		- $("#footer").show();
752		-
753		- });
754		-
755		-
756		-</script>
757		-
758		-
759		-
760		-
761		-<style scoped>
762		- .inner {
763		- width: 100%;
764		- height: 100%;
765		- }
766		-
767		- .inner .swiper-slide {
768		- font-size: 18px;
769		- height: auto;
770		- display: block;
771		- -webkit-box-sizing: border-box;
772		- box-sizing: border-box;
773		- padding: 30px;
774		- }
775		-
776		- /* 스크롤바 없애기 */
777		- body {
778		- -ms-overflow-style: none;
779		- /* 인터넷 익스플로러 */
780		- scrollbar-width: none;
781		- /* 파이어폭스 */
782		- }
783		-
784		- ::-webkit-scrollbar {
785		- display: none;
786		- }
787		-
788		- #header {
789		- position: fixed;
790		- top: 0;
791		- z-index: 3;
792		- border-bottom: 1px solid #ced4da;
793		- background-color: white;
794		- }
795		-
796		- #header .header .logo {
797		- background: url(../../resources/img/component/logo-color.png) no-repeat;
798		- width: 200px;
799		- background-size: contain;
800		- height: 25px;
801		-
802		-
803		- }
804		-
805		- #header .header nav li a {
806		- color: #333;
807		-
808		- }
809		-
810		-
811		- #contents {
812		- scroll-snap-type: x mandatory;
813		- }
814		-
815		- .content {
816		- scroll-snap-align: start;
817		- }
818		-
819		- html,
820		- body {
821		- position: relative;
822		- height: 100%;
823		- }
824		-
825		- body {
826		- background: #eee;
827		- font-family: 'Pretendard';
828		- font-size: 14px;
829		- color: #000;
830		- margin: 0;
831		- padding: 0;
832		- }
833		-
834		- .swiper {
835		- width: 100%;
836		- height: 100%;
837		- }
838		-
839		- .swiper-slide {
840		- text-align: center;
841		- font-size: 18px;
842		- display: flex;
843		- height: 100%;
844		- position: relative;
845		- justify-content: center;
846		- align-items: center;
847		- background-color: #fff;
848		- }
849		-
850		- .swiper-slide img {
851		- /* height: 356px; */
852		- display: block;
853		- object-fit: cover;
854		- }
855		-
856		- .container {
857		- width: 1200px;
858		- height: 70%;
859		- display: flex;
860		- flex-wrap: nowrap;
861		- border-radius: 20px;
862		- overflow: hidden;
863		- }
864		-</style>
	581	+ });
	582	+ </script>
865	583
866	584	</html> (No newline at end of file)

efa3073

b032dd1

views/pages/Customized.html

--- views/pages/Customized.html

+++ views/pages/Customized.html

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

efa3073

b032dd1

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html

...	...	@@ -14,7 +14,96 @@
14	14	<link rel="stylesheet" href="../../resources/css/responsive.css">
15	15
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+ <style scoped>
	18	+ footer {
	19	+ width: 100%;
	20	+ /* height: 300px; */
	21	+ padding: 30px;
	22	+ /* opacity: 0; */
	23	+ /* display: none; */
	24	+ position: relative;
	25	+ bottom: 0px;
	26	+ left: 0;
	27	+ z-index: 56;
	28	+ transition: all 0.5s;
	29	+ background-color: #333;
	30	+ }
17	31
	32	+ /* 스크롤바 없애기 */
	33	+ body {
	34	+ -ms-overflow-style: none;
	35	+ /* 인터넷 익스플로러 */
	36	+ scrollbar-width: none;
	37	+ /* 파이어폭스 */
	38	+ }
	39	+
	40	+ ::-webkit-scrollbar {
	41	+ display: none;
	42	+ }
	43	+
	44	+ #header {
	45	+ position: fixed;
	46	+ top: 0;
	47	+ background-color: white !important;
	48	+ z-index: 3;
	49	+ border-bottom: 1px solid #ced4da;
	50	+ }
	51	+
	52	+ #header .header .logo {
	53	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	54	+ width: 200px;
	55	+ background-size: contain;
	56	+ height: 25px;
	57	+
	58	+
	59	+ }
	60	+
	61	+ #header .header nav li a {
	62	+ color: #333;
	63	+
	64	+ }
	65	+
	66	+
	67	+
	68	+ html,
	69	+ body {
	70	+ position: relative;
	71	+ height: 100%;
	72	+ font-family: 'Pretendard';
	73	+
	74	+ }
	75	+
	76	+ body {
	77	+ font-family: 'Pretendard';
	78	+ background-color: white;
	79	+ font-size: 14px;
	80	+ color: #000;
	81	+ margin: 0;
	82	+ padding: 0;
	83	+ }
	84	+
	85	+ .box-wrap {
	86	+ flex-wrap: nowrap;
	87	+ }
	88	+
	89	+ .box-wrap div {
	90	+ width: 100%;
	91	+ }
	92	+
	93	+ .box-wrap div img {
	94	+ padding-bottom: 2rem;
	95	+ }
	96	+
	97	+ .box-wrap div p {
	98	+ font-size: 2rem;
	99	+ font-weight: 600;
	100	+ padding: 10px 0;
	101	+ }
	102	+
	103	+ .dropdown {
	104	+ background-color: #fff !important;
	105	+ }
	106	+ </style>
18	107
19	108
20	109	<title>TAKENSOFT</title>
...	...	@@ -22,34 +111,35 @@
22	111
23	112	<body>
24	113	<div id="header"></div>
25		- <div style=" display: flex; flex-direction: column; ">
	114	+ <div style=" display: flex; flex-direction: column; background: linear-gradient(#f8f9fa, #fff, #fff) !important;
	115	+ ">
26	116
27	117	<div class=" text-area pb60 pt60 slide-section flex align-center " id="Data" style="height: 100vh;">
28		-
29		-
30		- <div class="flex justify-between " style="gap: 10px; width: 100%;">
31		- <div class="etc-wrap-title pb20">
32		- <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
33		- <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
34		- </div>
35		- <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
36		- <div class="solution-ani">
37		- <img src="../../resources/img/common/data-img1.png" alt="">
38		- <p>구미시 주요 이슈 및 민원 분석</p>
39		- </div>
40		- <div class="solution-ani">
41		- <img src="../../resources/img/common/data-img2.png" alt="">
42		- <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
43		- </div>
44		- <div class="solution-ani">
45		- <img src="../../resources/img/common/data-img3.png" alt="">
46		- <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
47		- </div>
48		-
49		- </div>
50		-
	118	+
	119	+
	120	+ <div class="flex justify-between " style="gap: 10px; width: 100%;">
	121	+ <div class="etc-wrap-title pb20">
	122	+ <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
	123	+ <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
51	124	</div>
52		-
	125	+ <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
	126	+ <div class="solution-ani">
	127	+ <img src="../../resources/img/common/data-img1.png" alt="">
	128	+ <p>구미시 주요 이슈 및 민원 분석</p>
	129	+ </div>
	130	+ <div class="solution-ani">
	131	+ <img src="../../resources/img/common/data-img2.png" alt="">
	132	+ <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
	133	+ </div>
	134	+ <div class="solution-ani">
	135	+ <img src="../../resources/img/common/data-img3.png" alt="">
	136	+ <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
	137	+ </div>
	138	+
	139	+ </div>
	140	+
	141	+ </div>
	142	+
53	143	</div>
54	144	<footer>
55	145	<div class="footer-wrap">
...	...	@@ -59,7 +149,7 @@
59	149	<hr>
60	150	<div class="footer-text pt10">
61	151	<div class="flex justify-between ">
62		-
	152	+
63	153	<p>대표자 ) 임상현</p>
64	154	<p>FAX ) 053-811-1701</p>
65	155	</div>
...	...	@@ -115,91 +205,6 @@
115	205
116	206	</script>
117	207
118		-<style scoped>
119		- footer {
120		- width: 100%;
121		- /* height: 300px; */
122		- padding: 30px;
123		- /* opacity: 0; */
124		- /* display: none; */
125		- position: relative;
126		- bottom: 0px;
127		- left: 0;
128		- z-index: 56;
129		- transition: all 0.5s;
130		- background-color: #333;
131		-}
132	208
133		- /* 스크롤바 없애기 */
134		- body {
135		- -ms-overflow-style: none;
136		- /* 인터넷 익스플로러 */
137		- scrollbar-width: none;
138		- /* 파이어폭스 */
139		- }
140		-
141		- ::-webkit-scrollbar {
142		- display: none;
143		- }
144		-
145		- #header {
146		- position: fixed;
147		- top: 0;
148		- z-index: 3;
149		- border-bottom: 1px solid #ced4da;
150		- background-color: white;
151		- }
152		-
153		- #header .header .logo {
154		- background: url(../../resources/img/component/logo-color.png) no-repeat;
155		- width: 200px;
156		- background-size: contain;
157		- height: 25px;
158		-
159		-
160		- }
161		-
162		- #header .header nav li a {
163		- color: #333;
164		-
165		- }
166		-
167		-
168		-
169		- html,
170		- body {
171		- position: relative;
172		- height: 100%;
173		- font-family: 'Pretendard';
174		-
175		- }
176		-
177		- body {
178		- background: linear-gradient(#f8f9fa, #fff, #fff);
179		- font-family: 'Pretendard';
180		- font-size: 14px;
181		- color: #000;
182		- margin: 0;
183		- padding: 0;
184		- }
185		-
186		- .box-wrap {
187		- flex-wrap: nowrap;
188		- }
189		-
190		- .box-wrap div {
191		- width: 100%;
192		- }
193		-
194		- .box-wrap div img {
195		- padding-bottom: 2rem;
196		- }
197		-
198		- .box-wrap div p {
199		- font-size: 2rem;
200		- font-weight: 600;
201		- padding: 10px 0;
202		- }
203		-</style>
204	209
205	210	</html> (No newline at end of file)

efa3073

b032dd1

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html

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

efa3073

b032dd1

views/pages/Marketing.html

--- views/pages/Marketing.html

+++ views/pages/Marketing.html

...	...	@@ -16,7 +16,84 @@
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
17	17
18	18
19		-
	19	+ <style scoped>
	20	+ /* 스크롤바 없애기 */
	21	+ body {
	22	+ -ms-overflow-style: none;
	23	+ /* 인터넷 익스플로러 */
	24	+ scrollbar-width: none;
	25	+ /* 파이어폭스 */
	26	+ }
	27	+
	28	+ ::-webkit-scrollbar {
	29	+ display: none;
	30	+ }
	31	+
	32	+ #header {
	33	+ position: fixed;
	34	+ top: 0;
	35	+ z-index: 3;
	36	+ border-bottom: 1px solid #ced4da;
	37	+ background-color: white;
	38	+ }
	39	+
	40	+ #header .header .logo {
	41	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	42	+ width: 200px;
	43	+ background-size: contain;
	44	+ height: 25px;
	45	+
	46	+
	47	+ }
	48	+
	49	+ #header .header nav li a {
	50	+ color: #333;
	51	+
	52	+ }
	53	+
	54	+
	55	+
	56	+ html,
	57	+ body {
	58	+ position: relative;
	59	+ height: 100%;
	60	+
	61	+ }
	62	+
	63	+ body {
	64	+ background: #eee;
	65	+ font-family: 'Pretendard';
	66	+ font-size: 14px;
	67	+ color: #000;
	68	+ margin: 0;
	69	+ padding: 0;
	70	+ }
	71	+
	72	+ .swiper {
	73	+ width: 100%;
	74	+ height: 100%;
	75	+ }
	76	+
	77	+ .swiper-slide {
	78	+ text-align: center;
	79	+ font-size: 18px;
	80	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	81	+ display: flex;
	82	+ justify-content: center;
	83	+ align-items: center;
	84	+ }
	85	+
	86	+ .swiper-slide img {
	87	+ height: 356px;
	88	+ display: block;
	89	+ object-fit: cover;
	90	+ }
	91	+
	92	+ /* .marketing-area{
	93	+ cursor: pointer;
	94	+ } */
	95	+ </style>
	96	+
20	97	<title>TAKENSOFT</title>
21	98	</head>
22	99
...	...	@@ -150,82 +227,5 @@
150	227
151	228
152	229
153		-<style scoped>
154		- /* 스크롤바 없애기 */
155		- body {
156		- -ms-overflow-style: none;
157		- /* 인터넷 익스플로러 */
158		- scrollbar-width: none;
159		- /* 파이어폭스 */
160		- }
161		-
162		- ::-webkit-scrollbar {
163		- display: none;
164		- }
165		-
166		- #header {
167		- position: fixed;
168		- top: 0;
169		- z-index: 3;
170		- border-bottom: 1px solid #ced4da;
171		- background-color: white;
172		- }
173		-
174		- #header .header .logo {
175		- background: url(../../resources/img/component/logo-color.png) no-repeat;
176		- width: 200px;
177		- background-size: contain;
178		- height: 25px;
179		-
180		-
181		- }
182		-
183		- #header .header nav li a {
184		- color: #333;
185		-
186		- }
187		-
188		-
189		-
190		- html,
191		- body {
192		- position: relative;
193		- height: 100%;
194		-
195		- }
196		-
197		- body {
198		- background: #eee;
199		- font-family: 'Pretendard';
200		- font-size: 14px;
201		- color: #000;
202		- margin: 0;
203		- padding: 0;
204		- }
205		-
206		- .swiper {
207		- width: 100%;
208		- height: 100%;
209		- }
210		-
211		- .swiper-slide {
212		- text-align: center;
213		- font-size: 18px;
214		- background: linear-gradient(#f8f9fa, #fff, #fff);
215		- display: flex;
216		- justify-content: center;
217		- align-items: center;
218		- }
219		-
220		- .swiper-slide img {
221		- height: 356px;
222		- display: block;
223		- object-fit: cover;
224		- }
225		-
226		- /* .marketing-area{
227		- cursor: pointer;
228		- } */
229		-</style>
230	230
231	231	</html> (No newline at end of file)

efa3073

b032dd1

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html

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

efa3073

b032dd1

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html

...	...	@@ -15,7 +15,86 @@
15	15
16	16	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
17	17
	18	+ <style scoped>
	19	+ .swiper-slide.on {
	20	+ width: 100%;
	21	+ height: 100%;
	22	+ background-color: #000;
	23	+ }
18	24
	25	+ /* 스크롤바 없애기 */
	26	+ body {
	27	+ -ms-overflow-style: none;
	28	+ /* 인터넷 익스플로러 */
	29	+ scrollbar-width: none;
	30	+ /* 파이어폭스 */
	31	+ }
	32	+
	33	+ ::-webkit-scrollbar {
	34	+ display: none;
	35	+ }
	36	+
	37	+ #header {
	38	+ position: fixed;
	39	+ top: 0;
	40	+ z-index: 3;
	41	+ border-bottom: 1px solid #ced4da;
	42	+ background-color: white !important;
	43	+ }
	44	+
	45	+ #header .header .logo {
	46	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	47	+ width: 200px;
	48	+ background-size: contain;
	49	+ height: 25px;
	50	+
	51	+
	52	+ }
	53	+
	54	+ #header .header nav li a {
	55	+ color: #333;
	56	+
	57	+ }
	58	+
	59	+
	60	+
	61	+ html,
	62	+ body {
	63	+ position: relative;
	64	+ height: 100%;
	65	+ }
	66	+
	67	+ body {
	68	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	69	+
	70	+ font-family: 'Pretendard';
	71	+ font-size: 14px;
	72	+ color: #000;
	73	+ margin: 0;
	74	+ padding: 0;
	75	+ }
	76	+
	77	+ .swiper {
	78	+ width: 100%;
	79	+ height: 100%;
	80	+ }
	81	+
	82	+ .swiper-slide {
	83	+ width: 100%;
	84	+ height: 100%;
	85	+ text-align: center;
	86	+ font-size: 18px;
	87	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	88	+ display: flex;
	89	+ justify-content: center;
	90	+ align-items: center;
	91	+ }
	92	+
	93	+ .swiper-slide img {
	94	+ display: block;
	95	+ object-fit: cover;
	96	+ }
	97	+ </style>
19	98
20	99	<title>TAKENSOFT</title>
21	100	</head>
...	...	@@ -25,7 +104,8 @@
25	104	<div class="swiper mySwiper" id="solution">
26	105	<div class="swiper-wrapper">
27	106	<div class="swiper-slide">
28		- <div class=" text-area pb60 pt60 slide-section flex align-center solution" style="align-content: center;">
	107	+ <div class=" text-area pb60 pt120 slide-section flex align-center solution"
	108	+ style="align-content: center;">
29	109
30	110	<div class="solution-title mb20">
31	111	<p>Taken BI Manager v1.0</p>
...	...	@@ -54,7 +134,7 @@
54	134	</div>
55	135	<div class="solution-text-box">
56	136	<h3 class="text-box-title mb10">특장점</h3>
57		- <div class="flex " style="gap: 30px;">
	137	+ <div class="flex " style="gap: 10px; flex-wrap: nowrap;">
58	138	<div class="flex-column">
59	139	<p>- DB 연계형 데이터 수집 서비스</p>
60	140	<p>- 데이터 시각화 시스템</p>
...	...	@@ -70,7 +150,7 @@
70	150	</div>
71	151	</div>
72	152	<div class="swiper-slide">
73		- <div class=" text-area pb60 pt60 slide-section flex align-center" style="align-content: center;">
	153	+ <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
74	154
75	155	<div class="traffic-title mb20">
76	156	<p>Traffic Agent</p>
...	...	@@ -129,7 +209,7 @@
129	209	</div>
130	210	</div>
131	211	<div class="swiper-slide">
132		- <div class=" text-area pb60 pt60 slide-section flex align-center" style="align-content: center;">
	212	+ <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
133	213
134	214	<div class="ai-title mb20">
135	215	<p>AI 안전통합 횡단보도 관리 솔루션</p>
...	...	@@ -186,8 +266,8 @@
186	266	</div>
187	267	</div>
188	268	<div class="swiper-slide meta-wrap">
189		- <div class=" text-area pb60 pt60 slide-section flex align-center" style="align-content: center;">
190		- <div class="meta-title mb20">
	269	+ <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
	270	+ <div class="meta-title mb40">
191	271	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
192	272	</div>
193	273
...	...	@@ -198,7 +278,8 @@
198	278	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
199	279	<p class="close-btn">x</p>
200	280	</div>
201		- <video src="../../resources/img/common/hanti.mp4" autostart ="false" autoplay="false" muted controls></video>
	281	+ <video src="../../resources/img/common/hanti.mp4" autostart="false" autoplay="false" muted
	282	+ controls></video>
202	283	</div>
203	284	</div>
204	285	<div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
...	...	@@ -238,44 +319,49 @@
238	319	</div>
239	320	</div>
240	321	</div>
241		- <div class="swiper-slide">
242		- <div class=" text-area pb60 pt60 slide-section flex align-center" style="align-content: center;">
	322	+ <div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
	323	+ <div style="width: 100%; height: 100%; flex-wrap: nowrap;" class="flex ">
243	324
244		- <div class="smart-title mb30" style="word-break: keep-all;">
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%;">
	325	+ <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
249	326
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>
254		- </div>
	327	+ <div class="smart-title mb30" style="word-break: keep-all;">
	328	+ <p>스마트제조 데이터 모니터링 서비스</p>
255	329	</div>
256		- <div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
	330	+ <div class="flex justify-between align-end taken-wrap-box"
	331	+ style="flex-wrap: nowrap; gap: 20px;">
	332	+ <div class="smart-area flex align-end solution-web-box " style="height: 100%; width: 100%;">
257	333
258		- <div class="text-after">
259		- <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
	334	+ <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
	335	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	336	+ <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
	337	+ <p>웹 및 앱 모니터링<br> 시스템 구축</p>
	338	+ </div>
260	339	</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>
	340	+ <div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
	341	+
	342	+ <div class="text-after">
	343	+ <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
	344	+ </div>
	345	+ <div class="solution-text-box">
	346	+ <h3 class="text-box-title mb10">주요기능</h3>
	347	+ <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
	348	+ <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
	349	+ <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
	350	+ </div>
	351	+ <div class="solution-text-box">
	352	+ <h3 class="text-box-title mb10">특장점</h3>
	353	+ <p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
	354	+ <p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
	355	+ <p>현재 공정 과정 모니터링 기능</p>
	356	+ </div>
272	357	</div>
273	358	</div>
274	359	</div>
275	360	</div>
	361	+
	362	+ <div id="footer"></div>
276	363	</div>
277	364
278		- <div id="footer"></div>
279	365	</div>
280	366
281	367	</div>
...	...	@@ -294,62 +380,54 @@
294	380
295	381
296	382	<script>
297		- $(document).ready(function () {
298		- $("#btnHeadquarter").click(function () {
299		- $("#btnHeadquarter").addClass('on');
300		- $("#btnDaeguBranch").removeClass('on');
301		- $("#contentDaeguBranch").hide();
302		-
303		- $("#contentHeadquarter").show();
304		- });
305		-
306		- $("#btnDaeguBranch").click(function () {
307		- $("#btnDaeguBranch").addClass('on');
308		- $("#btnHeadquarter").removeClass('on');
309		-
310		- $("#contentHeadquarter").hide();
311		-
312		- $("#contentDaeguBranch").show();
313		-
314		-
315		-
316		-
317		-
318		- });
319		- });
320	383
321	384
322	385	var swiper = new Swiper(".mySwiper", {
	386	+ cssMode: true,
323	387	direction: "vertical",
324	388	slidesPerView: 1,
325		- spaceBetween: 0,
326		- mousewheel: true,
327		- slidesOffsetAfter: 220,
328		-
	389	+ spaceBetween: 30,
	390	+ mousewheel: {
	391	+ eventsTarget: '.swiper-slide'
	392	+ },
	393	+ // slidesOffsetAfter: 220,
	394	+ pagination: {
	395	+ el: ".swiper-pagination",
	396	+ clickable: true,
	397	+ },
329	398	on: {
	399	+ init: function () {
	400	+ const slides = document.querySelectorAll('.swiper-slide');
	401	+ slides.forEach(slide => {
	402	+ slide.addEventListener('wheel', function (e) {
	403	+ const delta = e.wheelDelta \|\| -e.deltaY;
	404	+ console.log(delta)
	405	+ // 슬라이드 내부에서 상단 또는 하단 경계에 도달했을 경우 Swiper 슬라이드 전환 허용
	406	+ if ((this.scrollTop === (this.scrollHeight - this.offsetHeight) && delta < 0) \|\| (this.scrollTop === 0 && delta > 0)) {
	407	+ e.stopPropagation();
	408	+ }
	409	+ }, { passive: false });
330	410
	411	+
	412	+ });
	413	+ },
331	414	slideChange: function () {
332		- var currentIndex = this.realIndex;
333		- if (currentIndex === 0) {
334		- $('#header').removeClass('active');
	415	+
	416	+ const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
	417	+ const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
	418	+ const footer = document.getElementById('footer'); // 푸터 요소 선택
	419	+
	420	+ if (isLastSlide) {
	421	+ // 마지막 슬라이드에 도달했을 때 푸터 표시
	422	+ footer.style.display = 'block';
335	423	} else {
336		- $('#header').addClass('active');
	424	+ // 마지막 슬라이드가 아닐 때 푸터 숨기기 (필요한 경우)
	425	+ footer.style.display = 'none';
337	426	}
338		-
339	427	},
340		- reachEnd: function () {
341		- swiper.mousewheel.disable();
342		- },
343		-
344	428	}
345	429	});
346	430
347		- window.addEventListener('wheel', function (event) {
348		- if (event.deltaY < 0) {
349		- swiper.mousewheel.enable();
350		- } else if (event.deltaY > 0) {
351		- }
352		- });
353	431	$(function () {
354	432	$("#header").load("../layout/Header.html");
355	433	$("#footer").load("../layout/footer.html");
...	...	@@ -374,85 +452,6 @@
374	452
375	453
376	454
377		-<style scoped>
378		- .swiper-slide.on {
379		- width: 100%;
380		- height: 100%;
381		- background-color: #000;
382		- }
383	455
384		- /* 스크롤바 없애기 */
385		- body {
386		- -ms-overflow-style: none;
387		- /* 인터넷 익스플로러 */
388		- scrollbar-width: none;
389		- /* 파이어폭스 */
390		- }
391		-
392		- ::-webkit-scrollbar {
393		- display: none;
394		- }
395		-
396		- #header {
397		- position: fixed;
398		- top: 0;
399		- z-index: 3;
400		- border-bottom: 1px solid #ced4da;
401		- background-color: white;
402		- }
403		-
404		- #header .header .logo {
405		- background: url(../../resources/img/component/logo-color.png) no-repeat;
406		- width: 200px;
407		- background-size: contain;
408		- height: 25px;
409		-
410		-
411		- }
412		-
413		- #header .header nav li a {
414		- color: #333;
415		-
416		- }
417		-
418		-
419		-
420		- html,
421		- body {
422		- position: relative;
423		- height: 100%;
424		- }
425		-
426		- body {
427		- background: #eee;
428		- font-family: 'Pretendard';
429		- font-size: 14px;
430		- color: #000;
431		- margin: 0;
432		- padding: 0;
433		- }
434		-
435		- .swiper {
436		- width: 100%;
437		- height: 100%;
438		- }
439		-
440		- .swiper-slide {
441		- width: 100%;
442		- height: 100%;
443		- text-align: center;
444		- font-size: 18px;
445		- background: linear-gradient(#f8f9fa, #fff, #fff);
446		- display: flex;
447		- justify-content: center;
448		- align-items: center;
449		- }
450		-
451		- .swiper-slide img {
452		- height: 356px;
453		- display: block;
454		- object-fit: cover;
455		- }
456		-</style>
457	456
458	457	</html> (No newline at end of file)

efa3073

b032dd1

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html

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

Add a comment

Open 0
Closed 0

List

...	...	@@ -525,6 +525,9 @@
525	525	.pt100 {
526	526	padding-top: 10rem;
527	527	}
	528	+.pt120 {
	529	+ padding-top: 12rem;
	530	+}
528	531
529	532	.pb0 {
530	533	padding-bottom: 0;

...	...	@@ -29,6 +29,7 @@
29	29	.map-text,
30	30	.about-title p:nth-child(1) {
31	31	font-size: 2.5rem !important;
	32	+ padding-bottom: 1rem;
32	33	}
33	34
34	35
...	...	@@ -43,11 +44,17 @@
43	44	.sub-text,
44	45	.solution-sub-text {
45	46	font-size: 1rem !important;
	47	+ margin-bottom: 0rem;
46	48	}
47	49	.marketing-wrap-title h1{
48	50	font-size: 3rem;
49	51	}
50		-
	52	+ .accordion.active .accordion-num, .accordion.active .accordion-num span{
	53	+ font-size: 2rem;
	54	+ }
	55	+.history-box{
	56	+ height: 100%;
	57	+}
51	58	.solution-box {
52	59	width: 100%;
53	60	height: calc(100% - 182px) !important;
...	...	@@ -164,7 +171,6 @@
164	171
165	172	.slide-wrap {
166	173	width: 100%;
167		- height: 100% !important;
168	174	}
169	175
170	176	.text-area {
...	...	@@ -618,6 +624,10 @@
618	624	font-size: 1.2rem;
619	625	}
620	626
	627	+ .taken-area p{
	628	+ font-size: 1.5rem;
	629	+ }
	630	+
621	631	.traffic-button {
622	632	justify-content: center;
623	633	}
...	...	@@ -701,7 +711,9 @@
701	711	padding-bottom: 0rem !important;
702	712	object-fit: contain;
703	713	}
704		-
	714	+ .solution-title, .traffic-title, .ai-title, .meta-title, .smart-title{
	715	+ margin-bottom: 10px !important;
	716	+ }
705	717
706	718	.box-wrap div p {
707	719	text-align: center;

...	...	@@ -9,12 +9,14 @@
9	9	text-align: center;
10	10	}
11	11
12		-.mobil-wrap{
	12	+.mobil-wrap {
13	13	display: none;
14	14	}
15		-.mobil-menu{
	15	+
	16	+.mobil-menu {
16	17	display: none;
17	18	}
	19	+
18	20	#header.active {
19	21	border-bottom: 1px solid #ced4da;
20	22	background-color: white;
...	...	@@ -47,9 +49,11 @@
47	49	color: #333;
48	50	display: block;
49	51	}
	52	+
50	53	#header.active .header .mobil-menu ul {
51	54	background-color: #fff;
52	55	}
	56	+
53	57	.slide-back {
54	58	background: url(../img/common/main-2.png)no-repeat;
55	59	width: 0;
...	...	@@ -221,6 +225,7 @@
221	225	.solution-ani:nth-child(3) {
222	226	animation-delay: 0.5s;
223	227	}
	228	+
224	229	.solution-ani:nth-child(4) {
225	230	animation-delay: 0.7s;
226	231	}
...	...	@@ -232,9 +237,11 @@
232	237	.solution-ani:nth-child(6) {
233	238	animation-delay: 1s;
234	239	}
	240	+
235	241	.solution-ani:nth-child(7) {
236	242	animation-delay: 1.2s;
237	243	}
	244	+
238	245	.solution-ani:nth-child(8) {
239	246	animation-delay: 1.4s;
240	247	}
...	...	@@ -250,9 +257,11 @@
250	257	}
251	258
252	259	.solution-text.active {
	260	+ opacity: 1;
	261	+ height: 100%;
253	262
254		- -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
255		- animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	263	+ transition: all 1s ease;
	264	+ animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
256	265
257	266
258	267	}
...	...	@@ -268,6 +277,18 @@
268	277	animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
269	278	}
270	279
	280	+@keyframes tracking-in-expand {
	281	+ 0% {
	282	+ letter-spacing: -0.5em;
	283	+ opacity: 0;
	284	+ }
	285	+ 40% {
	286	+ opacity: 0.6;
	287	+ }
	288	+ 100% {
	289	+ opacity: 1;
	290	+ }
	291	+ }
271	292
272	293	.solution-box {
273	294	flex-wrap: nowrap;
...	...	@@ -406,10 +427,12 @@
406	427	.ivory-box div p:nth-child(1) {
407	428	color: #242a30;
408	429	}
409		-.traffic-btn:hover{
	430	+
	431	+.traffic-btn:hover {
410	432	transform: scale(1.1);
411	433	transition: all 0.5s ease;
412	434	}
	435	+
413	436	.hvr-grow {
414	437	display: inline-block;
415	438	vertical-align: middle;
...	...	@@ -532,14 +555,6 @@
532	555
533	556
534	557
535		-/* .slide1 ,.slide2,.slide3,.slide4,.slide5,.slide6{
536		- border-radius: 10px;
537		- width: 100%;
538		- height: 400px;
539		- box-shadow: 2px 2px 5px #5454541b;
540		- background-color: #F8F9FA;
541		-
542		-} */
543	558
544	559
545	560	.innerSwiper-textBox {
...	...	@@ -648,23 +663,23 @@
648	663
649	664	#footer {
650	665	width: 100%;
651		- /* height: 300px; */
652	666	padding: 30px;
653		- /* opacity: 0; */
654		- /* display: none; */
655	667	position: relative;
656		- bottom: 0px;
	668	+ bottom:-10%;
657	669	left: 0;
658	670	z-index: 56;
659	671	transition: all 0.5s;
660	672	background-color: #333;
661	673	}
662		-/* #footer.active {
663		- opacity: 1;
664		- display: block;
	674	+#footer img{
	675	+ text-align: left !important;
	676	+ width: 200px !important;
	677	+ }
665	678
666		-} */
667		-
	679	+#footer p{
	680	+ font-size: 1.6rem;
	681	+ text-align: left;
	682	+ }
668	683
669	684	.show-footer {
670	685	margin-bottom: 100px;
...	...	@@ -696,9 +711,9 @@
696	711	flex: 0 0 20%;
697	712	}
698	713
699		-.copyright {
700		- text-align: center;
701		-}
	714	+.copyright{
	715	+ text-align: center !important;
	716	+ }
702	717
703	718
704	719	/* solution page */
...	...	@@ -811,7 +826,7 @@
811	826
812	827
813	828	.taken-area p {
814		- font-size: 1.5rem;
	829	+ font-size: 1.8rem;
815	830	font-weight: 600;
816	831	padding-left: 20px;
817	832	}
...	...	@@ -828,14 +843,15 @@
828	843	background-color: #F8F9FA;
829	844	padding: 13px;
830	845	text-align: center;
831		- font-size: 1.6rem;
	846	+ font-size: 2rem;
832	847	border-radius: 10px;
833	848	font-weight: 600;
	849	+ z-index: 2;
834	850	}
835	851
836	852	.solution-text-box {
837	853	width: 100%;
838		- padding: 15px 40px;
	854	+ padding: 15px 30px;
839	855	border-radius: 10px;
840	856	background-color: #fff;
841	857	box-shadow: 2px 2px 5px #3e3e3e30;
...	...	@@ -843,9 +859,9 @@
843	859
844	860	.solution-text-box p {
845	861	font-weight: 500;
846		- font-size: 1.2rem;
847		- padding-left: 20px;
848		- line-height: 2;
	862	+ font-size: 1.6rem;
	863	+ padding-left: 10px;
	864	+ line-height: 1.5;
849	865	}
850	866
851	867	.text-box-title {
...	...	@@ -878,7 +894,7 @@
878	894	color: #fff;
879	895	border-radius: 50px;
880	896	font-weight: 600;
881		- font-size: 1.5rem;
	897	+ font-size: 1.8rem;
882	898	font-family: 'Pretendard';
883	899	position: relative;
884	900
...	...	@@ -966,7 +982,6 @@
966	982	background-size: cover;
967	983	width: 30%;
968	984	height: 70%;
969		- z-index: -1;
970	985	}
971	986
972	987	.marketing-wrapper {
...	...	@@ -1365,7 +1380,7 @@
1365	1380
1366	1381	.customized-box p {
1367	1382	font-size: 1.5rem;
1368		- font-family: 'Pretendard';
	1383	+ font-family: 'Pretendard';
1369	1384	font-weight: 600;
1370	1385	}
1371	1386
...	...	@@ -1382,20 +1397,23 @@
1382	1397	object-fit: contain;
1383	1398	}
1384	1399
1385		-.etc-box-title{
	1400	+.etc-box-title {
1386	1401	font-weight: 600;
1387	1402	text-align: center !important;
1388	1403	font-size: 2.2rem !important;
1389	1404	}
1390		-.etc-box p{
	1405	+
	1406	+.etc-box p {
1391	1407	text-align: left;
1392	1408	}
1393		-.Portfolio{
	1409	+
	1410	+.Portfolio {
1394	1411	margin: auto;
1395	1412	align-content: center;
1396	1413	padding-top: 6rem;
1397	1414	text-align: center;
1398	1415	}
	1416	+
1399	1417	.etc-box p {
1400	1418	font-size: 1.8rem;
1401	1419	line-height: 2;
...	...	@@ -1420,13 +1438,15 @@
1420	1438	z-index: 1111;
1421	1439	background-color: #242a305e;
1422	1440	}
1423		-.mobil-swiper{
	1441	+
	1442	+.mobil-swiper {
1424	1443	display: none;
1425	1444	}
	1445	+
1426	1446	.traffic-video {
1427	1447	position: absolute;
1428	1448	top: 50%;
1429		- transform: translate(-50% ,-50%);
	1449	+ transform: translate(-50%, -50%);
1430	1450	left: 50%;
1431	1451	z-index: 111;
1432	1452	width: 50%;
...	...	@@ -1445,7 +1465,7 @@
1445	1465	}
1446	1466
1447	1467	.traffic-video p {
1448		- font-size:3rem;
	1468	+ font-size: 3rem;
1449	1469	color: #213F99;
1450	1470	font-weight: 600;
1451	1471	}
...	...	@@ -1457,9 +1477,9 @@
1457	1477	.etc-wrap-title p {
1458	1478	font-size: 2rem;
1459	1479	}
1460		-.etc-wrap-text p{
1461		- font-size: 2rem ;
	1480	+
	1481	+.etc-wrap-text p {
	1482	+ font-size: 2rem;
1462	1483	font-weight: 600;
1463	1484	padding: 10px 0;
1464		-}
1465		-
	1485	+} (No newline at end of file)

Delete comment