인증 현황

html/company.html

@@ -51,7 +51,7 @@
 <header id="header" class="hd-sub"></header>
 <!--//header-->
 
-<!--main-->
+
 <div id="container" class="sub-con">
   <a class="topBtn" href="#home">
     <i class="xi-arrow-up"></i>
@@ -88,20 +88,63 @@
               구축 개발하여 대한민국의 현재와 미래 발전에 기여하는 것입니다.
             </p>
           </div>
-          <div class="txt-box">
-            <h6>특허 및 인증</h6>
+      </div>
+    </div>
+    <div class="sub-cont company">
+      <div class="certification">
+        <div class="txt-box" data-aos="fade-right" data-aos-duration="1000">
+          <h6>인증 및 특허 현황</h6>
           <p>
-              벤처기업등록, 기업부설연구소, 소프트웨어등록증, 직접생산증명원 ADS-978(KC 인증),
-              비행정보통합관리시스템(특허출원), 항공기의 지상 이동 소요시간 예측 시스템 및 방법(특허출원)
+            벤처기업등록, 기업부설연구소, 소프트웨어등록증, 직접생산증명원 ADS-978(KC 인증) 비행정보통합관리시스템(특허출원),<br/>
+            항공기의 지상 이동 소요시간 예측 시스템 및 방법(특허출원)
           </p>
         </div>
+          <div class="certification-box">
+            <ul data-aos="fade-up" data-aos-duration="1000">
+              <li>
+                <div>
+                  <span class="icon"><img src="images/certification01.png"></span>
+                  <span class="ti">인천시 항공 유망기업 인증</span>
+                  <span class="txt">2018년 12월<br/>인천시 항공 유망기업으로 선정</span>
+                </div>
+              </li>
+              <li>
+                <div>
+                  <span class="icon"><img src="images/certification02.png"></span>
+                  <span class="ti">인천 관광벤처 인증</span>
+                  <span class="txt">2020년 06월<br/>인천 관광벤처 인증</span>
+                </div>
+              </li>
+              <li>
+                <div>
+                  <span class="icon"><img src="images/certification03.png"></span>
+                  <span class="ti">관광사업 등록증</span>
+                  <span class="txt">2018년 04월<br/>관광 사업 등록</span>
                 </div>
+              </li>
+              <li>
+                <div>
+                  <span class="icon"><img src="images/certification04.png"></span>
+                  <span class="ti">벤처기업 확인서</span>
+                  <span class="txt">2018년 07월<br/>벤처기업 인증</span>
                 </div>
+              </li>
+              <li>
+                <div>
+                  <span class="icon"><img src="images/certification05.png"></span>
+                  <span class="ti">KT 클라우드 총판</span>
+                  <span class="txt">2021년 03월<br/>KT 클라우드 인천총판 등록</span>
                 </div>
+              </li>              
+            </ul>
+          </div>
+      </div>
+    </div>
+  </div><!--//sub-inner-->
 
   
-</div>
-<!--//main-->
+</div><!--//container-->
+
 <footer id="footer" class="ft-sub"></footer>
 </body>
 

html/css/common.css

@@ -131,6 +131,8 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
 .sub-ti{position:relative}
 .sub-ti h4{text-align:center;font-size:3rem;padding:100px 0;}
 .sub-inner{max-width:1280px;margin:0px auto;}
+.sub-cont{width:100%;display:flex;padding:100px 0;}
+.sub-cont + .sub-cont{padding-top:0px;}
 .design-line-ti{position:relative;margin:0 auto;max-width:1280px;}
 .design-line-ti::before{content:'';display:block;width:30%;height:4px;background:#2290c9;position:absolute;left:0;}
 .design-line-ti::after{content:'';display:block;width:70%;height:4px;background:#f4f4f4;position:absolute;right:0;}
@@ -140,7 +142,6 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
 .design-line.horizontal{width:100%;margin:60px 0;}
 .design-line.horizontal::before{content:'';display:block;width:30%;height:2px;background:#333;}
 .design-line.horizontal::after{content:'';display:block;width:100%;height:1px;background:#999;}
-.sub-cont{display:flex;padding:100px 0;}
 .point-txt{color:#2290c9}
 .list-txt{margin-top:18px;color: #333;font-size: 1rem;line-height:1.5;}
 .list-txt > li {position: relative;}
@@ -149,22 +150,30 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
 .list-txt > li b{margin-right:10px;font-size:1.125rem;}
 .wh_txt{color:#fff;}
 .border-gray{width:100%;height:1px;background:#ddd;margin:60px 0;}
+
 /*회사소개*/
+.company h6{font-size:1.8rem;color:#000}
 .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 p{line-height:1.8;font-size:1rem;padding:20px 0;word-break: keep-all;}
 .company .txt-box + .txt-box{margin-top:40px;}
-
+.certification{width:100%;}
+.certification-box{background:#f4f4f4;margin-top:20px;padding:40px;border-radius:4px;}
+.certification-box ul{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
+.certification-box ul li{flex:0 0 33.333%;}
+.certification-box ul li > div{display:flex;flex-direction:column;justify-content:center;align-items:center;}
+.certification-box span{display:block;;}
+.certification-box .icon{display:flex;justify-content:center;align-items:center;width:150px;height:150px;background:#fff;border-radius:100%;}
+.certification-box .ti{font-size:1.1rem;font-weight:500;padding:20px 0 6px 0;}
+.certification-box .txt{font-size:0.875rem;text-align:center;line-height:1.6;color:#555;}
 /*연혁*/
-
 .history{width:100%;margin:0px auto;}
 .swiper-container-history{max-width:1000px;margin:0px auto;}
 .swiper-container-history {overflow: visible!important;}
 .swiper-container-history .swiper-slide-active{opacity:1!important; transition:opacity 0.3s;}
 .swiper-container-history .swiper-slide{opacity:0.4; transition:opacity 0.3s;}
-.swiper-container-history .swiper-button-next, .swiper-container-history .swiper-rtl .swiper-button-prev {right:0px;left: auto;color:#2290c9;}
-.swiper-container-history .swiper-button-prev, .swiper-container-history .swiper-rtl .swiper-button-next {left:0px;right: auto;color:#2290c9;}
+.swiper-container-history .swiper-button-next, .swiper-container-history .swiper-rtl .swiper-button-prev {top:50px;right:0px;left: auto;color:#2290c9;}
+.swiper-container-history .swiper-button-prev, .swiper-container-history .swiper-rtl .swiper-button-next {top:50px;left:0px;right: auto;color:#2290c9;}
 .swiper-container-history .swiper-button-prev:after, .swiper-container-history .swiper-rtl .swiper-button-next:after,
 .swiper-container-history .swiper-button-next:after, .swiper-container-history .swiper-rtl .swiper-button-prev:after{font-size:30px;font-weight:bold;}
 .history-box{margin:0px auto;padding:0 40px 0 100px;}