File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="../../resources/css/reset.css">
<link rel="stylesheet" href="../../resources/css/style.css">
<link rel="stylesheet" href="../../resources/css/component.css">
<link rel="stylesheet" href="../../resources/css/common.css">
<link rel="stylesheet" href="../../resources/css/responsive.css">
<style scoped>
.swiper-slide.on {
width: 100%;
height: 100%;
background-color: #000;
}
/* 스크롤바 없애기 */
body {
-ms-overflow-style: none;
/* 인터넷 익스플로러 */
scrollbar-width: none;
/* 파이어폭스 */
}
::-webkit-scrollbar {
display: none;
}
#header {
position: fixed;
top: 0;
z-index: 3;
border-bottom: 1px solid #ced4da;
background-color: white !important;
}
#header .header .logo {
background: url(../../resources/img/component/logo-color.png) no-repeat;
width: 200px;
background-size: contain;
height: 25px;
}
#header .header nav li a {
color: #333;
}
#header .mobil-menu {
background-color: #fff;
}
html,
body {
position: relative;
height: 100%;
}
body {
font-family: 'Pretendard';
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
text-align: center;
font-size: 18px;
background: linear-gradient(#f8f9fa, #fff, #fff);
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
object-fit: cover;
padding: 1rem 0;
z-index: 3;
}
.dropdown {
background-color: #fff !important;
}
</style>
<title>TAKENSOFT</title>
</head>
<body>
<div id="header"></div>
<div class="swiper mySwiper" id="solution">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class=" text-area pb60 pt120 slide-section flex align-center solution"
style="align-content: center;">
<div class="solution-title mb20">
<p>Taken BI Manager v1.0</p>
</div>
<div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px;">
<div class="taken-area taken-conteiner flex align-end solution-web-box"
style="gap: 20px; height: 100%; width: 50%;">
<img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
<div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
<p>데이터 수집,저장,관리</p>
<p>솔루션 제공 기반 맞춤형 서비스</p>
</div>
</div>
<div class="taken-area taken-conteiner taken-area-text flex "
style="gap: 20px; height: 100%; width: 50%;">
<div class="text-after">
<p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
<p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
서비스를 제공합니다.</p>
<P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10 ml30">주요기능</h3>
<p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
<p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
<p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10 ml30">특장점</h3>
<div class="flex " style="gap: 10px; flex-wrap: nowrap;">
<div class="flex-column">
<p>- DB 연계형 데이터 수집 서비스</p>
<p>- 데이터 시각화 시스템</p>
</div>
<div class="flex-column">
<p>- 데이터 저장/관리 시스템</p>
<p>- 관리 서비스 시스템</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
<div class="traffic-title mb20">
<p>Traffic Agent</p>
</div>
<div class="flex justify-end traffic-button ">
<button class="traffic-btn traffic-btn1 ">영상보기</button>
</div>
<div class="video-wrap video-wrap1 mb20 ">
<div class="traffic-video">
<div class="flex justify-between mb10 viedeo-text-box">
<p>Traffic Agent</p>
<p class="close-btn1">x</p>
</div>
<video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
</div>
</div>
<div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
<div class="taken-area taken-conteiner flex align-end solution-after" style="height: 100%;">
<div class="text-after mb10">
<p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
</div>
<div class="flex solution-area" style="gap: 20px; ">
<div class="solution-text-box " style="padding: 15px 33px; ">
<h3 class="text-box-title mb10">주요기능</h3>
<p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
<p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
<p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
<p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10">특장점</h3>
<p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
<p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
<p>- 위치정보 공유 및 검색 기능</p>
</div>
</div>
</div>
<div class="traffic-area flex align-end justify-end solution-web-box"
style="height: 100%; width: 100%;">
<img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">
<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
<p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
<p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
<div class="ai-title mb20">
<p>AI 안전통합 횡단보도 관리 솔루션</p>
</div>
<div class="flex justify-end traffic-button">
<button class="traffic-btn traffic-btn2">영상보기</button>
</div>
<div class="video-wrap video-wrap2">
<div class="traffic-video">
<div class="flex justify-between mb10 viedeo-text-box">
<p>AI 안전통합 횡단보도 관리 솔루션</p>
<p class="close-btn2">x</p>
</div>
<video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
</div>
</div>
<div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
<div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
<img src="../../resources/img/common/ai-img.png" alt="">
<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
<p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
<p>GIS 기반 통합 관제<br> 시스템 구축</p>
</div>
</div>
<div class="taken-area taken-conteiner flex align-end" style="gap: 20px; width: 100%;">
<div class="text-after solution-area-two">
<p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
</div>
<div class="solution-text-box ">
<h3 class="text-box-title mb10">주요기능</h3>
<p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
<p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
<p>- 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
<p>- 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10">특장점</h3>
<div class="flex" style="gap: 30px; flex-wrap: nowrap;">
<div class="flex-column">
<p>- 횡단보도 관제 분석 시스템 구축</p>
<p>- 현장모니터링 화면 구성</p>
</div>
<div class="flex-column">
<p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
<p>- GIS 기반 관제 화면 구성</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide meta-wrap">
<div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
<div class="meta-title mb40">
<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
</div>
<div class="flex justify-end traffic-button">
<button class="traffic-btn traffic-btn3">영상보기</button>
</div>
<div class="video-wrap video-wrap3">
<div class="traffic-video">
<div class="flex justify-between viedeo-text-box">
<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
<p class="close-btn3">x</p>
</div>
<video src="../../resources/img/common/hanti.mp4" autostart="false" autoplay="false" muted
controls></video>
</div>
</div>
<div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
<div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
<div class="text-after ">
<p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
</div>
<div class="solution-text-box" style="padding: 15px 33px;">
<h3 class="text-box-title mb10">주요기능</h3>
<p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
<p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
<p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10">특장점</h3>
<p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
<p>- 실시간 채팅 및 방명록 기능 탑재</p>
<p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
</div>
</div>
<div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
<img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
<p>가상과 현실공간을<br>연결하는 플랫폼</p>
<p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
<div style="width: 100%; height: 100%; flex-wrap: nowrap;" class="flex ">
<div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
<div class="smart-title mb30" style="word-break: keep-all;">
<p>스마트제조 데이터 모니터링 서비스</p>
</div>
<div class="flex justify-between align-end taken-wrap-box"
style="flex-wrap: nowrap; gap: 20px;">
<div class="smart-area flex align-end solution-web-box " style="height: 100%; width: 100%;">
<img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
<p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
<p>웹 및 앱 모니터링<br> 시스템 구축</p>
</div>
</div>
<div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
<div class="text-after">
<p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10">주요기능</h3>
<p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
<p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
<p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
</div>
<div class="solution-text-box">
<h3 class="text-box-title mb10">특장점</h3>
<p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
<p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
<p>현재 공정 과정 모니터링 기능</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
function updateSwiperStylesheet() {
// 화면 너비가 750px을 초과하는지 확인
if (window.innerWidth > 800) {
// 이미 해당 스타일시트가 추가되었는지 확인
var isSwiperCssAdded = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
if (!isSwiperCssAdded) {
// <head> 요소 선택
var head = document.head;
// <link> 요소 생성
var link = document.createElement("link");
// <link> 요소에 속성 설정
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
// 생성한 <link>를 <head>에 추가
head.appendChild(link);
}
} else {
// 화면 너비가 750px을 초과하지 않을 경우, 스타일시트 제거
var swiperCss = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
if (swiperCss) {
swiperCss.parentNode.removeChild(swiperCss);
}
}
}
// 페이지 로드 시 스타일시트 업데이트
updateSwiperStylesheet();
// 창 크기가 변경될 때마다 스타일시트 업데이트
window.addEventListener('resize', updateSwiperStylesheet);
var swiper = new Swiper(".mySwiper", {
cssMode: true,
direction: "vertical",
slidesPerView: 1,
spaceBetween: 0,
mousewheel: {
eventsTarget: '.swiper-slide'
},
// slidesOffsetAfter: 220,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
init: function () {
const slides = document.querySelectorAll('.swiper-slide');
slides.forEach(slide => {
slide.addEventListener('wheel', function (e) {
const delta = e.wheelDelta || -e.deltaY;
console.log(delta)
// 슬라이드 내부에서 상단 또는 하단 경계에 도달했을 경우 Swiper 슬라이드 전환 허용
if ((this.scrollTop === (this.scrollHeight - this.offsetHeight) && delta < 0) || (this.scrollTop === 0 && delta > 0)) {
e.stopPropagation();
}
}, { passive: false });
});
},
slideChange: function () {
const swiper = this; // 'this'는 현재 Swiper 인스턴스를 참조합니다.
const isLastSlide = swiper.activeIndex === (swiper.slides.length - 1); // 마지막 슬라이드인지 확인
const footer = document.getElementById('footer'); // 푸터 요소 선택
if (isLastSlide) {
// 마지막 슬라이드에 도달했을 때 푸터 표시
footer.style.display = 'block';
} else {
// 마지막 슬라이드가 아닐 때 푸터 숨기기 (필요한 경우)
footer.style.display = 'none';
}
},
}
});
$(function () {
$("#header").load("../layout/Header.html");
$("#footer").load("../layout/footer.html");
$('.video-wrap').hide();
});
$('.close-btn1').click(function () {
$('.video-wrap1').hide();
});
$('.close-btn2').click(function () {
$('.video-wrap2').hide();
});
$('.close-btn3').click(function () {
$('.video-wrap3').hide();
});
$('.traffic-btn1').click(function () {
$('.video-wrap').hide();
$('.video-wrap1').show();
});
$('.traffic-btn2').click(function () {
$('.video-wrap').hide();
$('.video-wrap2').show();
});
$('.traffic-btn3').click(function () {
$('.video-wrap').hide();
$('.video-wrap3').show();
});
</script>
</html>