2024-10-16 update center info ( picture & video )

src/main/resources/static/css/center.css

@@ -241,13 +241,21 @@ h2 {
     border-radius: 15px;
     box-shadow: 2px 2px 2px 2px #eeeeee;
 }
-
+.content4,
 .content3 {
     display: flex;
     width: 100%;
     justify-content: space-between;
     gap : 10px;
 }
+.content4 > div {
+    width: 50%;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 20px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+}
 
 .content3 > div > div:nth-child(1)::before{
     content: "◎ ";
@@ -313,10 +321,13 @@ h2 {
         width: 100%;
         align-items: center;
     }
-    .centerWrap .content1 > div.content3 {
+    .centerWrap .content1 > div.content3,
+    .centerWrap .content1 > div.content4 {
         flex-direction: column;
     }
-    .centerWrap .content1 > div.content3 > div {
+
+    .centerWrap .content1 > div.content3 > div,
+    .centerWrap .content1 > div.content4 > div {
         width: 100%;
     }
 }

src/main/resources/templates/center/center.html

@@ -28,33 +28,10 @@
                         현장 시설물과 센터 시설물의 예방정비 및 유지보수 업무를 담당하고 있습니다.</p>
                 </div>
                 <div class="img-box">
-                    <img src="/images/background/center_img1.jpg" alt="포항시 지능형교통시스템(ITS) 조감도">
+                    <img src="/images/background/center_img.png" alt="포항시 지능형교통시스템(ITS) 조감도">
                 </div>
             </div>
         </div>
-<!--        <div class="content2">-->
-<!--            <table>-->
-<!--                <thead>-->
-<!--                    <tr>-->
-<!--                        <th colspan="3">시스템안내</th>-->
-<!--                    </tr>-->
-<!--                </thead>-->
-<!--                <tbody>-->
-<!--                    <tr class="bt-dbl">-->
-<!--                        <td>도시교통정보시스템</td>-->
-<!--                        <td>스마트교차로시스템</td>-->
-<!--                    </tr>-->
-<!--                    <tr>-->
-<!--                        <td>도로교통전광판, 교통관제 CCTV 운영</td>-->
-<!--                        <td>교통량 수집분석을 통한 교차로 최적 주기 산출</td>-->
-<!--                    </tr>-->
-<!--                    <tr>-->
-<!--                        <td>차량탑재장치(OBE), 노변기지국(RSE) 간 교통정보 수집</td>-->
-<!--                        <td>대기행렬 분석 및 소통정보 제공</td>-->
-<!--                    </tr>-->
-<!--                </tbody>-->
-<!--            </table>-->
-<!--        </div>-->
         <div class="content1">
             <h2>시스템안내</h2>
             <div class="content3">
@@ -74,6 +51,15 @@
                 </div>
             </div>
         </div>
+        <div class="content1">
+            <h2>홍보 동영상</h2>
+            <div class="content4">
+                <div>
+                    <video src="/video/promotion1.mp4" width="100%" height="100%" controls></video>
+                </div>
+                <div></div>
+            </div>
+        </div>
     </div>
 </div>
 <th:block th:include="include/footer.html"></th:block>