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="../../resources/css/font.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"> <title>TAKENSOFT</title> </head> <body> <div id="header"></div>  <div class="swiper mySwiper"> <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> <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2> <img src="../resources/img/common/mouse.png" alt=""> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="slide-wrap pt60"> <div class="text-area slide-section"> <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 class="swiper-slide gradient-back"> <div class="slide-wrap pt60 slide-solution"> <div class=" text-area flex align-center" style="height: 100%;"> <div style="width: 100%;" class="sub-text-area"> <p class=" solution-text pb30">테이큰 소프트는</p>  </div> <div class="flex justify-end solution-box " style="height: calc(100% - 84px);"> <div style="height: 50%;"> <div class="ivory-box hvr-grow cursor mr50"> <img src="../resources/img/common/healthCare.png" alt=""> <div> <p class="mb15">헬스케어 분야</p> <p>시니어 스마트 케어 모니터링 플랫폼</p> </div> </div> <div class="pink-box hvr-grow cursor"> <img class="mb30" src="../resources/img/common/DATA.png" alt=""> <div> <p class="mb15">데이터관리분야</p> <p>데이터 관리 솔루션 Taken BI Manager</p> </div> </div> </div> <div> <div class="purple-box hvr-grow cursor"> <img class="mb30" src="../resources/img/common/smartFactory.png" alt=""> <div> <p class="mb15">스마트팩토리 분야</p> <p>제조기업 공정 관리 모니터링 서비스</p> </div> </div> <div class="yellow-box hvr-grow cursor"> <img class="mb30" src="../resources/img/common/smartCity.png" alt=""> <div> <p class="mb15">스마트시티 분야</p> <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p> </div> </div> <div class="blue-box hvr-grow cursor"> <img class="mb30" src="../resources/img/common/mobility.png" alt=""> <div> <p class="mb15">모빌리티 분야</p> <p>AI 기반의 스마트 객체인식을 위한 CCTV</p> </div> </div> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="portfolio"> <div class="swiper innerSwiper"> <div class="swiper-wrapper flex mt60"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> </div> </div> </div> </div> <div id="footer" style="border: 0px;"></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> var swiper1 = new Swiper(".mySwiper", { direction: "vertical", slidesPerView: 1, spaceBetween: 30, speed: 700, mousewheel: true, pagination: { el: ".swiper-pagination", clickable: true, }, on: { reachEnd: function () { swiper1.mousewheel.disable(); $("#footer").show(); }, fromEdge: function () { swiper1.mousewheel.enable(); $("#footer").hide(); }, slideChange: function () { var currentIndex = this.realIndex; if (currentIndex === 0) { $('#header').removeClass('active'); } else { $('#header').addClass('active'); } }, slideChangeTransitionEnd: function () { if (this.activeIndex === 1) { $('.text-event').addClass('active'); $('.sub-text').addClass('active'); } else { $('.text-event').removeClass('active'); $('.sub-text').removeClass('active'); } if (this.activeIndex === 2) { $('.solution-text').addClass('active'); $('.solution-sub-text').addClass('active'); } else { $('.solution-text').removeClass('active'); $('.solution-sub-text').removeClass('active'); } }, } }); // 헤더,푸터 불러오기 $(function () { $("#header").load("layout/header.html"); $("#footer").load("layout/footer.html"); $("#footer").hide(); }); var innerSwiper = new Swiper(".innerSwiper", { slidesPerView: 10, loop: true, spaceBetween: 30, centeredSlides: true, autoplay: { // delay: 1000, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> <style scoped> #footer { display: none; } html, body { position: relative; height: 100%; -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } #header { position: fixed; top: 0; z-index: 1; } .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; } .text-area { width: 1200px; height: 100%; margin: auto; text-align: center; } .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; } .slide-section { padding-top: 330px; } .text-main { font-weight: 600; color: #213f99; font-family: 'Pretendard'; font-size: 5rem; } .sub-text-area { text-align: left; } .gradient-back{ background: linear-gradient(#e9ebff , #fff, #fff); } .slide-solution { padding: 158px 0 80px; font-family: 'Pretendard'; } </style> </html>