Code - rlagkdud898/TAKENSOFT

<!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="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <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> body { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } .history-box { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* height: 80% !important; */ } html, body { position: relative; height: 100%; } body { background: #eee; font-family: 'Pretendard'; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .test { height: 100%; } .container { width: 1200px; height: 70%; display: flex; flex-wrap: nowrap; border-radius: 20px; overflow: hidden; } .content img { width: 100px; height: 150px; } #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; } .dropdown { background-color: #fff !important; } .about .content .flex{ margin-bottom: 2rem; border-bottom: 1px solid #33333322; } .month-text p{ word-break: keep-all; } </style> <title>TAKENSOFT</title> </head> <body> <div id="header"></div> <div class="swiper mySwiper"> <div class="swiper-wrapper about"> <div class="swiper-slide about-wrapper"> <div class="about-wrap slide-wrap "> <div class="flex"> <div class="about-title mb90" style="width: 100%;"> <p class="mb20">ABOUT US</p> <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p> </div> <div class=" flex justify-center about-area" style="width: 100%; gap: 190px; margin-bottom: 50px;"> <div class="about-radius-left solution-ani"> <p class="about-text">공감</p> <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p> </div> <div class="about-radius solution-ani"> <p class="about-text">구현</p> <p class="about-sub-text">가치를 주는 솔루션 도출</p> </div> <div class="about-radius-right solution-ani"> <p class="about-text">생각</p> <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p> </div> </div> <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;"> <div class="about-radius-bottom-left "> <p class="about-text">검증</p> <p class="about-sub-text">결과물의 철저한 검증</p> </div> <div class="about-radius-bottom-right solution-ani"> <p class="about-text">소통</p> <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="text-area flex align-center justify-center pb60 pt60" style="align-content: center;"> <div class="about-title mb20" style="width: 100%;"> <p class="mb20">Business</p> <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로 해결합니다.</p> </div> <div class="container silde-box"> <div class="accordion flex justify-between" style="background-image: url(../../resources/img/common/about-img1.png);"> <div class="slideText pl20"> <p class="accordion-num"><span>01.</span> AI Solution</p> <p>AI 기술 종합 관리를 통한 솔루션 구현</p> </div> <div class="slideImg"> <img src="../../resources/img/common/about-img-db.png" alt=""> </div> <div class="slideTextDtail"> <div> <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p> <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p> <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p> </div> <div class=" flex justify-between business-box" style="flex-wrap: nowrap;"> <div style="width: 20%;"> <p>[대표사례]</p> </div> <div class=" flex justify-between accordion-box"> <p>·도로 위험 감지 시스템</p> <p>·경로 최적화 서비스</p> <p>·안개 감지 시스템</p> <p>·위치 기반 기자재 관리 및 모니터링 서비스</p> </div> </div> </div> </div> <div class="accordion " style="background-image: url(../../resources/img/common/about-img2.png);"> <div class="slideText pl20"> <p class="accordion-num"><span>02.</span> System Design</p> <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p> </div> <div class="slideImg"> <img src="../../resources/img/common/about-img-bg02.png" alt=""> </div> <div class="slideTextDtail"> <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을 통해 고객사 최적화 UI 도출 </p> <div class=" flex justify-start business-box" style="flex-wrap: nowrap;"> <div style="width: 20%;"> <p>[대표사례]</p> </div> <div class="flex-column"> <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p> <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p> <p>· 경로 최적화 서비스</p> <p>· 시니어 스마트 케어 모니터링 플랫폼</p> </div> </div> </div> </div> <div class="accordion" style="background-image: url(../../resources/img/common/about-img3.png);"> <div class="slideText pl20"> <p class="accordion-num"><span>03.</span> Data Science </p> <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p> </div> <div class="slideImg"> <img src="../../resources/img/common/about-img-bg03.png" alt=""> </div> <div class="slideTextDtail"> <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p> <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p> <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해 수요기관 및 기업 확장 </p> <div class=" flex justify-start business-box" style="flex-wrap: nowrap;"> <div style="width: 20%;"> <p>[대표사례]</p> </div> <div class="flex-column"> <p>· 데이터 품질관리 컨설팅</p> <p>· AI 안전통합 횡단보도 플랫폼</p> </div> </div> </div> </div> </div> </div> </div> <div class="swiper-slide flex history" style="overflow-y: auto; height: 100%;"> <div style="width: 100%; height: 100%; flex-wrap: nowrap;" class="flex "> <div class="text-area flex pb60 pt120" style="align-content: center;"> <div class="about-title mb20" style="width: 100%;"> <p>History</p> </div> <div class="flex history-area" style="height: 100%; width: 100%; gap: 100px;"> <div class="years" id="years"> <div class="year tab active-year" data-year="section1">2021</div> <div class="year tab" data-year="section2">2022</div> <div class="year tab" data-year="section3">2023</div> </div> <div style="align-content: center; overflow-y: auto; height: 100%;" class="history-box"> <div class="test"> <div class="content section" id="section1"> <div class="flex"> <p class="month ">5월</p> <div class="month-text" style="text-align: left;"> <p>· 주식회사 테이큰 소프트 설립</p> <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p> </div> </div> <div class="flex"> <p class="month ">10월</p> <div class="month-text text-section" style="text-align: left;"> <p>· 소프트웨어 기업 등록</p> <img src="../../resources/img/common/history-img1.png" alt=""> </div> </div> <div class="flex"> <p class="month ">11월</p> <div class="month-text" style="text-align: left;"> <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p> <p>· Taken BI Manager v1.0 저작권 등록</p> <img src="../../resources/img/common/history-img2.png" alt=""> </div> </div> <div class="flex"> <p class="month ">12월</p> <div class="month-text" style="text-align: left;"> <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p> <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p> <p>· 도로 모니터링 시스템 저작권 등록</p> <div class="flex"> <img src="../../resources/img/common/history-img31.png" alt=""> <img src="../../resources/img/common/history-img32.png" alt=""> <img src="../../resources/img/common/history-img33.png" alt=""> </div> </div> </div> </div> <div class="content section" id="section2">  <div class="flex"> <p class="month ">1월</p> <div class="month-text" style="text-align: left;"> <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p> </div> </div> <div class="flex"> <p class="month ">3월</p> <div class="month-text" style="text-align: left;"> <p>· 기업부설연구소 설립</p> </div> </div> <div class="flex"> <p class="month ">4월</p> <div class="month-text" style="text-align: left;"> <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p> </div> </div> <div class="flex"> <p class="month ">5월</p> <div class="month-text" style="text-align: left;"> <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p> <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p> </div> </div> <div class="flex"> <p class="month ">7월</p> <div class="month-text" style="text-align: left;"> <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p> </div> </div> <div class="flex"> <p class="month ">9월</p> <div class="month-text" style="text-align: left;"> <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p> </div> </div> <div class="flex"> <p class="month ">10월</p> <div class="month-text" style="text-align: left;"> <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p> </div> </div> <div class="flex"> <p class="month ">12월</p> <div class="month-text" style="text-align: left;"> <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p> <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p> <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p> <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p> <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p> <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p> <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p> <p>· 경로 생성 기술 관련 출원사실증명 </p> <img src="../../resources/img/common/history-img4.png" alt=""> </div> </div> </div> <div class="content section" id="section3"> <div class="flex"> <p class="month ">1월</p> <div class="month-text" style="text-align: left;"> <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p> <p>· 복약지도 장치 및 방법 출원사실증명 </p> <p>· Traffic Agent 저작권 등록 </p> <div class="flex"> <img src="../../resources/img/common/history-img51.png" alt=""> <img src="../../resources/img/common/history-img52.png" alt=""> </div> </div> </div> <div class="flex"> <p class="month ">2월</p> <div class="month-text" style="text-align: left;"> <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p> <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p> </div> </div> <div class="flex"> <p class="month ">3월</p> <div class="month-text" style="text-align: left;"> <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p> </div> </div> <div class="flex"> <p class="month ">4월</p> <div class="month-text" style="text-align: left;"> <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p> <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p> <p>· 기업부설연구소 인정서 획득 </p> <img src="../../resources/img/common/history-img6.png" alt=""> </div> </div> <div class="flex"> <p class="month ">5월</p> <div class="month-text" style="text-align: left;"> <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p> </div> </div> <div class="flex"> <p class="month ">6월</p> <div class="month-text" style="text-align: left;"> <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p> <div class="flex"> <img src="../../resources/img/common/history-img71.png" alt=""> <img src="../../resources/img/common/history-img72.png" alt=""> </div> </div> </div> <div class="flex"> <p class="month ">7월</p> <div class="month-text" style="text-align: left;"> <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p> <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p> </div> </div> <div class="flex"> <p class="month ">8월</p> <div class="month-text" style="text-align: left;"> <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p> <p>· 메타버스 기술 관련 출원사실증명</p> <img src="../../resources/img/common/history-img8.png" alt=""> </div> </div> <div class="flex"> <p class="month ">9월</p> <div class="month-text" style="text-align: left;"> <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p> <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p> <p>· 시니어 케어 시스템 저작권 등록</p> <img src="../../resources/img/common/history-img9.png" alt=""> </div> </div> <div class="flex"> <p class="month ">11월</p> <div class="month-text" style="text-align: left;"> <p>· 한기술평가 우수기업 인증 (T-5)</p> <p>· 통합 모빌리티 솔루션 저작권 등록</p> <div class="flex"> <img src="../../resources/img/common/history-img100.png" alt=""> <img src="../../resources/img/common/history-img101.png" alt=""> </div> </div> </div> <div class="flex"> <p class="month ">12월</p> <div class="month-text" style="text-align: left;"> <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p> <p>· 구미시 키워드 분석 용역 (구미시)</p> <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p> <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p> <p>· AI 횡단보도 기술 관련 출원사실증명</p> <img src="../../resources/img/common/history-img110.png" alt=""> </div> </div> </div> </div> </div> </div> </div> </div> <div id="footer" style="width: 100%;"></div> </div> </div> </div> <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> document.addEventListener("DOMContentLoaded", function () { // 스크롤 이벤트 리스너 추가 const historyBox = document.querySelector('.history-box'); historyBox.addEventListener('scroll', function () { // 각 섹션을 순회하며 현재 보이는 섹션 찾기 const sections = document.querySelectorAll('.content.section'); sections.forEach((section) => { const top = section.offsetTop; const bottom = top + section.offsetHeight; if (historyBox.scrollTop >= top && historyBox.scrollTop < bottom) { const activeYear = section.getAttribute('id'); updateActiveYear(activeYear); } }); }); // 연도 탭 업데이트 함수 function updateActiveYear(activeYear) { const years = document.querySelectorAll('.years .year'); years.forEach((year) => { if (year.getAttribute('data-year') === activeYear) { year.classList.add('active-year'); } else { year.classList.remove('active-year'); } }); } }); var swiper = new Swiper(".mySwiper", { cssMode: true, direction: "vertical", slidesPerView: 1, spaceBetween: 30, mousewheel: { eventsTarget: '.swiper-slide' }, // slidesOffsetAfter: 220, pagination: { el: ".swiper-pagination", clickable: true, }, on: { reachEnd: 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'; } }, } }); // business 아코디언 function slidesPlugin(activeSlide = 0) { const slides = document.querySelectorAll('.accordion'); let previousSlide = slides[activeSlide]; previousSlide.classList.add('active'); swapImage(previousSlide); slides.forEach((slide) => { slide.addEventListener('click', () => { if (slide !== previousSlide) { clearActiveClasses(); swapImage(previousSlide); slide.classList.add('active'); swapImage(slide); previousSlide = slide; } }); }); function clearActiveClasses() { slides.forEach((slide) => { slide.classList.remove('active'); }); } function swapImage(slide) { const slideImg = slide.querySelector('.accordion img'); const bgImg = slide.style.backgroundImage; slide.style.backgroundImage = `url(${slideImg.src})`; slideImg.src = bgImg.slice(5, -2); } } slidesPlugin(); $(function () { $("#header").load("../layout/Header.html"); $("#footer").load("../layout/footer.html"); }); </script> </html>