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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style scoped>
#footer {
bottom: 0%;
}
.footer-img {
text-align: left;
}
#header {
position: fixed;
top: 0;
z-index: 3;
}
.dropdown {
opacity: 0;
visibility: hidden;
position: absolute;
top: 35px;
right: 0;
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #ffffff43;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1;
}
html,
body {
position: relative;
height: 100%;
-ms-overflow-style: none;
}
.mobile-menu-button,
.mobile-menu-button-close {
font-size: 2rem;
color: #fff;
height: 29px;
width: 29px;
}
.mobil-menu {
width: 100%;
height: 100%;
top: 40px;
}
.mobil-menu ul {
list-style: none;
margin: 0;
background-color: #ffffff43;
}
.mobil-menu ul li ul li a {
font-weight: 500;
color: #fff;
font-size: 1.2rem !important;
}
::-webkit-scrollbar {
display: none;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
justify-content: center;
align-items: center;
}
.slide-wrap {
width: 100%;
height: 100%;
}
.main-wrap {
background: url(../resources/img/common/main.png) no-repeat;
width: 100%;
height: 100%;
background-size: cover;
background-position: bottom;
}
.main-text {
padding-bottom: 50px;
}
.main-text h2 {
width: 100%;
height: 20%;
}
.main-text div {
width: 100%;
}
.main-text div img {
width: 30px;
}
.main-wrap .text-area h2 {
text-align: left;
font-size: 6rem;
font-weight: 600;
color: white;
font-family: 'Pretendard';
}
.main-wrap .text-area h2 span {
font-weight: 900;
}
.text-main {
word-break: normal;
font-weight: 600;
color: #213f99;
font-family: 'Pretendard';
font-size: 5rem;
}
.text-main span {
color: #F29600;
}
.gradient-back {
background: linear-gradient(#e9ebff, #fff, #fff);
}
.gradient-bottom {
background: linear-gradient(#fff, #fff, #e9ebff);
}
.slide-solution {
font-family: 'Pretendard';
}
.innerSwiper {
height: 75%;
transition-timing-function: linear;
}
</style>
<title>TAKENSOFT</title>
</head>
<body>
<div id="header"></div>
<!-- Swiper -->
<div class="swiper mySwiper main-wrapper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-wrap">
<div class="main-wrap">
<div class="text-area flex align-end main-text">
<div>
<!-- <img src="../resources/img/common/mouse.png" alt=""> -->
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-wrap slide-back scale-in-br">
<div class="text-area pt60 slide-section flex align-center justify-center pb60">
<div style="height: 20%;">
<p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
class="text-event">혁신으로 선도</span>합니다.</p>
<p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
</div>
</div>
</div>
</div>
<div class="swiper-slide gradient-back">
<div class="slide-wrap slide-solution ">
<div class=" text-area pt60 pb60 slide-section flex align-center" style="align-content: center;">
<div class="sub-text-area mb20" style="width: 100%;">
<p class=" solution-text pb30">테이큰 소프트는</p>
<p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
</p>
</div>
<div id="container" class="flex solution-box" style="flex-wrap: nowrap;">
<div class="box box1" style="display: none;">
<p class="mb15 box-area">데이터관리분야</p>
<p>데이터 관리 솔루션 Taken BI Manager</p>
</div>
<div class="box box2" style="display: none;">
<p class="mb15 box-area">스마트시티 분야</p>
<p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
</div>
<div class="box box3" style="display: none;">
<p class="mb15 box-area">모빌리티 분야</p>
<p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
</div>
<div class="box box4" style="display: none;">
<p class="mb15 box-area">스마트팩토리 분야</p>
<p>제조기업 공정 관리 모니터링 서비스</p>
</div>
<div class="box box5" style="display: none;">
<p class="mb15 box-area">헬스케어 분야</p>
<p>시니어 스마트 케어 모니터링 플랫폼</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide portfolio-zone">
<div class=" Portfolio pt60 pb60 flex align-center" style="align-content: center; width: 100%; ">
<div style="width: 1200px; margin: auto; " class="pt120">
<p class="portfolio-text mb70 ">PORTFOLIO</p>
</div>
<div class="swiper innerSwiper">
<div class="swiper-wrapper">
<div class=" swiper-slide " data-url=" ../../views/pages/DataAnalysis.html">
<img src="../resources/img/common/innerimg-1.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
<p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
</div>
</div>
<div class="swiper-slide" data-url=" ../../views/pages/Visualization.html">
<img src="../resources/img/common/innerimg-2.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
<p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
구축합니다.</p>
</div>
</div>
<div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
<img src="../resources/img/common/innerimg-3.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">스마트시티 솔루션 공급</p>
<p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
</div>
</div>
<div class="swiper-slide " data-url="../../views/pages/Data.html">
<img src="../resources/img/common/innerimg-4.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
<p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
</div>
</div>
<div class="swiper-slide " data-url="../../views/pages/Customized.html">
<img src="../resources/img/common/innerimg-5.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
<p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
</div>
</div>
<div class="swiper-slide " data-url="../../views/pages/Etc.html">
<img src="../resources/img/common/innerimg-6.png" alt="">
<div class=" innerSwiper-textBox">
<p class="innerSwiper-title">기타사례</p>
<p class="innerSwiper-title"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide flex" style="overflow-y: auto; height: 100%;">
<div class="slide-wrap pt120 pb60 slide-solution gradient-bottom ">
<div class=" text-area pb60 flex align-center justify-center"
style="height: 100%; align-content: center;">
<div style="width: 100%;" class="sub-text-area mb20">
<p class="map-text ">오시는길</p>
</div>
<div style="width: 100%;" class="flex justify-end map-btn pb20">
<button id="btnHeadquarter">본사</button>
<button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
</div>
<div class="map-wrap">
<div id="contentHeadquarter" style="height: 500px;">
<div id="map1" style="width:1200px;height:100%;"></div>
<div class="address-box flex">
<p class="address-tile">본사</p>
<p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)
</p>
</div>
</div>
<div id="contentDaeguBranch" style="display: none; height: 500px;">
<div id="map2" style="width:1200px;height:100%;"></div>
<div class="address-box flex">
<p class="address-tile">대구지사</p>
<p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2ccd5508acc8b99103687aab41907f94"></script>
<script>
// 본사지도
var mapContainer = document.getElementById('map1'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.8260208900541, 128.75636298231913),
level: 2 // 지도의 확대 레벨
};
var map1 = new kakao.maps.Map(mapContainer, mapOption);
var imageSrc = '../resources/img/common/marker.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(161, 101), // 마커이미지의 크기입니다
imageOption = { offset: new kakao.maps.Point(90, 110) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커가 표시될 위치입니다
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerPosition1 = new kakao.maps.LatLng(35.8260208900541, 128.75636298231913);
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
// 첫 번째 마커를 생성합니다
var marker1 = new kakao.maps.Marker({
position: markerPosition1,
image: markerImage // 수정된 마커 이미지 설정
});
// 첫 번째 마커가 지도 위에 표시되도록 설정합니다
marker1.setMap(map1); // 수정된 map 변수 사용
// 지사 지도
var mapContainer2 = document.getElementById('map2'),
mapOption2 = {
center: new kakao.maps.LatLng(35.835332450870354, 128.68246038604707),
level: 2,
};
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
// 마커가 표시될 위치입니다
var markerPosition2 = new kakao.maps.LatLng(35.835332450870354, 128.68246038604707);
// 맵 2(대구 지사)에 대한 마커 이미지 설정과 마커 생성
var imageSrc2 = '../resources/img/common/marker.png', // 마커 이미지의 주소입니다 (필요에 따라 변경 가능)
imageSize2 = new kakao.maps.Size(161, 101), // 마커 이미지의 크기입니다 (필요에 따라 변경 가능)
imageOption2 = { offset: new kakao.maps.Point(90, 110) }; // 마커 이미지의 옵션입니다 (필요에 따라 변경 가능)
// 대구 지사의 마커가 표시될 위치입니다
var markerPosition2 = new kakao.maps.LatLng(35.835332450870354, 128.68246038604707);
// 대구 지사의 마커 이미지정보를 가지고 있는 마커 이미지를 생성합니다
var markerImage2 = new kakao.maps.MarkerImage(imageSrc2, imageSize2, imageOption2);
// 대구 지사 위치에 마커를 생성합니다
var marker2 = new kakao.maps.Marker({
position: markerPosition2,
image: markerImage2 // 마커 이미지 설정
});
// 대구 지사의 마커가 지도 위에 표시되도록 설정합니다
marker2.setMap(map2);
function resizeMap() {
var mapContainer2 = document.getElementById('map2');
var mapContainer = document.getElementById('map1');
mapContainer2.style.width = '1200px';
mapContainer.style.width = '1200px';
mapContainer2.style.height = '500px';
mapContainer.style.height = '500px';
}
function relayout() {
map2.relayout();
map1.relayout();
}
$(document).ready(function () {
document.getElementById('btnHeadquarter').classList.add('on');
$("#btnHeadquarter").click(function () {
$("#btnHeadquarter").addClass('on');
$("#btnDaeguBranch").removeClass('on');
$("#contentDaeguBranch").hide();
$("#contentHeadquarter").show();
map1.relayout();
map1.setCenter(new kakao.maps.LatLng(35.8260208900541, 128.75636298231913))
});
$("#btnDaeguBranch").click(function () {
$("#btnDaeguBranch").addClass('on');
$("#btnHeadquarter").removeClass('on');
$("#contentHeadquarter").hide();
$("#contentDaeguBranch").show();
map2.relayout();
map2.setCenter(new kakao.maps.LatLng(35.835332450870354, 128.68246038604707))
});
});
var swiper1 = new Swiper(".mySwiper", {
cssMode: true,
direction: "vertical",
slidesPerView: 1,
spaceBetween: 0,
speed: 1000,
mousewheel: {
eventsTarget: '.swiper-slide'
},
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 () {
if (this.activeIndex === 1) {
$('.text-event').addClass('active');
$('.sub-text').addClass('active');
$('.slide-back').addClass('active');
} else {
$('.text-event').removeClass('active');
$('.sub-text').removeClass('active');
$('.slide-back').removeClass('active');
}
if (this.activeIndex === 2) {
$('.solution-text').addClass('active');
$('.solution-sub-text').addClass('active');
$('.box').addClass('active');
} else {
$('.solution-text').removeClass('active');
$('.solution-sub-text').removeClass('active');
$('.box').removeClass('active');
}
var currentIndex = this.realIndex;
if (currentIndex === 0) {
$('#header').removeClass('active');
} else {
$('#header').addClass('active');
}
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';
}
},
},
});
window.addEventListener('load', () => {
const boxes = document.querySelectorAll('.box');
let delay = 0.6;
boxes.forEach(box => {
setTimeout(() => {
box.style.display = 'block';
box.style.animationDelay = `${delay}s`;
delay += 0.3;
}, delay * 3000);
});
});
// 헤더,푸터 불러오기
$(function () {
$("#header").load("../views/layout/header.html");
$("#footer").load("../views/layout/footer.html");
// $("#footer").hide();
});
var innerswiper = new Swiper(".innerSwiper", {
slidesPerView: 3,
spaceBetween: 40,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
loop: true,
speed: 5000,
// loopAdditionalSlides: 1,
breakpoints: {
250: {
slidesPerView: 1,
spaceBetween: 40
},
// 화면의 넓이가 320px 이상일 때
320: {
slidesPerView: 1,
spaceBetween: 40
},
// 화면의 넓이가 640px 이상일 때
640: {
slidesPerView: 3,
spaceBetween: 40,
},
},
});
document.addEventListener('DOMContentLoaded', function () {
var newsDivs = document.querySelectorAll('div[data-url]');
newsDivs.forEach(function (div) {
div.addEventListener('click', function () {
var url = this.getAttribute('data-url');
window.open(url, '_blank');
});
// 클릭 가능한 요소임을 시각적으로 나타내기 위해 커서 스타일 변경
div.style.cursor = 'pointer';
});
});
</script>
</html>