페이지 작업 완료

dist/clips/clips.html

@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -180,7 +180,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -190,7 +190,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -198,6 +198,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -254,17 +261,20 @@
 
                     <figure class="thumbnail">
                         <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
+                            <img class="thumbnail-img" src="https://i.ytimg.com/vi/TJBZ8txUCV0/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBkHVijcRpFDTZSGB_fzVGs7s_yTw" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="detail.html">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스] 국민연금에 대한 오해와 진실? 이제 국민연금 바로알기로 고민 끝!</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -281,10 +291,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
-                               기준 5.82%의 운용수익률..</a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -301,12 +313,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                국민연금 기준소득월액 <br>
-                                변경!
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -323,11 +335,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                실업크레딧을 통한 <br>가입기간 확대 지원
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -345,6 +358,12 @@
                             <a href="detail.html">스톱모션으로 알아보는 <br>
                                 국민연금 '크레딧 제도'</a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -364,6 +383,12 @@
                                 레벨업⭐
                             </a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -383,6 +408,12 @@
                                 파헤치기!
                             </a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -401,12 +432,12 @@
                                 [국민연금공단X큰별쌤..]
                             </a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                조선시대에도 연금이 <br>
-                                있었다?!
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -425,12 +456,12 @@
                                 [NPS 릴레이 브이로그(vlog)]
                             </a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                인천국제공항에도 <br>
-                                국민연금공단이!?
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -449,13 +480,12 @@
                                 국민연금 직장인 브이로그.
                             </a>
                         </h4>
-
-                            <a href="detail.html" class="item-summary">
-                                오늘도 뽀주임은 열일 중 <br>
-                                다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
-                            </a>
-
-
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -474,10 +504,12 @@
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="detail.html">
-                                국민연금공단
-                                장애인지원센터는 무슨 일이?
-                        </a>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -496,10 +528,12 @@
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="detail.html">
-                            국민연금공단
-                            장애인지원센터는 무슨 일
-                        </a>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -513,6 +547,9 @@
         <li class="prev disabled">
             <span>&lt;&lt;</span>
         </li>
+        <li class="prev">
+            <a href="">&lt;</a>
+        </li>
         <li class="active">
             <span>1</span>
         </li>
@@ -525,133 +562,22 @@
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;</a>
+        </li>
         <li class="next">
             <a href="">&gt;&gt;</a>
         </li>
 
     </ol>
 </nav>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
-
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -727,5 +653,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/clips/detail.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
+    <title>영상갤러리 - 동영상 상세</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -181,7 +181,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -191,7 +191,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -199,6 +199,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -240,7 +247,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -269,7 +275,7 @@
 
                     <figure class="thumbnail">
                         <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
+                            <img class="thumbnail-img" src="https://i.ytimg.com/vi/TJBZ8txUCV0/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBkHVijcRpFDTZSGB_fzVGs7s_yTw" alt="">
                         </a>
                     </figure>
 
@@ -277,9 +283,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
-                        </p>
                     </div>
 
                 </li>
@@ -296,10 +299,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
-                                기준 5.82%의 운용수익률..</a>
-                        </p>
                     </div>
 
                 </li>
@@ -316,12 +315,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                국민연금 기준소득월액 <br>
-                                변경!
-                            </a>
-                        </p>
                     </div>
 
                 </li>
@@ -338,11 +331,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                실업크레딧을 통한 <br>가입기간 확대 지원
-                            </a>
-                        </p>
                     </div>
 
                 </li>
@@ -350,186 +338,71 @@
             </ul>
         </div>
         <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
+    <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+    <!-- 폼 1 시작  -->
+    <div class="form top">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box">
+            <div class="form-box">
+                <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
                 </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
             </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
 
+            <div class="form-box">
+                <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
                 </div>
-                <!-- 만족도 끝 -->
+            </div>
+        </div>
+        <button id="submit-survey" class="form-btn">확인</button>
+        <!-- 만족도 끝 -->
+    </div>
+    <!-- 폼 1 끝  -->
 
-                <button class="form-btn">확인</button>
+
+    <!-- 폼 2 시작  -->
+    <div class="form-02 cf">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+            <div class="form-box">
+                <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                <div class="form-radio-box other">
+                    <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                </div>
+                <div class="textarea-num">
+                    <span id="byteInfo">0</span>
+                    / 400
+                    <span>byte</span>
+                </div>
             </div>
-            <!-- 폼 2 끝  -->
 
         </div>
-        <a href="clips.html" class="btn-list-prev">목록으로</a>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
+        <!-- 만족도 끝 -->
 
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
+        <button id="submit-recommand" class="form-btn">확인</button>
+    </div>
+    <!-- 폼 2 끝  -->
+</div>
+        <a href="clips.html" class="btn-list-prev">목록으로</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -605,5 +478,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/index.html

@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="main">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -191,6 +191,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
                 <ul class="menu-list">
@@ -270,14 +277,20 @@
                 <a href="#" class="link">
                     <h2 class="title">숫자로 보는 국민연금</h2>
                     <p class="sub-text">
-                        7월 11일 세계 인구의 날을 맞이하여 알아보는 숫자로 보는 국민연금 날을 맞이하여 알아보는 숫자로 보는 국민연금
+                        세계인구의날 맞이
+                        연금가입&수급통계
                     </p>
                 </a>
             </div>
         </div>
     </div>
     <div class="main-center">
-        <div class="box line-banner"  style="background-image:url('assets/images/ex/ex5.png')">
+        <div class="box line-banner pc"  style="background-image:url('assets/images/ex/ex5.png')">
+            <a href="#" class="box-link">
+                <p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p>
+            </a>
+        </div>
+        <div class="box line-banner mobile"  style="background-image:url('assets/images/ex/ex5-m.png')">
             <a href="#" class="box-link">
                 <p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p>
             </a>
@@ -537,11 +550,16 @@
                     </li>
                 </ul>
 
-                <button type="button" class="btn-more">+ 쇼츠 더보기</button>
+                <button type="button" class="btn-more">+ 동영상 더보기</button>
             </div>
         </div>
     </div>
 </div>
