작업중

dist/assets/css/style.css

@@ -73,10 +73,6 @@ html {
   -ms-overflow-style: scrollbar;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
-@-ms-viewport {
-  width: device-width;
-}
 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }
@@ -500,22 +496,11 @@ template {
 }
 
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-          animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
 }
 
 .fa-pulse {
-  -webkit-animation: fa-spin 1s infinite steps(8);
-          animation: fa-spin 1s infinite steps(8);
-}
-
-@-webkit-keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+  animation: fa-spin 1s infinite steps(8);
 }
 
 @keyframes fa-spin {
@@ -16450,6 +16435,7 @@ footer .container {
   background-repeat: no-repeat;
   background-position: center center;
 }
+.clients-info .clients-list .logo-img > svg,
 .clients-info .clients-list .logo-img > img {
   display: block;
   margin: 0 auto;
@@ -16459,6 +16445,7 @@ footer .container {
     padding: 0;
     max-height: 75%;
   }
+  .clients-info .clients-list .logo-img > svg,
   .clients-info .clients-list .logo-img > img {
     transform: scale(0.75);
   }
@@ -16870,7 +16857,8 @@ footer .container {
 .inquiry-form #dot-1:checked ~ .category .one,
 .inquiry-form #dot-2:checked ~ .category .two,
 .inquiry-form #dot-3:checked ~ .category .three,
-.inquiry-form #dot-4:checked ~ .category .four {
+.inquiry-form #dot-4:checked ~ .category .four,
+.inquiry-form #dot-5:checked ~ .category .five {
   border-color: var(--sub-grey);
   background: #ec8f26;
 }
@@ -17185,6 +17173,30 @@ footer .container {
     font-size: 0.5625rem;
   }
 }
+.footer .company-info .fax {
+  position: relative;
+  padding-left: 20px;
+}
+.footer .company-info .fax:before {
+  content: "F.";
+  font-weight: 900;
+  position: absolute;
+  left: 0;
+  top: 6px;
+  font-size: 17px;
+}
+@media screen and (max-width: 1200px) {
+  .footer .company-info .fax {
+    padding-left: 0.9375rem;
+  }
+  .footer .company-info .fax:before {
+    margin-left: 0;
+    font-size: 0.625rem;
+    left: 0.1875rem;
+    top: 10px;
+    line-height: 1;
+  }
+}
 .footer .company-info .tel {
   position: relative;
   padding-left: 20px;
@@ -17195,7 +17207,6 @@ footer .container {
   position: absolute;
   left: 0;
   top: 6px;
-  color: #fff;
   font-size: 17px;
 }
 @media screen and (max-width: 1200px) {
@@ -17209,7 +17220,4 @@ footer .container {
     top: 10px;
     line-height: 1;
   }
-}
-.footer .company-info .tel a {
-  color: #fff;
 }

dist/index.html

@@ -232,6 +232,57 @@
                     </ul>
                 </div>
             </li>
+            <li class="--service-item line-dash MT90 PT90">
+                <div class="text">
+                    <div class="--item-category MB50 flex-box">
+                        <h4 class="--big-title">여성 안심 서비스 <span class="--en-deco">Women's Safety <span class="hidden-mobile">Service</span></span></h4>
+                        <p class="--list-text">
+                            VIP 경호 서비스는 출퇴근부터 행사장까지 24시간 빈틈없는 맞춤형 경호를 제공합니다.<br>
+                            국내외에서 검증된 경호팀과 첨단 보안 장비로 안전한 환경을 보장해드립니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item05">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item05">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">이동 경호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>사전 동선 분석:</strong> 고객의 출퇴근 경로와 이동 시간대에 따른 위험 요소 파악</li>
+                                <li class="--sub-text"><strong>전담 경호원 배치:</strong> 출퇴근 시간대 1:1 밀착 경호 제공</li>
+                                <li class="--sub-text"><strong>이동 차량 점검:</strong> 차량 내·외부 점검 및 안전 확인</li>
+                                <li class="--sub-text"><strong>이동 시 동선 보호:</strong> 예상치 못한 돌발 상황에 대한 사전 대처 방안 마련</li>
+                                <li class="--sub-text"><strong>긴급 대피 플랜:</strong> 사고 발생 시 대피 경로 확보 및 신속한 이동 계획</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">행사 및 공식 석상 경호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>행사장 출입 통제:</strong> 출입구 보안 강화 및 신원 확인 절차 운영</li>
+                                <li class="--sub-text"><strong>VIP 대기실 보호:</strong> 대기실 내 전담 요원 배치 및 외부 접촉 통제</li>
+                                <li class="--sub-text"><strong>주요 구역 경호:</strong> 무대, 대기실, VIP 라운지 등 고객의 주요 동선에 맞춘 경호 인력 배치</li>
+                                <li class="--sub-text"><strong>이동 경로 사전 확보:</strong> 고객의 동선에 맞춘 경로 분석 및 출입 통제 계획 수립</li>
+                                <li class="--sub-text"><strong>사후 보고서 제공:</strong> 행사 종료 후, 경호 진행 상황에 대한 분석 보고서 작성 및 피드백 제공</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">숙소 및 프라이버시 보호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>숙소 보안 점검:</strong> 숙소 내·외부 위험 요소 사전 점검 및 보안 시스템 점검</li>
+                                <li class="--sub-text"><strong>24시간 모니터링:</strong> 숙소 주변 CCTV 및 보안 요원 상시 배치</li>
+                                <li class="--sub-text"><strong>프라이버시 보호:</strong> 고객의 개인정보와 방문 기록 비공개 처리</li>
+                                <li class="--sub-text"><strong>기밀 유지 서약:</strong> 모든 경호 요원의 기밀 유지 서약서 체결</li>
+                                <li class="--sub-text"><strong>위기 대응 매뉴얼:</strong> 숙소 내에서 발생할 수 있는 위급 상황에 대한 대응 매뉴얼 제공</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
             <li class="--service-item line-dash MT90 PT90">
                 <div class="text">
                     <div class="--item-category MB50 flex-box">
@@ -348,9 +399,9 @@
                 </li>
                 <li class="flex-box">
                     <div class="logo-img MB20">
-                        <img src="assets/images/affiliates02.jpg" alt="">
+                        <img src="assets/images/affiliates09.png" alt="에이셋 로고">
                     </div>
-                    <h4 class="--title small MB10 PL10 text-center">더다인</h4>
+                    <h4 class="--title small MB10 PL10 text-center">에이셋</h4>
                 </li>
                 <li class="flex-box">
                     <div class="logo-img MB20">
@@ -388,6 +439,18 @@
                     </div>
                     <h4 class="--title small MB10 PL10 text-center">롯데월드 타워</h4>
                 </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/affiliates10.png" class="H50" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10 text-center">G360</h4>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/affiliates11.png" class="H50" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10 text-center">ARSLAN SRS</h4>
+                </li>
             </ul>
         </div>
     </div>
@@ -407,6 +470,9 @@
                         <li class="--list-text">
                             <strong>VIP 경호 서비스 <br class="device-pc"><small>(VIP Protection Service)</small></strong>
                         </li>
+                        <li class="--list-text MT20">
+                            <strong>여성 안심 서비스 <br class="device-pc"><small>(Women's Safety Service)</small></strong>
+                        </li>
                         <li class="--list-text MT20">
                             <strong>경비 서비스 <br class="device-pc"><small>(Security Guard Service)</small></strong>
                         </li>
@@ -423,6 +489,7 @@
                         <input type="radio" name="type" value="VIP 경호 서비스" id="dot-1" checked>
                         <input type="radio" name="type" value="경비 서비스" id="dot-2">
                         <input type="radio" name="type" value="기업 보안 서비스" id="dot-3">
+                        <input type="radio" name="type" value="여성 안심 서비스" id="dot-5">
                         <input type="radio" name="type" value="기타 " id="dot-4">
                         <span class="details">상담분야 <span class="required">(필수)</span></span>
                         <div class="category">
@@ -430,6 +497,10 @@
                                 <span class="dot one"></span>
                                 <span>VIP 경호 서비스</span>
                             </label>
+                            <label for="dot-5">
+                                <span class="dot five"></span>
+                                <span>여성 안심 서비스</span>
+                            </label>
                             <label for="dot-2">
                                 <span class="dot two"></span>
                                 <span>경비 서비스</span>
@@ -715,23 +786,39 @@
             <div class="full">
                 <dl class="colon">
                     <dt class="sr-only">회사명</dt>
-                    <dd><strong>Intelligence</strong></dd>
+                    <dd><strong>인텔리젼스 씨큐리티</strong></dd>
                 </dl>
                 <dl class="colon">
                     <dt>대표</dt>
-                    <dd>김김김</dd>
+                    <dd>최영호</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="colon">
+                    <dt>사업자등록번호</dt>
+                    <dd>220-87-60995</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="colon">
+                    <dt class="sr-only">주소</dt>
+                    <dd><address>서울 서대문구 증가로 193 307호 (북가좌동, 스카이빌)</address></dd>
                 </dl>
             </div>
             <div class="full">
                 <dl class="tel">
                     <dt class="sr-only">대표번호</dt>
-                    <dd><a href="tel:010-2745-6518">010-1234-5678</a></dd>
+                    <dd><a href="tel:02-303-6863">02.303.6863</a></dd>
+                </dl>
+                <dl class="fax">
+                    <dt class="sr-only">Fax</dt>
+                    <dd>0504-030-6868</dd>
                 </dl>
                 <dl class="colon">
                     <dt>개인정보보호책임자</dt>
-                    <dd>김김김(privacy@intelligence.com)</dd>
+                    <dd>최영호(<a href="mailto:intelligence05@naver.com">intelligence05@naver.com</a>)</dd>
                 </dl>
-                <copyright class="copyright">Copyright by Intelligence. All rights reserved.</copyright>
+                <copyright class="copyright">Copyright &copy; 인텔리젼스 씨큐리티. All rights reserved.</copyright>
             </div>
         </div>
 

src/html/include/footer.html

@@ -8,23 +8,39 @@
             <div class="full">
                 <dl class="colon">
                     <dt class="sr-only">회사명</dt>
-                    <dd><strong>Intelligence</strong></dd>
+                    <dd><strong>인텔리젼스 씨큐리티</strong></dd>
                 </dl>
                 <dl class="colon">
                     <dt>대표</dt>
-                    <dd>김김김</dd>
+                    <dd>최영호</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="colon">
+                    <dt>사업자등록번호</dt>
+                    <dd>220-87-60995</dd>
+                </dl>
+            </div>
+            <div class="full">
+                <dl class="colon">
+                    <dt class="sr-only">주소</dt>
+                    <dd><address>서울 서대문구 증가로 193 307호 (북가좌동, 스카이빌)</address></dd>
                 </dl>
             </div>
             <div class="full">
                 <dl class="tel">
                     <dt class="sr-only">대표번호</dt>
-                    <dd><a href="tel:010-2745-6518">010-1234-5678</a></dd>
+                    <dd><a href="tel:02-303-6863">02.303.6863</a></dd>
+                </dl>
+                <dl class="fax">
+                    <dt class="sr-only">Fax</dt>
+                    <dd>0504-030-6868</dd>
                 </dl>
                 <dl class="colon">
                     <dt>개인정보보호책임자</dt>
-                    <dd>김김김(privacy@intelligence.com)</dd>
+                    <dd>최영호(<a href="mailto:intelligence05@naver.com">intelligence05@naver.com</a>)</dd>
                 </dl>
-                <copyright class="copyright">Copyright by Intelligence. All rights reserved.</copyright>
+                <copyright class="copyright">Copyright &copy; 인텔리젼스 씨큐리티. All rights reserved.</copyright>
             </div>
         </div>
 

src/html/index.html

@@ -142,6 +142,57 @@
                     </ul>
                 </div>
             </li>
+            <li class="--service-item line-dash MT90 PT90">
+                <div class="text">
+                    <div class="--item-category MB50 flex-box">
+                        <h4 class="--big-title">여성 안심 서비스 <span class="--en-deco">Women's Safety <span class="hidden-mobile">Service</span></span></h4>
+                        <p class="--list-text">
+                            VIP 경호 서비스는 출퇴근부터 행사장까지 24시간 빈틈없는 맞춤형 경호를 제공합니다.<br>
+                            국내외에서 검증된 경호팀과 첨단 보안 장비로 안전한 환경을 보장해드립니다.
+                        </p>
+                        <button type="button" class="btn-more" data-btn="list-more" data-target=".service-item05">자세히 보기 <span class="material-symbols-outlined">expand_more</span></button>
+                    </div>
+
+                    <ul class="--item-detail-list flex-box MT50 service-item05">
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">이동 경호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>사전 동선 분석:</strong> 고객의 출퇴근 경로와 이동 시간대에 따른 위험 요소 파악</li>
+                                <li class="--sub-text"><strong>전담 경호원 배치:</strong> 출퇴근 시간대 1:1 밀착 경호 제공</li>
+                                <li class="--sub-text"><strong>이동 차량 점검:</strong> 차량 내·외부 점검 및 안전 확인</li>
+                                <li class="--sub-text"><strong>이동 시 동선 보호:</strong> 예상치 못한 돌발 상황에 대한 사전 대처 방안 마련</li>
+                                <li class="--sub-text"><strong>긴급 대피 플랜:</strong> 사고 발생 시 대피 경로 확보 및 신속한 이동 계획</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">행사 및 공식 석상 경호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>행사장 출입 통제:</strong> 출입구 보안 강화 및 신원 확인 절차 운영</li>
+                                <li class="--sub-text"><strong>VIP 대기실 보호:</strong> 대기실 내 전담 요원 배치 및 외부 접촉 통제</li>
+                                <li class="--sub-text"><strong>주요 구역 경호:</strong> 무대, 대기실, VIP 라운지 등 고객의 주요 동선에 맞춘 경호 인력 배치</li>
+                                <li class="--sub-text"><strong>이동 경로 사전 확보:</strong> 고객의 동선에 맞춘 경로 분석 및 출입 통제 계획 수립</li>
+                                <li class="--sub-text"><strong>사후 보고서 제공:</strong> 행사 종료 후, 경호 진행 상황에 대한 분석 보고서 작성 및 피드백 제공</li>
+                            </ol>
+                        </li>
+                        <li class="--item-detail">
+                            <div class="img-box">
+                                <h5 class="--title MB10 text-center">숙소 및 프라이버시 보호 서비스</h5>
+                            </div>
+                            <ol class="--list">
+                                <li class="--sub-text"><strong>숙소 보안 점검:</strong> 숙소 내·외부 위험 요소 사전 점검 및 보안 시스템 점검</li>
+                                <li class="--sub-text"><strong>24시간 모니터링:</strong> 숙소 주변 CCTV 및 보안 요원 상시 배치</li>
+                                <li class="--sub-text"><strong>프라이버시 보호:</strong> 고객의 개인정보와 방문 기록 비공개 처리</li>
+                                <li class="--sub-text"><strong>기밀 유지 서약:</strong> 모든 경호 요원의 기밀 유지 서약서 체결</li>
+                                <li class="--sub-text"><strong>위기 대응 매뉴얼:</strong> 숙소 내에서 발생할 수 있는 위급 상황에 대한 대응 매뉴얼 제공</li>
+                            </ol>
+                        </li>
+                    </ul>
+                </div>
+            </li>
             <li class="--service-item line-dash MT90 PT90">
                 <div class="text">
                     <div class="--item-category MB50 flex-box">
@@ -258,9 +309,9 @@
                 </li>
                 <li class="flex-box">
                     <div class="logo-img MB20">
-                        <img src="assets/images/affiliates02.jpg" alt="">
+                        <img src="assets/images/affiliates09.png" alt="에이셋 로고">
                     </div>
-                    <h4 class="--title small MB10 PL10 text-center">더다인</h4>
+                    <h4 class="--title small MB10 PL10 text-center">에이셋</h4>
                 </li>
                 <li class="flex-box">
                     <div class="logo-img MB20">
@@ -298,6 +349,18 @@
                     </div>
                     <h4 class="--title small MB10 PL10 text-center">롯데월드 타워</h4>
                 </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/affiliates10.png" class="H50" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10 text-center">G360</h4>
+                </li>
+                <li class="flex-box">
+                    <div class="logo-img MB20">
+                        <img src="assets/images/affiliates11.png" class="H50" alt="">
+                    </div>
+                    <h4 class="--title small MB10 PL10 text-center">ARSLAN SRS</h4>
+                </li>
             </ul>
         </div>
     </div>
@@ -317,6 +380,9 @@
                         <li class="--list-text">
                             <strong>VIP 경호 서비스 <br class="device-pc"><small>(VIP Protection Service)</small></strong>
                         </li>
+                        <li class="--list-text MT20">
+                            <strong>여성 안심 서비스 <br class="device-pc"><small>(Women's Safety Service)</small></strong>
+                        </li>
                         <li class="--list-text MT20">
                             <strong>경비 서비스 <br class="device-pc"><small>(Security Guard Service)</small></strong>
                         </li>
@@ -333,6 +399,7 @@
                         <input type="radio" name="type" value="VIP 경호 서비스" id="dot-1" checked>
                         <input type="radio" name="type" value="경비 서비스" id="dot-2">
                         <input type="radio" name="type" value="기업 보안 서비스" id="dot-3">
+                        <input type="radio" name="type" value="여성 안심 서비스" id="dot-5">
                         <input type="radio" name="type" value="기타 " id="dot-4">
                         <span class="details">상담분야 <span class="required">(필수)</span></span>
                         <div class="category">
@@ -340,6 +407,10 @@
                                 <span class="dot one"></span>
                                 <span>VIP 경호 서비스</span>
                             </label>
+                            <label for="dot-5">
+                                <span class="dot five"></span>
+                                <span>여성 안심 서비스</span>
+                            </label>
                             <label for="dot-2">
                                 <span class="dot two"></span>
                                 <span>경비 서비스</span>

src/scss/common/_footer.scss

@@ -76,6 +76,28 @@
         }
       }
     }
+    .fax {
+      position:relative;
+      padding-left:20px;
+      &:before{
+        content:"F.";
+        font-weight:900;
+        position:absolute;
+        left:0;
+        top:6px;
+        font-size:17px;
+      }
+      @include display-md(){
+        padding-left:REM(45px / 3);
+        &:before{
+          margin-left :0;
+          font-size:REM(30px / 3);
+          left:REM(9px / 3);
+          top:10px;
+          line-height: 1;
+        }
+      }
+    }
     .tel {
       position:relative;
       padding-left:20px;
@@ -85,7 +107,6 @@
         position:absolute;
         left:0;
         top:6px;
-        color:#fff;
         font-size:17px;
       }
       @include display-md(){
@@ -98,9 +119,6 @@
           line-height: 1;
         }
       }
-      a {
-        color:#fff;
-      }
     }
   }
 }

src/scss/pages/main.scss

@@ -529,6 +529,7 @@ html {
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
+      > svg,
       > img {
         display: block;
         margin:0 auto;
@@ -536,6 +537,7 @@ html {
       @include display-md(){
         padding:0;
         max-height:75%;
+        > svg,
         > img {
           transform: scale(0.75);
         }
@@ -908,7 +910,8 @@ html {
   #dot-1:checked ~ .category .one,
   #dot-2:checked ~ .category .two,
   #dot-3:checked ~ .category .three,
-  #dot-4:checked ~ .category .four{
+  #dot-4:checked ~ .category .four,
+  #dot-5:checked ~ .category .five {
     border-color: var(--sub-grey);
     background: $color-secondary;
   }