연혁

html/css/common.css

@@ -138,9 +138,24 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
 .design-line::before{content:'';display:block;width:4px;height:200px;background:#000;}
 .design-line::after{content:'';display:block;width:1px;height:200px;background:#000;}
 .sub-cont{display:flex;padding:100px 0;}
+.point-txt{color:#2290c9}
+.list-txt{color: #333;font-size: 16px;line-height: 2.5;margin-top:20px;}
+.list-txt > li {position: relative;}
+.list-txt > li:before {content: "";display: inline-block;position: absolute;top: 0;left: 0;}
+
+/*회사소개*/
 .company .img{margin-right:60px;}
 .company .img img{width:450px;}
 .company .txt h6{font-size:1.8rem;color:#000}
 .company .txt p{line-height:1.8;font-size:1rem;padding:20px 0;word-break: keep-all;}
 .company .txt-box + .txt-box{margin-top:40px;}
-.point-txt{color:#2290c9}
+
+/*연혁*/
+
+.history{width:100%;padding-left:320px;margin:0px auto;}
+.history .swiper-slide-active{max-width:1280px;opacity:1!important;}
+.history .swiper-slide{opacity:0.5;}
+.history .swiper-slide .test{width:1280px;height:200px;background:blue;width:500px;}
+.history .swiper-button-next, .history .swiper-rtl .swiper-button-prev {right: auto;left: 1240px;}
+.history-box{padding:0 100px;}
+.history-box h6{font-size:4rem;}

html/history.html

@@ -67,11 +67,50 @@
       <h4 data-aos="fade-down" data-aos-duration="1000">연혁</h4>
     </div>
     <div class="design-line-ti"></div> 
-    <div class="sub-cont history">
-
-     </div>
   </div>
-
+  <div class="sub-cont history">
+    <div class="swiper swiper-container-history">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <div class="history-box">
+            <h6 data-aos="fade-right" data-aos-duration="1000">2021</h6>
+            <ul class="list-txt" data-aos="fade-right" data-aos-duration="1000">
+              <li><b>02</b> 현대자동차 QR코드 출입시스템 운영 및 유지보수(현대자동차)</li>
+              <li><b>03</b> 파브 기술 및 기업/산업 현황 분석(인천테크노파크)</li>
+              <li><b>03</b> 파브 부품 상용화 대응 기술 및 제도 인프라 조사용역(인천테크노파크)</li>
+              <li><b>03</b> 인천광역시 스마트관광도시 조성사업 품질보증 용역(인천스마트시티)
+              <li><b>03</b> KT 클라우드 인천총판 등록(KT)</li>
+              <li><b>06</b> 드론 규제 샌드박스 사업
+                    (드론 관리 체계에 따른 식별장치 및 비행 관제시스템 구축)(항공안전기술원)</li>
+              <li><b>06</b> SSG 여행몰 유지보수 용역(SSG.com)</li>
+              <li><b>07</b> KB 국민은행 소프트웨어 경진대회 메타버스 구축 및
+                    콘텐츠 개발 운영사업(사피엔스 4.0)</li>
+              <li><b>07</b> XR 융합콘텐츠 실증 및 개발지원 과제 협약(인천테크노파크)</li>
+              <li><b>07</b> 현대자동차 무인전시장 QR 코드인증 출입시스템 개발</li>
+              <li><b>08</b> 드론 실증 비즈니스 사업화(공공서비스 기술 고도화) 선정 관련기사</li>
+              <li><b>09</b> 캐플릭스 OTA 항공서비스 구축(제주패스)(캐플릭스)</li>
+              <li><b>09</b> 지역특화 데이터 산업화 기반 조성 사업 선정</li>
+              <li><b>10</b> ADEX 2021 전시회 참가 관련기사</li>
+              <li><b>10</b> 기업 디지털 트랜스포메이션(DT)을 통한 클라우드 전환 사업 선정</li>
+              <li><b>11</b> 인천 PAV 컨소시엄 선정 관련기사</li>
+              <li><b>12</b> KMF(Korea Metaverse Festival) 전시회 참가</li>
+            </ul>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="test">2</div>
+        </div>
+        <div class="swiper-slide">
+          <div class="test">3</div>
+        </div>
+        <div class="swiper-slide">
+          <div class="test">4</div>
+        </div>
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+    </div> 
+  </div>
   
 </div>
 <!--//main-->

html/js/common.js

@@ -225,3 +225,25 @@ $(function() {
 		$('html, body').animate({scrollTop:0},300);
 	});
 });
+
+
+$(function(){
+  new Swiper('.swiper-container-history');
+  const swiper = new Swiper('.swiper-container-history', {
+     //기본 셋팅 
+     direction: 'horizontal', 
+     slidesPerView: 3,
+     spaceBetween: 100,
+     slidesPerView:true,
+     centeredSlides: true,
+     autoplay: false,
+      //방향표 
+        navigation: { 
+        //다음페이지 설정 
+        nextEl: '.swiper-button-next', 
+        //이전페이지 설정 
+        prevEl: '.swiper-button-prev', 
+      }, 
+    });
+
+});