+<style>
+    .move-top {
+        display: none;
+    }
+</style>
 <script>
     var recentNotice = new Swiper ('.left-slide .swiper-container', {
         slidesPerView: 1,
@@ -553,13 +571,9 @@
         },
         pagination: {
             el: ".left-slide .swiper-pagination",
-            renderBullet: function (index, className) {
-                return '<span class="' + className + '">' + (index + 1) + "</span>";
-            },
         },
         autoplay: {
             delay: 3000,
-            reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {
@@ -572,13 +586,11 @@
         slidesPerView: "auto",
         slidesPerGroupSkip: 1,
         initial:0,
-        rewind: true,
         pagination: {
             el: ".right-slide .swiper-pagination",
         },
         autoplay: {
             delay: 3000,
-            reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {
@@ -598,6 +610,10 @@
         }
     })
 </script>
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -673,5 +689,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/news/detail.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
+    <title>국민연금 소식 - 국민연금 새소식 상세</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -181,7 +181,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -191,7 +191,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -199,6 +199,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -240,7 +247,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -1490,186 +1496,71 @@
             </ul>
         </div>
         <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
+    <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
 
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
+    <!-- 폼 1 시작  -->
+    <div class="form top">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box">
+            <div class="form-box">
+                <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
                 </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
             </div>
-            <!-- 폼 1 끝  -->
 
+            <div class="form-box">
+                <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
+                </div>
+            </div>
+        </div>
+        <button id="submit-survey" class="form-btn">확인</button>
+        <!-- 만족도 끝 -->
+    </div>
+    <!-- 폼 1 끝  -->
 
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
 
+    <!-- 폼 2 시작  -->
+    <div class="form-02 cf">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+            <div class="form-box">
+                <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                <div class="form-radio-box other">
+                    <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                </div>
+                <div class="textarea-num">
+                    <span id="byteInfo">0</span>
+                    / 400
+                    <span>byte</span>
                 </div>
-                <!-- 만족도 끝 -->
-
-                <button class="form-btn">확인</button>
             </div>
-            <!-- 폼 2 끝  -->
 
         </div>
-        <a href="news.html" class="btn-list-prev">목록으로</a>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
+        <!-- 만족도 끝 -->
 
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
+        <button id="submit-recommand" class="form-btn">확인</button>
+    </div>
+    <!-- 폼 2 끝  -->
+</div>
+        <a href="news.html" class="btn-list-prev">목록으로</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -1745,5 +1636,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/news/news.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 새 소식</title>
+    <title>국민연금 소식 - 새소식</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -180,7 +180,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -190,7 +190,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -198,6 +198,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -245,18 +252,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
-                        </h4>
-                        <p class="item-summary">
-                            (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.07.01</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </h4>
+                            <p class="item-summary">
+                                (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.07.01</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -270,18 +279,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
-                        </h4>
-                        <p class="item-summary">
-                            배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.28</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                               [7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단
+                            </h4>
+                            <p class="item-summary">
+                                배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.28</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -295,18 +306,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
-                        </h4>
-                        <p class="item-summary">
-                            "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.03</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!
+                            </h4>
+                            <p class="item-summary">
+                                "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.03</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -320,18 +333,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
-                        </h4>
-                        <p class="item-summary">
-                            배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.03</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방
+                            </h4>
+                            <p class="item-summary">
+                                배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.03</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -345,18 +360,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
-                        </h4>
-                        <p class="item-summary">
-                            가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.04.29</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이
+                            </h4>
+                            <p class="item-summary">
+                                가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.04.29</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -369,6 +386,9 @@
         <li class="prev disabled">
             <span>&lt;&lt;</span>
         </li>
+        <li class="prev">
+            <a href="">&lt;</a>
+        </li>
         <li class="active">
             <span>1</span>
         </li>
@@ -381,133 +401,22 @@
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;</a>
+        </li>
         <li class="next">
             <a href="">&gt;&gt;</a>
         </li>
 
     </ol>
 </nav>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
-
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -583,5 +492,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/shorts/detail.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
+    <title>영상갤러리 - Shorts 상세</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -181,7 +181,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -191,7 +191,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -199,6 +199,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -240,7 +247,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -324,185 +330,71 @@
         </div>
 
         <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
+    <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+    <!-- 폼 1 시작  -->
+    <div class="form top">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box">
+            <div class="form-box">
+                <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
                 </div>
-                <button id="submit-survey" class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
             </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
 
+            <div class="form-box">
+                <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
                 </div>
-                <!-- 만족도 끝 -->
-
-                <button id="submit-recommand" class="form-btn">확인</button>
             </div>
-            <!-- 폼 2 끝  -->
         </div>
-        <a href="shorts.html" class="btn-list-prev">목록으로</a>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
+        <button id="submit-survey" class="form-btn">확인</button>
+        <!-- 만족도 끝 -->
+    </div>
+    <!-- 폼 1 끝  -->
 
 
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
+    <!-- 폼 2 시작  -->
+    <div class="form-02 cf">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+            <div class="form-box">
+                <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                <div class="form-radio-box other">
+                    <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                </div>
+                <div class="textarea-num">
+                    <span id="byteInfo">0</span>
+                    / 400
+                    <span>byte</span>
+                </div>
+            </div>
+
+        </div>
+        <!-- 만족도 끝 -->
+
+        <button id="submit-recommand" class="form-btn">확인</button>
+    </div>
+    <!-- 폼 2 끝  -->
+</div>
+        <a href="shorts.html" class="btn-list-prev">목록으로</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -578,5 +470,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/shorts/shorts.html

@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -180,7 +180,7 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -190,7 +190,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -198,6 +198,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -415,6 +422,9 @@
         <li class="prev disabled">
             <span>&lt;&lt;</span>
         </li>
+        <li class="prev">
+            <a href="">&lt;</a>
+        </li>
         <li class="active">
             <span>1</span>
         </li>
@@ -427,133 +437,22 @@
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;</a>
+        </li>
         <li class="next">
             <a href="">&gt;&gt;</a>
         </li>
 
     </ol>
 </nav>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
-
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -629,5 +528,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/toons/detail.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
+    <title>국민연금 소식 - 국민연금 인스타툰 상세</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -181,17 +181,17 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
-            <li><span>국민연금 인스타 툰</span></li>
+            <li><span>국민연금 인스타툰</span></li>
         </ol>
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -199,6 +199,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -240,7 +247,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -323,187 +329,71 @@
         </div>
 
         <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
+    <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+    <!-- 폼 1 시작  -->
+    <div class="form top">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box">
+            <div class="form-box">
+                <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
                 </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
             </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
 
+            <div class="form-box">
+                <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
                 </div>
-                <!-- 만족도 끝 -->
-
-                <button class="form-btn">확인</button>
             </div>
-            <!-- 폼 2 끝  -->
-
         </div>
-        <a href="toons.html" class="btn-list-prev">목록으로</a>
+        <button id="submit-survey" class="form-btn">확인</button>
+        <!-- 만족도 끝 -->
+    </div>
+    <!-- 폼 1 끝  -->
 
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
 
+    <!-- 폼 2 시작  -->
+    <div class="form-02 cf">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+            <div class="form-box">
+                <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                <div class="form-radio-box other">
+                    <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                </div>
+                <div class="textarea-num">
+                    <span id="byteInfo">0</span>
+                    / 400
+                    <span>byte</span>
+                </div>
+            </div>
+
+        </div>
+        <!-- 만족도 끝 -->
 
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
+        <button id="submit-recommand" class="form-btn">확인</button>
+    </div>
+    <!-- 폼 2 끝  -->
+</div>
+        <a href="toons.html" class="btn-list-prev">목록으로</a>
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -579,5 +469,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

dist/toons/toons.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-    <title>국민염금 소식 - 국민연금 인스타 툰</title>
+    <title>국민연금 소식 - 국민연금 인스타툰</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -19,7 +19,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="sub">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
@@ -181,17 +181,17 @@
 
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
-            <li><span>국민연금 인스타 툰</span></li>
+            <li><span>국민연금 인스타툰</span></li>
         </ol>
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         <div class="search-box">
@@ -199,6 +199,13 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>
         <ul class="menu-list">
@@ -232,7 +239,7 @@
 
         <div class="contents-box">
             <header class="contents-header">
-                <h2 class="contents-title">국민연금 인스타 툰</h2>
+                <h2 class="contents-title">국민연금 인스타툰</h2>
             </header>
 
             <ul class="common-list toons">
@@ -353,6 +360,9 @@
         <li class="prev disabled">
             <span>&lt;&lt;</span>
         </li>
+        <li class="prev">
+            <a href="">&lt;</a>
+        </li>
         <li class="active">
             <span>1</span>
         </li>
@@ -365,134 +375,23 @@
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;</a>
+        </li>
         <li class="next">
             <a href="">&gt;&gt;</a>
         </li>
 
     </ol>
 </nav>
-        <ul class="sns-sub">
-    <li>
-        <a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
-            <svg viewBox="0 0 20 20">
-                <path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
-							 M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
-            <svg viewBox="0 0 20 20">
-                <path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
-							c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
-                <path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
-							c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
-                <path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
-            <svg viewBox="0 0 20 20">
-                <path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
-                <path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
-                <path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
-                <path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
-							c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
-							c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
-							h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
-							c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
-							c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
-            <svg viewBox="0 0 20 20">
-                <polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 	"></polygon>
-                <polygon points="8.1,16 11.9,16 10.1,18.2 	"></polygon>
-                <path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
-            <svg viewBox="0 0 20 20">
-                <path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
-							H5.7v2.9h2.5v7.6H11.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li style="display: none;">
-        <a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
-            <svg viewBox="0 0 20 20">
-                <path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
-                <polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
-            <svg viewBox="0 0 20 20">
-                <path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
-							c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
-            </svg>
-        </a>
-    </li>
-    <!-- <li>
-        <a href="https://twitter.com/NPS_2010" class="sns_bg8"  target="_blank" id="npsShtwiter" title="트위터">
-            <svg viewBox="0 0 20 20">
-            <path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
-                c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
-                C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
-                c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
-            </svg>
-        </a>
-    </li> -->
-    <li>
-        <a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
-            <svg viewBox="0 0 20 20">
-                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
-                    <stop offset="0" style="stop-color:#fff"></stop>
-                    <stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
-                </linearGradient>
-                <path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
-							C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
-                <path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
-							L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
-                <path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
-							l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
-            </svg>
-        </a>
-    </li>
-    <li>
-        <a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
-            <svg viewBox="0 0 20 20">
-                <path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
-            </svg>
-        </a>
-    </li>
-</ul>
-
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>
 
     </main>
 </div>
 
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -568,5 +467,6 @@
 </footer>
 <!--E: 푸터 영역-->
 
+
 </body>
 </html>

src/html/clips/clips.html

@@ -1,7 +1,7 @@
 @@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - 동영상", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -11,7 +11,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -45,17 +45,20 @@
 
                     <figure class="thumbnail">
                         <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
+                            <img class="thumbnail-img" src="https://i.ytimg.com/vi/TJBZ8txUCV0/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBkHVijcRpFDTZSGB_fzVGs7s_yTw" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="detail.html">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스] 국민연금에 대한 오해와 진실? 이제 국민연금 바로알기로 고민 끝!</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -72,10 +75,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
-                               기준 5.82%의 운용수익률..</a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -92,12 +97,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                국민연금 기준소득월액 <br>
-                                변경!
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -114,11 +119,12 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                실업크레딧을 통한 <br>가입기간 확대 지원
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -136,6 +142,12 @@
                             <a href="detail.html">스톱모션으로 알아보는 <br>
                                 국민연금 '크레딧 제도'</a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -155,6 +167,12 @@
                                 레벨업⭐
                             </a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -174,6 +192,12 @@
                                 파헤치기!
                             </a>
                         </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -192,12 +216,12 @@
                                 [국민연금공단X큰별쌤..]
                             </a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                조선시대에도 연금이 <br>
-                                있었다?!
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -216,12 +240,12 @@
                                 [NPS 릴레이 브이로그(vlog)]
                             </a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                인천국제공항에도 <br>
-                                국민연금공단이!?
-                            </a>
-                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -240,13 +264,12 @@
                                 국민연금 직장인 브이로그.
                             </a>
                         </h4>
-
-                            <a href="detail.html" class="item-summary">
-                                오늘도 뽀주임은 열일 중 <br>
-                                다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
-                            </a>
-
-
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -265,10 +288,12 @@
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="detail.html">
-                                국민연금공단
-                                장애인지원센터는 무슨 일이?
-                        </a>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -287,10 +312,12 @@
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="detail.html">
-                            국민연금공단
-                            장애인지원센터는 무슨 일
-                        </a>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.04.29</dd>
+                            </dl>
+                        </div>
                     </div>
 
                 </li>
@@ -300,7 +327,6 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/clips/detail.html

@@ -1,8 +1,8 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - 동영상 상세", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -12,7 +12,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -31,7 +31,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -60,7 +59,7 @@
 
                     <figure class="thumbnail">
                         <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
+                            <img class="thumbnail-img" src="https://i.ytimg.com/vi/TJBZ8txUCV0/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBkHVijcRpFDTZSGB_fzVGs7s_yTw" alt="">
                         </a>
                     </figure>
 
@@ -68,9 +67,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
-                        </p>
                     </div>
 
                 </li>
@@ -87,10 +83,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
-                                기준 5.82%의 운용수익률..</a>
-                        </p>
                     </div>
 
                 </li>
@@ -107,12 +99,6 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                국민연금 기준소득월액 <br>
-                                변경!
-                            </a>
-                        </p>
                     </div>
 
                 </li>
@@ -129,78 +115,14 @@
                         <h4 class="item-title">
                             <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
-                        <p class="item-summary">
-                            <a href="detail.html">
-                                실업크레딧을 통한 <br>가입기간 확대 지원
-                            </a>
-                        </p>
                     </div>
 
                 </li>
 
             </ul>
         </div>
-        <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
-                </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
-            </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
-
-                </div>
-                <!-- 만족도 끝 -->
-
-                <button class="form-btn">확인</button>
-            </div>
-            <!-- 폼 2 끝  -->
-
-        </div>
+        @@include("../../html/include/form-box.html")
         <a href="clips.html" class="btn-list-prev">목록으로</a>
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/include/footer.html

@@ -1,3 +1,7 @@
+
+<a href="#header" class="move-top">
+    <img src="../assets/images/common/move-top.png" alt="상단으로 이동">
+</a>
 </section>
 <!--E: 컨텐츠 영역-->
 
@@ -71,4 +75,4 @@
     </div>
     <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
 </footer>
-<!--E: 푸터 영역-->
+<!--E: 푸터 영역-->

src/html/include/form-box.html

@@ -0,0 +1,58 @@
+<div class="form-content-wrap">
+    <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+    <!-- 폼 1 시작  -->
+    <div class="form top">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box">
+            <div class="form-box">
+                <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
+                </div>
+            </div>
+
+            <div class="form-box">
+                <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                <div class="form-radio-box">
+                    <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                    <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
+                </div>
+            </div>
+        </div>
+        <button id="submit-survey" class="form-btn">확인</button>
+        <!-- 만족도 끝 -->
+    </div>
+    <!-- 폼 1 끝  -->
+
+
+    <!-- 폼 2 시작  -->
+    <div class="form-02 cf">
+        <!-- 만족도 시작 -->
+        <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+            <div class="form-box">
+                <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                <div class="form-radio-box other">
+                    <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                </div>
+                <div class="textarea-num">
+                    <span id="byteInfo">0</span>
+                    / 400
+                    <span>byte</span>
+                </div>
+            </div>
+
+        </div>
+        <!-- 만족도 끝 -->
+
+        <button id="submit-recommand" class="form-btn">확인</button>
+    </div>
+    <!-- 폼 2 끝  -->
+</div>

src/html/include/header.html

@@ -6,7 +6,7 @@
 <!--E: 숨김 메뉴-->
 
 <!--S: 헤더 영역-->
-<header id="header">
+<header id="header" class="@@mainClass">
     <div class="container">
         <div class="logo-box">
             <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">

src/html/include/pagination.html

@@ -3,6 +3,9 @@
         <li class="prev disabled">
             <span>&lt;&lt;</span>
         </li>
+        <li class="prev">
+            <a href="">&lt;</a>
+        </li>
         <li class="active">
             <span>1</span>
         </li>
@@ -15,6 +18,9 @@
         <li><a href="">8</a></li>
         <li><a href="">9</a></li>
         <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;</a>
+        </li>
         <li class="next">
             <a href="">&gt;&gt;</a>
         </li>

src/html/include/search_box.html

@@ -3,5 +3,12 @@
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
+        <div class="label-wrap">
+            <input type="radio" name="search" value="title" id="search-title" checked/>
+            <label for="search-title" class="first">제목</label>
+
+            <input type="radio" name="search" value="title" id="search-contents" />
+            <label for="search-contents">제목 + 내용</label>
+        </div>
     </form>
 </div>

src/html/include/sub-sns.html

@@ -107,12 +107,3 @@
         </a>
     </li>
 </ul>
-
-
-<a href="#contents" class="move-top">
-    <svg viewBox="0 0 20 20">
-        <path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
-					h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
-					c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
-    </svg>
-</a>

src/html/index.html

@@ -1,5 +1,5 @@
 @@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
-@@include("./include/header.html")
+@@include("./include/header.html", {"mainClass" : "main"})
 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 <div class="container" id="main">
@@ -61,14 +61,20 @@
                 <a href="#" class="link">
                     <h2 class="title">숫자로 보는 국민연금</h2>
                     <p class="sub-text">
-                        7월 11일 세계 인구의 날을 맞이하여 알아보는 숫자로 보는 국민연금 날을 맞이하여 알아보는 숫자로 보는 국민연금
+                        세계인구의날 맞이
+                        연금가입&수급통계
                     </p>
                 </a>
             </div>
         </div>
     </div>
     <div class="main-center">
-        <div class="box line-banner"  style="background-image:url('assets/images/ex/ex5.png')">
+        <div class="box line-banner pc"  style="background-image:url('assets/images/ex/ex5.png')">
+            <a href="#" class="box-link">
+                <p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p>
+            </a>
+        </div>
+        <div class="box line-banner mobile"  style="background-image:url('assets/images/ex/ex5-m.png')">
             <a href="#" class="box-link">
                 <p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p>
             </a>
@@ -328,11 +334,16 @@
                     </li>
                 </ul>
 
-                <button type="button" class="btn-more">+ 쇼츠 더보기</button>
+                <button type="button" class="btn-more">+ 동영상 더보기</button>
             </div>
         </div>
     </div>
 </div>
+<style>
+    .move-top {
+        display: none;
+    }
+</style>
 <script>
     var recentNotice = new Swiper ('.left-slide .swiper-container', {
         slidesPerView: 1,
@@ -344,13 +355,9 @@
         },
         pagination: {
             el: ".left-slide .swiper-pagination",
-            renderBullet: function (index, className) {
-                return '<span class="' + className + '">' + (index + 1) + "</span>";
-            },
         },
         autoplay: {
             delay: 3000,
-            reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {
@@ -363,13 +370,11 @@
         slidesPerView: "auto",
         slidesPerGroupSkip: 1,
         initial:0,
-        rewind: true,
         pagination: {
             el: ".right-slide .swiper-pagination",
         },
         autoplay: {
             delay: 3000,
-            reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {

src/html/news/detail.html

@@ -1,8 +1,8 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "국민연금 소식 - 국민연금 새소식 상세", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -12,7 +12,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -31,7 +31,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -1280,67 +1279,8 @@
                 </li>
             </ul>
         </div>
-        <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
-                </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
-            </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
-
-                </div>
-                <!-- 만족도 끝 -->
-
-                <button class="form-btn">확인</button>
-            </div>
-            <!-- 폼 2 끝  -->
-
-        </div>
+        @@include("../../html/include/form-box.html")
         <a href="news.html" class="btn-list-prev">목록으로</a>
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/news/news.html

@@ -1,7 +1,7 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식" , "ROOT":"../"})
-@@include("../../html/include/header.html", {"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "국민연금 소식 - 새소식" , "ROOT":"../"})
+@@include("../../html/include/header.html", {"ROOT":"../", "mainClass":"sub"})
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -11,7 +11,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -36,18 +36,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
-                        </h4>
-                        <p class="item-summary">
-                            (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.07.01</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </h4>
+                            <p class="item-summary">
+                                (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.07.01</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -61,18 +63,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
-                        </h4>
-                        <p class="item-summary">
-                            배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.28</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                               [7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단
+                            </h4>
+                            <p class="item-summary">
+                                배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.28</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -86,18 +90,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
-                        </h4>
-                        <p class="item-summary">
-                            "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.03</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!
+                            </h4>
+                            <p class="item-summary">
+                                "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.03</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -111,18 +117,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
-                        </h4>
-                        <p class="item-summary">
-                            배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.06.03</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방
+                            </h4>
+                            <p class="item-summary">
+                                배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.06.03</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -136,18 +144,20 @@
                     </figure>
 
                     <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
-                        </h4>
-                        <p class="item-summary">
-                            가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
-                        </p>
-                        <div class="item-info">
-                            <dl>
-                                <dt class="sr-only">등록일</dt>
-                                <dd>2024.04.29</dd>
-                            </dl>
-                        </div>
+                        <a href="detail.html">
+                            <h4 class="item-title">
+                                [5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이
+                            </h4>
+                            <p class="item-summary">
+                                가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
+                            </p>
+                            <div class="item-info">
+                                <dl>
+                                    <dt class="sr-only">등록일</dt>
+                                    <dd>2024.04.29</dd>
+                                </dl>
+                            </div>
+                        </a>
                     </div>
 
                 </li>
@@ -156,7 +166,6 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/shorts/detail.html

@@ -1,8 +1,8 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - Shorts 상세", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -12,7 +12,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -31,7 +31,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -114,66 +113,8 @@
             </ul>
         </div>
 
-        <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
-                </div>
-                <button id="submit-survey" class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
-            </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
-
-                </div>
-                <!-- 만족도 끝 -->
-
-                <button id="submit-recommand" class="form-btn">확인</button>
-            </div>
-            <!-- 폼 2 끝  -->
-        </div>
+        @@include("../../html/include/form-box.html")
         <a href="shorts.html" class="btn-list-prev">목록으로</a>
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/shorts/shorts.html

@@ -1,7 +1,7 @@
 @@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - Shorts", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
@@ -11,7 +11,7 @@
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -202,7 +202,6 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/toons/detail.html

@@ -1,18 +1,18 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "국민연금 소식 - 국민연금 인스타툰 상세", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
-            <li><span>국민연금 인스타 툰</span></li>
+            <li><span>국민연금 인스타툰</span></li>
         </ol>
     </nav>
 </div>
 
-<div class="sub-main container" id="board">
+<div class="sub-main container sub-page" id="board">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -31,7 +31,6 @@
                 </dl>
                 <div class="list-detail-sns">
                     <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
-                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
                     <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
                     <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
                 </div>
@@ -113,68 +112,8 @@
             </ul>
         </div>
 
-        <div class="form-content-wrap">
-            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
-
-            <!-- 폼 1 시작  -->
-            <div class="form">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box">
-                    <div class="form-box">
-                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
-                        </div>
-                    </div>
-
-                    <div class="form-box">
-                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
-                        <div class="form-radio-box">
-                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
-                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
-                        </div>
-                    </div>
-                </div>
-                <button class="form-btn">확인</button>
-                <!-- 만족도 끝 -->
-            </div>
-            <!-- 폼 1 끝  -->
-
-
-            <!-- 폼 2 시작  -->
-            <div class="form-02 cf">
-                <!-- 만족도 시작 -->
-                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
-                    <div class="form-box">
-                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
-                        <div class="form-radio-box other">
-                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
-                        </div>
-                        <div class="textarea-num">
-                            <span id="byteInfo">0</span>
-                            / 400
-                            <span>byte</span>
-                        </div>
-                    </div>
-
-                </div>
-                <!-- 만족도 끝 -->
-
-                <button class="form-btn">확인</button>
-            </div>
-            <!-- 폼 2 끝  -->
-
-        </div>
+        @@include("../../html/include/form-box.html")
         <a href="toons.html" class="btn-list-prev">목록으로</a>
-
-        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/toons/toons.html

@@ -1,18 +1,18 @@
-@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰", "ROOT":"../"})
-@@include("../../html/include/header.html",{"ROOT":"../"})
+@@include("../../html/include/meta.html", {"pageTitle" : "국민연금 소식 - 국민연금 인스타툰", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../", "mainClass" : "sub"})
 
 
-<div class="container">
+<div class="container sub-page">
     <nav class="breadcrumb">
         <ol>
             <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
-            <li><span>국민연금 인스타 툰</span></li>
+            <li><span>국민연금 인스타툰</span></li>
         </ol>
     </nav>
 </div>
 
-<div class="sub-main container" id="main">
+<div class="sub-main container sub-page" id="main">
 
     <aside class="left-nav">
         @@include("../../html/include/search_box.html", {"ROOT": ".."})
@@ -23,7 +23,7 @@
 
         <div class="contents-box">
             <header class="contents-header">
-                <h2 class="contents-title">국민연금 인스타 툰</h2>
+                <h2 class="contents-title">국민연금 인스타툰</h2>
             </header>
 
             <ul class="common-list toons">
@@ -140,7 +140,6 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-        @@include("../../html/include/sub-sns.html")
 
     </main>
 </div>

src/scss/common/_layout.scss

@@ -21,23 +21,28 @@ html {
 
 #header {
   width:100%;
-  background-color:#fff;
+  background-color:#f1f1f1;
   .logo-box {
     width:100%;
     height:REM(30px);
     @include display-flex();
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
     #logo {
       width:REM(115px);
-      height:REM(18px);
+      height:REM(15px);
+      margin-left:auto;
+      margin-top:REM(20px);
     }
     .link {
-      width:REM(61px);
+      width:REM(64px);
       height:REM(18px);
       border:REM(1px) solid #DADADAFF;
-      font-size:REM(7px);
+      font-size:REM(8px);
       border-radius:REM(18px);
+      margin-top:REM(15px);
+      margin-left:REM(5px);
+      background-color:#fff;
       @include display-flex();
       align-items: center;
       justify-content: center;
@@ -47,6 +52,11 @@ html {
   @include display-xs(){
     display: none;
   }
+  &.sub {
+    .container {
+      max-width:REM(1146px);
+    }
+  }
 }
 
 .mobile-header {
@@ -129,12 +139,21 @@ body:has(#mobile-left-menu.opened) {
   padding:0 REM(80px);
 }
 
+.container.sub-page {
+  width:100%;
+  max-width:REM(1146px);
+  margin: 0 auto;
+  padding:0 REM(80px);
+}
+
 @include display-xs(){
 
-  .container {
+  .container,
+  .container.sub-page{
     width: 100%;
     padding:0;
   }
+
 }
 
 .mobile-nav {
@@ -230,18 +249,10 @@ body:has(#mobile-left-menu.opened) {
     width: REM(169px);
     height: REM(158px);
     border-radius: REM(15px);
-    padding:REM(30px) REM(23px) 0 REM(23px);
-    &:before{
-      content:"국민연금공단 SNS 바로가기";
-      font-size:REM(13.5px);
-      font-weight:$font-weight-bold;
-      position:absolute;
-      width:100%;
-      text-align: center;
-      left:0;
-      top:REM(11px);
-      line-height:1;
-    }
+    padding:REM(15px) REM(23px);
+    @include display-flex();
+    flex-direction: column;
+    justify-content: space-between;
     .item{
       a {
         @include display-flex();
@@ -251,33 +262,24 @@ body:has(#mobile-left-menu.opened) {
         font-size:REM(13px);
         height:REM(38px);
         line-height:1;
-        &:before{
-          content:"";
-          display: block;
-          width:REM(35px);
-          height:REM(35px);
-          border-radius: REM(10px);
-          background-color:#02256CFF;
-          position:absolute;
-          left:0;
-          top:50%;
-          transform: translate(0, -50%);
-        }
+        font-weight:700;
         &:after{
           content:"";
+          width:REM(56px / 1.5);
+          height:REM(55px  / 1.5);
           position:absolute;
           left:0;
           top:50%;
           transform: translate(0, -50%);
-          background-size: cover;
+          background-size: contain;
+        }
+        &:hover{
+          opacity: 0.85;
         }
       }
       &.tv {
         > a {
           &:after{
-            width:REM(21px);
-            height:REM(21px);
-            left:REM(7px);
             @include background-image('../images/common/tv.png')
           }
         }
@@ -285,9 +287,6 @@ body:has(#mobile-left-menu.opened) {
       &.instagram {
         > a {
           &:after{
-            width:REM(21px);
-            height:REM(21px);
-            left:REM(7px);
             @include background-image('../images/common/instagram.png')
           }
         }
@@ -295,9 +294,6 @@ body:has(#mobile-left-menu.opened) {
       &.blog {
         > a {
           &:after{
-            width:REM(21px);
-            height:REM(21px);
-            left:REM(7px);
             @include background-image('../images/common/blog.png')
           }
         }
@@ -335,6 +331,8 @@ body:has(#mobile-left-menu.opened) {
           border:0;
           border-top:REM(3px / 3) solid #02256c;
           border-bottom:REM(3px / 3) solid #02256c;
+          padding:REM(5px / 3) REM(70px / 3) REM(5px / 3) REM(300px / 3) ;
+          font-size:REM(30px / 3);
         }
       }
       &:before{
@@ -349,7 +347,7 @@ body:has(#mobile-left-menu.opened) {
 
 #contents {
   background-color:#f1f1f1;
-  padding:REM(27px) 0 REM(20px) 0;
+  padding:REM(27px) 0 REM(50px) 0;
   @include display-xs(){
     padding:0 REM(33px / 3);
   }
@@ -358,6 +356,8 @@ body:has(#mobile-left-menu.opened) {
 #footer{
   background-color:#959595;
   padding:REM(25px) 0 REM(35px) 0;
+  position: relative;
+  z-index: 2;
   .logo-box{
     display: block;
     width:REM(125px);
@@ -411,7 +411,7 @@ body:has(#mobile-left-menu.opened) {
     flex-direction: column;
 
     .footer-info {
-      order:1;
+      order:2;
       flex-wrap: wrap;
       dl {
         order: 3;
@@ -440,7 +440,7 @@ body:has(#mobile-left-menu.opened) {
       }
     }
     .logo-box{
-      order:2;
+      order:1;
       width:REM(309px / 3);
       height:REM(49px / 3);
       margin:REM(35px / 3) auto;
@@ -452,7 +452,9 @@ body:has(#mobile-left-menu.opened) {
     }
     .copyright{
       order: 3;
-      font-size:REM(26px / 3);
+      font-size:REM(20px / 3);
+      letter-spacing: 0;
+      opacity: 0.7;
     }
   }
 }
@@ -462,7 +464,7 @@ body:has(#mobile-left-menu.opened) {
  */
 .search-box {
   width: REM(169px);
-  height:REM(135px);
+  min-height:REM(135px);
   background-color:#fff;
   padding:REM(30px) REM(12px) REM(20px) REM(12px);
   border-radius: REM(15px);
@@ -498,7 +500,7 @@ body:has(#mobile-left-menu.opened) {
       width:REM(16px);
       height:REM(27px);
       position:absolute;
-      right:REM(5px);
+      right:REM(8px);
       top:0;
       border:none;
       background-color:transparent;
@@ -512,11 +514,63 @@ body:has(#mobile-left-menu.opened) {
         outline: none;
       }
       .icon {
-        font-size:REM(16px);
+        font-size:REM(18px);
         color:#26356BFF;
       }
     }
   }
+
+  .label-wrap {
+    @include display-flex();
+    align-items: center;
+    justify-content: space-between;
+    @include display-xs(){
+      position:absolute;
+      left:0;
+      top:REM(16px / 3);
+      z-index: 2;
+    }
+  }
+
+  [type="radio"]:checked,
+  [type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  label {
+    display: inline-block;
+    font-size:REM(11px);
+    padding:REM(3px);
+    overflow:hidden;
+    cursor: pointer;
+    border-radius: REM(11px);
+    border:REM(1px) solid #26356BFF;
+    margin-top:REM(7px);
+    text-align: center;
+    width:REM(76px);
+    box-sizing: border-box;
+    &.first {
+      width:REM(62px);
+    }
+    @include display-xs(){
+      font-size:REM(27px / 3);
+      margin-top:0;
+      width:auto;
+      padding:REM(9px / 3) REM(20px / 3);
+      margin-left:REM(9px / 3);
+      &.first {
+        width:auto;
+      }
+    }
+  }
+  [type="radio"]:not(:checked) + label {
+    background-color:#fff;
+  }
+  [type="radio"]:checked + label {
+    color: #fff;
+    background-color:#26356BFF;
+  }
+
   @include display-xs(){
     position:absolute;
     left:0;
@@ -545,6 +599,7 @@ body:has(#mobile-left-menu.opened) {
       line-height:1;
       transition: background-color .3s ease, color .3s ease;
       background-color:#fff;
+      font-weight:700;
     }
 
     &:first-child {
@@ -738,29 +793,20 @@ body:has(#mobile-left-menu.opened) {
 }
 
 .move-top{
-  position:absolute;
-  bottom:REM(10px);
-  right:REM(-100px);
-  z-index:1;
-  width:REM(44px);
-  height:REM(44px);
+  position:fixed;
+  bottom:REM(35px);
+  right:0;
+  width:REM(42.5px);
+  height:REM(42.5px);
   font-size:0;
-  background:rgba(255,255,255,1);
   transition:.2s;
-  box-shadow:2px 3px 8px rgba(0,0,0,0.15);
-  border-radius:50%;
+  transform: translate(-155%, 0);
+  cursor: pointer;
+  img {
+    width:REM(42.5px);
+    height:REM(42.5px);
+  }
   @include display-xs(){
     display: none;
   }
-  svg {
-    position:absolute;
-    top:50%;
-    left:50%;
-    width:REM(20px);
-    height:REM(20px);
-    transform:translate(-50%,-50%);
-    fill:#666A70;
-    transition:.2s
-  }
-  :hover svg{transform:translate(-50%,-70%)}
 }

src/scss/components/_breadcrumbs.scss

@@ -1,6 +1,6 @@
 .breadcrumb {
   width:100%;
-  margin:0 0 REM(5px) 0;
+  margin:0 0 REM(15px) 0;
   padding:0 0 0 REM(186px); // 좌측 메뉴 만큼 띄워주기
 
   ol {
@@ -12,7 +12,7 @@
     li {
       a,span {
         color:#252525;
-        font-size:REM(14px);
+        font-size:REM(12px);
         font-weight:600;
       }
 
@@ -31,18 +31,18 @@
   }
 
   @include display-xs(){
+    margin:0 0 REM(15px / 3) 0;
     padding : 0;
     ol {
       li {
         a,span {
-
-          font-size:REM(30px / 3);
+          font-size:REM(24px / 3);
         }
 
         & + li {
           a, span {
             &:before {
-              font-size:REM(30px / 3);
+              font-size:REM(24px / 3);
               margin:0 REM(12px / 3);
             }
           }

src/scss/components/_contents_box.scss

@@ -12,10 +12,9 @@
     padding:REM(10px) 0;
 
     .contents-title {
-      font-size:REM(25px);
+      font-size:REM(20px);
       color:#02256c;
-      font-weight:600;
-      line-height:1em;
+      font-weight:800;
     }
   }
 
@@ -25,8 +24,8 @@
     margin:0 0 REM(60px /3) 0;
 
     .contents-header {
-      border-bottom:2px solid #02256c;
-      padding:REM(10px) 0;
+      border-bottom:REM(5px / 3) solid #02256c;
+      padding:0 0 REM(10px) 0;
 
       .contents-title {
         font-size:REM(39px / 3);

src/scss/components/_pagination.scss

@@ -25,6 +25,7 @@
         background-color:transparent;
         transition: color .3s ease, background-color .3s ease;
         cursor:pointer;
+        font-size:REM(16px);
         @include display-xs(){
           width:REM(60px / 3);
           height:REM(60px / 3);
@@ -52,6 +53,17 @@
           cursor:default;
         }
       }
+
+      @include display-xs(){
+        display: none;
+        &:nth-child(-n+7):not(.prev):not(.next) {
+          display: initial;
+        }
+        &.prev,
+        &.next {
+          display: initial;
+        }
+      }
     }
   }
 }

src/scss/pages/_lists.scss

@@ -55,7 +55,8 @@
       }
 
       @include display-xs(){
-        font-size:REM(36px / 3);
+        font-size:REM(33px / 3);
+        margin-top:REM(12px / 3);
         margin-bottom:REM(12px / 3);
         white-space: initial;
         word-wrap: break-word;
@@ -164,7 +165,7 @@
       padding-bottom:REM(30px);
       .item {
         width:50%;
-        padding:REM(10px) REM(15px);
+        padding:REM(10px) 0;
         @include display-flex();
         align-items: center;
         border-bottom: 1px solid #c2c2c2;
@@ -178,8 +179,9 @@
 
         .item-content {
           padding-left:REM(15px);
+          padding-right:REM(15px);
           .item-title {
-            font-size:REM(14px);
+            font-size:REM(13px);
             white-space: initial;
           }
         }
@@ -211,18 +213,33 @@
   &.toons {
     display:flex;
     flex-wrap:wrap;
+    margin-top:REM(25px);
 
     .item {
-      width:50%;
-      padding:REM(10px) REM(15px);
+      width:33%;
+      padding:0;
 
       .thumbnail {
-        width:REM(216px);
-        height:REM(216px);
+        width:REM(200px);
+        height:REM(200px);
         margin:0 auto REM(10px)
       }
 
-      @include display-xs(){
+      .item-content {
+        text-align: center;
+      }
+      .item-info {
+        margin-bottom:REM(30px);
+        line-height:1;
+        dl {
+          justify-content: center;
+        }
+      }
+    }
+
+    @include display-xs(){
+      margin-top:REM(30px / 3);
+      .item {
         width:100%;
         padding:REM(15px / 3) REM(20px / 3);
         border-bottom: 1px solid #c2c2c2;
@@ -231,26 +248,32 @@
           width:100%;
           height:auto;
         }
+        .item-info {
+          margin-bottom:REM(30px / 3);
+        }
       }
+
     }
+
     &.inner{
       .item {
         width:50%;
-        padding:REM(10px) REM(15px);
+        padding:REM(10px) 0;
         @include display-flex();
         align-items: center;
 
         .thumbnail {
           width:REM(100px);
           height:REM(100px);
-          margin:0 auto REM(10px);
+          margin:0;
           flex-shrink:0;
         }
 
         .item-content {
           padding-left:REM(15px);
+          padding-right:REM(15px);
           .item-title {
-            font-size:REM(14px);
+            font-size:REM(13px);
             white-space: initial;
           }
         }
@@ -277,17 +300,18 @@
   }
 
   &.shorts {
-    margin:0 REM(-4px);
+    margin:0;
     display:flex;
     flex-wrap:wrap;
+    justify-content: space-between;
 
     .item {
-      width:25%;
-      padding:REM(20px) REM(4px);
+      width:REM(153.1px);
+      padding:REM(20px) 0;
 
       .thumbnail {
-        width:REM(134px);
-        height:REM(220px);
+        width:REM(153.1px);
+        height:REM(253px);
         margin:0 0 REM(8px);
       }
 
@@ -312,10 +336,13 @@
     @include display-xs(){
       margin:0;
       .item {
-        width:100%;
+        width:48%;
         padding:REM(20px / 3) 0;
         border-bottom: 1px solid #c2c2c2;
         margin-bottom:REM(30px / 3);
+        &:nth-child(even) {
+         margin-left:2%;
+        }
         .thumbnail {
           width:100%;
           height:auto;
@@ -335,10 +362,12 @@
       margin-top:0;
       .item {
         width:50%;
-        padding:REM(10px) REM(15px);
+        padding:REM(10px) 0;
         @include display-flex();
         align-items: center;
-
+        &:nth-child(even) {
+          margin-left:0;
+        }
         .thumbnail {
           width:REM(84px);
           height:REM(126px);
@@ -348,8 +377,9 @@
 
         .item-content {
           padding-left:REM(15px);
+          padding-right:REM(15px);
           .item-title {
-            font-size:REM(15px);
+            font-size:REM(13px);
             white-space: initial;
             margin-bottom:0;
             br {
@@ -386,21 +416,33 @@
     display:flex;
     flex-wrap: wrap;
     width:100%;
-    margin: REM(-20px) REM(-4px);
+    margin: REM(-20px) 0;
     padding-bottom:REM(30px);
+    justify-content: space-between;
 
     .item {
-      padding:REM(20px) REM(4px);
-      width:25%;
+      padding:REM(20px) 0;
+      width:REM(230.85px);
       border-bottom:1px solid #c2c2c2;
 
       .thumbnail {
-        width:100%;
-        height:REM(95px);
+        width:REM(230.85px);
+        height:REM(129.6px);
       }
 
       .item-title {
-        font-size:REM(13px);
+        font-size:REM(14px);
+        margin-top:REM(10px);
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        word-wrap:break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 1.28em * 2;
+        -webkit-line-clamp: 2;
+        line-height:1.28em;
+        white-space: normal;
+        word-break: break-all;
       }
 
       .item-summary {
@@ -411,13 +453,16 @@
       }
     }
     @include display-xs(){
-      margin:0 0 REM(30px / 3) 0;
+      margin:0 0 REM(15px / 3) 0;
+      padding-bottom:REM(15px / 3);
       .item {
         width:100%;
-        padding:REM(15px / 3) REM(20px / 3);
+        padding:REM(15px / 3) REM(5px / 3);
+        margin-bottom:REM(15px / 3);
         border-bottom: 1px solid #c2c2c2;
         .item-title{
           margin-bottom:REM(12px / 3);
+          font-size:REM(33px / 3);
           a {
             > br {
               display: none;
@@ -443,13 +488,13 @@
       margin-top:0;
       .item {
         width:50%;
-        padding:REM(10px) REM(15px);
+        padding:REM(10px) 0;
         @include display-flex();
         align-items: center;
 
         .thumbnail {
-          width:REM(120px);
-          height:REM(80px);
+          width:REM(105px);
+          height:REM(58px);
           margin:0;
           flex-shrink:0;
         }
@@ -457,7 +502,7 @@
         .item-content {
           padding-left:REM(15px);
           .item-title {
-            font-size:REM(15px);
+            font-size:REM(13px);
             white-space: initial;
             br {
               display: none;
@@ -502,7 +547,7 @@
   border:1px solid #b7b7b7;
   padding: REM(10px);
   align-items: stretch;
-  margin:REM(12px) 0 REM(25px);
+  margin:REM(20px) 0 REM(25px) 0;
   border-radius:REM(15px);
 
   .tag-title {
@@ -511,7 +556,7 @@
     margin-right:REM(25px);
     display:flex;
     align-items: center;
-    font-size:REM(23.21px);
+    font-size:REM(18px);
     padding:0 REM(20px);
   }
 
@@ -535,9 +580,9 @@
         border-radius:REM(14px);
         background-color:#ffffff;
         color:#464646;
-        font-size:REM(16.42px);
+        font-size:REM(12px);
         padding:0 REM(14px);
-        box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
+        border:REM(1px) solid #b7b7b7;
       }
 
       &.active {
@@ -551,12 +596,12 @@
 
   @include display-xs(){
     padding:REM(20px / 3);
-    margin:REM(12px / 3) 0 REM(25px / 3);
+    margin:REM(30px / 3) 0 REM(25px / 3);
     border-radius:REM(15px / 3);
     flex-direction: column;
     .tag-title {
       padding-left:0;
-      font-size:REM(39px / 3);
+      font-size:REM(33px / 3);
     }
     .tag-list {
       margin:REM(-3px / 3);
@@ -573,7 +618,7 @@
           border-radius:REM(20px / 3);
           background-color:#ffffff;
           color:#464646;
-          font-size:REM(27px / 3);
+          font-size:REM(24px / 3);
           padding:0 REM(27px / 3);
         }
       }

src/scss/pages/main.scss

@@ -24,7 +24,13 @@
     }
     .line-01 {
       width:REM(169px);
+      .label-wrap {
+        display: none;
+      }
       @include display-xs(){
+        .label-wrap {
+          display: initial;
+        }
         #nav {
           .menu-list,
           .family-list {
@@ -38,7 +44,7 @@
       @include display-flex();
       flex-direction: column;
       .top{
-        border:REM(1px) solid #26356BFF;
+        border:REM(1px) solid #C8C8C8FF;
         border-radius: REM(15px);
         width:REM(417px);
         height:REM(234px);
@@ -134,6 +140,7 @@
         .bottom {
           flex-direction: row-reverse;
           margin-top:REM(20px / 3);
+          background-position: center;
           .left {
             border-radius: REM(20px / 3);
             width: REM(310px / 3);
@@ -305,19 +312,33 @@
     .line-banner{
       border:REM(1px) solid #C8C8C8FF;
       width:100%;
-      height:REM(71px);
+
       border-radius: REM(12px);
       background-position: center center;
       overflow: hidden;
       background-size: cover;
+      &.pc {
+        height:REM(71px);
+      }
+      &.mobile {
+        display: none;
+      }
 
     }
     @include display-xs(){
       margin:REM(20px / 3) 0;
       .line-banner{
         width:100%;
-        height:REM(65px / 3);
         border-radius: REM(20px / 3);
+        background-size: contain;
+        &.pc {
+          display: none;
+        }
+        &.mobile {
+          display: block;
+          height:REM(295px / 3);
+          background-size: cover;
+        }
       }
     }
   }
@@ -327,61 +348,37 @@
       @include display-flex();
       justify-content: center;
       width:100%;
-      height:REM(120px / 3);
+      padding:REM(30px / 3) 0;
       border-radius: REM(20px / 3);
-      padding-top:REM(60px / 3);
       position:relative;
       background-color:#fff;
       border:REM(1px) solid #cccccc;
       margin-bottom:REM(80px / 3);
-      &:before{
-        content:"국민연금공단 SNS 바로가기";
-        font-size:REM(26px / 3);
-        font-weight:$font-weight-bold;
-        position:absolute;
-        width:100%;
-        text-align: center;
-        left:0;
-        top:REM(15px / 3);
-        line-height:1;
-      }
       .item{
         a {
           @include display-flex();
           align-items: center;
           justify-content: space-between;
           position:relative;
-          padding-left:REM(45px / 3);
-          font-size:REM(18.5px / 3);
+          padding-left:REM(55px / 3);
+          font-size:REM(27px / 3);
           height:REM(40px / 3);
           line-height:1;
-          &:before{
-            content:"";
-            display: block;
-            width:REM(40px  / 3);
-            height:REM(40px / 3);
-            border-radius: REM(10px / 3);
-            background-color:#02256CFF;
-            position:absolute;
-            left:0;
-            top:50%;
-            transform: translate(0, -50%);
-          }
+          font-weight:700;
           &:after{
             content:"";
             position:absolute;
             left:0;
             top:50%;
             transform: translate(0, -50%);
-            background-size: cover;
+            background-size: contain;
+            width:REM(45px / 3);
+            height:REM(45px / 3);
           }
         }
         &.tv {
           > a {
             &:after{
-              width:REM(22px / 3);
-              height:REM(22px / 3);
-              margin-left:REM(8.5px / 3);
               @include background-image('../images/common/tv.png')
             }
           }
@@ -390,9 +387,6 @@
           margin-left:REM(50px / 3);
           > a {
             &:after{
-              width:REM(22px / 3);
-              height:REM(22px / 3);
-              margin-left:REM(9px / 3);
               @include background-image('../images/common/instagram.png')
             }
           }
@@ -401,9 +395,6 @@
           margin-left:REM(50px / 3);
           > a {
             &:after{
-              width:REM(22px / 3);
-              height:REM(22px / 3);
-              margin-left:REM(8.5px / 3);
               @include background-image('../images/common/blog.png')
             }
           }
@@ -429,11 +420,11 @@
       @include display-xs(){
         justify-content: flex-end;
         padding-bottom:REM(20px / 3);
-        margin-bottom:REM(20px / 3);
+        margin-bottom:0;
       }
     }
     .slide-title {
-      font-size:REM(23.57px);
+      font-size:REM(20px);
       line-height:1;
       color:#02205b;
       @include display-xs(){
@@ -456,6 +447,7 @@
         margin-left:REM(15px);
         line-height:1;
         padding:0;
+        color:#02205b;
         &.btn-right{
           margin-left:REM(5px);
         }
@@ -568,8 +560,10 @@
             flex-shrink: 0;
             .big{
               display: block;
-              font-size:REM(34.38px);
+              font-size:REM(30px);
               font-weight:$font-weight-bold;
+              text-align: center;
+              margin-top:REM(5px);
             }
           }
           .notice-text {
@@ -599,6 +593,7 @@
               white-space: nowrap;
               overflow: hidden;
               margin-bottom:0;
+              margin-top:REM(5px);
               a {
                 color:inherit;
               }
@@ -636,10 +631,10 @@
 
               margin-left:REM(35px / 3);
               .label{
-                font-size:REM(24.83px / 3);
+                font-size:REM(24px / 3);
               }
               .title{
-                font-size:REM(24.83px / 3);
+                font-size:REM(30px / 3);
                 padding-right:REM(50px / 3);
               }
             }
@@ -695,8 +690,8 @@
         }
         .btn-more {
           display: block;
-          font-size:REM(31.7px / 3);
-          border:REM(1px) solid #7D7D7DFF;
+          font-size:REM(27px / 3);
+          border:REM(1px / 3) solid #7D7D7DFF;
           color:#7D7D7DFF;
           width: 100%;
           height: REM(79px / 3);
@@ -705,6 +700,16 @@
         }
       }
     }
+  }
+  @include display-xs(){
+    #nav .search-box .search-form {
+      .input {
+        padding:REM(5px / 3) REM(70px / 3) REM(5px / 3) REM(45px / 3);
+      }
+      .label-wrap {
+        display: none;
+      }
+    }
 
   }
 }