board 상세 완료

dist/assets/css/style.css

@@ -597,8 +597,8 @@ html {
 }
 #nav .family-list .item.tv > a:after {
   width: 1.3125rem;
-  height: 0.9375rem;
-  margin-left: 0.5rem;
+  height: 1.3125rem;
+  left: 0.4375rem;
   background-color: transparent;
   background-image: url("../images/common/tv.png");
   background-repeat: no-repeat;
@@ -606,9 +606,9 @@ html {
   background-position-y: center;
 }
 #nav .family-list .item.instagram > a:after {
-  width: 1.1875rem;
-  height: 1.1875rem;
-  margin-left: 0.53125rem;
+  width: 1.3125rem;
+  height: 1.3125rem;
+  left: 0.4375rem;
   background-color: transparent;
   background-image: url("../images/common/instagram.png");
   background-repeat: no-repeat;
@@ -617,8 +617,8 @@ html {
 }
 #nav .family-list .item.blog > a:after {
   width: 1.3125rem;
-  height: 1.0625rem;
-  margin-left: 0.5rem;
+  height: 1.3125rem;
+  left: 0.4375rem;
   background-color: transparent;
   background-image: url("../images/common/blog.png");
   background-repeat: no-repeat;
@@ -711,12 +711,12 @@ html {
 }
 #footer .footer-info dl dt {
   font-weight: 500;
-  font-size: 0.5rem;
+  font-size: 0.625rem;
   color: #fff;
 }
 #footer .footer-info dl dd {
   font-weight: 500;
-  font-size: 0.5rem;
+  font-size: 0.625rem;
   color: #fff;
 }
 #footer .footer-info dl dd > br {
@@ -800,6 +800,7 @@ html {
   border-radius: 0.9375rem;
   position: relative;
   box-sizing: border-box;
+  border: 0.0625rem solid #c8c8c8;
 }
 .search-box .link {
   background-color: transparent;
@@ -869,15 +870,15 @@ html {
 .menu-list {
   border-radius: 0.9375rem;
   width: 10.5625rem;
-  min-height: 9.875rem;
   margin-top: 0.75rem;
+  border: 0.0625rem solid #c8c8c8;
 }
 .menu-list .item {
   position: relative;
 }
 .menu-list .item .link {
   display: block;
-  padding: 0.75rem 0;
+  padding: 0.78125rem 0;
   font-size: 0.845rem;
   text-align: center;
   line-height: 1;
@@ -984,6 +985,93 @@ html {
 .sub-main .page-contents {
   flex: 1;
   min-width: 0;
+  position: relative;
+}
+
+.sns-sub {
+  display: none;
+  position: relative;
+  top: inherit;
+  left: inherit;
+  right: inherit;
+  text-align: center;
+  padding: 0.625rem 0.9375rem;
+  max-width: 10.4166666667rem;
+  width: 100%;
+  margin: 0.625rem auto 0 auto;
+}
+@media screen and (max-width: 768px) {
+  .sns-sub {
+    display: block;
+  }
+}
+.sns-sub:before {
+  content: "";
+  position: absolute;
+  width: 200%;
+  height: 100%;
+  background-color: #fff;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.sns-sub li {
+  display: inline-block;
+  margin: 0.1041666667rem;
+}
+.sns-sub li a {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: #bcc0c9;
+  display: block;
+  position: relative;
+  transition: 0.2s;
+}
+.sns-sub li a svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.8333333333rem;
+  height: 0.8333333333rem;
+  transform: translate(-50%, -50%);
+  fill: #fff;
+}
+
+.page-contents.detail .sns-sub:before {
+  background-color: transparent;
+}
+
+.move-top {
+  position: absolute;
+  bottom: 0.625rem;
+  right: -6.25rem;
+  z-index: 1;
+  width: 2.75rem;
+  height: 2.75rem;
+  font-size: 0;
+  background: rgb(255, 255, 255);
+  transition: 0.2s;
+  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 50%;
+}
+@media screen and (max-width: 768px) {
+  .move-top {
+    display: none;
+  }
+}
+.move-top svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  transform: translate(-50%, -50%);
+  fill: #666A70;
+  transition: 0.2s;
+}
+.move-top :hover svg {
+  transform: translate(-50%, -70%);
 }
 
 /***************************************************************************************
@@ -2949,6 +3037,7 @@ html {
   height: 14.3125rem;
   background-color: #33cc99;
   overflow: hidden;
+  border: 0.0625rem solid #c8c8c8;
 }
 #main .main-top .line-02 .bottom .left .link {
   width: 100%;
@@ -3030,6 +3119,7 @@ html {
     border-radius: 0.4166666667rem;
     width: 6.4583333333rem;
     height: 7.6458333333rem;
+    border: 0.0625rem solid #c8c8c8;
   }
   #main .main-top .line-02 .bottom .left .link {
     padding: 0.4166666667rem;
@@ -3097,6 +3187,7 @@ html {
 }
 #main .main-top .line-03 .bottom {
   border-radius: 0.9375rem;
+  border: 0.0625rem solid #c8c8c8;
   width: 12rem;
   height: 7rem;
   background-color: #ffb400;
@@ -3110,7 +3201,7 @@ html {
   padding: 0.625rem 0.625rem;
 }
 #main .main-top .line-03 .bottom .title {
-  font-size: 1.1875rem;
+  font-size: 1.125rem;
   font-weight: 800;
   line-height: 1.15;
   color: #fff;
@@ -3275,8 +3366,8 @@ html {
   }
   #main .family-list.mobile .item.tv > a:after {
     width: 0.4583333333rem;
-    height: 0.3125rem;
-    margin-left: 0.1666666667rem;
+    height: 0.4583333333rem;
+    margin-left: 0.1770833333rem;
     background-color: transparent;
     background-image: url("../images/common/tv.png");
     background-repeat: no-repeat;
@@ -3287,8 +3378,8 @@ html {
     margin-left: 1.0416666667rem;
   }
   #main .family-list.mobile .item.instagram > a:after {
-    width: 0.3958333333rem;
-    height: 0.3958333333rem;
+    width: 0.4583333333rem;
+    height: 0.4583333333rem;
     margin-left: 0.1875rem;
     background-color: transparent;
     background-image: url("../images/common/instagram.png");
@@ -3300,9 +3391,9 @@ html {
     margin-left: 1.0416666667rem;
   }
   #main .family-list.mobile .item.blog > a:after {
-    width: 0.4375rem;
-    height: 0.3541666667rem;
-    margin-left: 0.1666666667rem;
+    width: 0.4583333333rem;
+    height: 0.4583333333rem;
+    margin-left: 0.1770833333rem;
     background-color: transparent;
     background-image: url("../images/common/blog.png");
     background-repeat: no-repeat;
@@ -3370,6 +3461,7 @@ html {
   justify-content: center;
   margin-left: 0.9375rem;
   line-height: 1;
+  padding: 0;
 }
 #main .main-bottom .control-box .btn.btn-right {
   margin-left: 0.3125rem;
@@ -3377,6 +3469,13 @@ html {
 #main .main-bottom .control-box .btn .icon {
   font-size: 1.5rem;
 }
+#main .main-bottom .control-box .btn:active, #main .main-bottom .control-box .btn:hover, #main .main-bottom .control-box .btn:focus, #main .main-bottom .control-box .btn:focus-visible, #main .main-bottom .control-box .btn:focus-within {
+  width: 100%;
+  outline: none;
+  background-color: #d5d8e1;
+  cursor: pointer;
+  overflow: hidden;
+}
 #main .main-bottom .control-box .swiper-pagination {
   position: relative;
   left: 0;
@@ -3566,6 +3665,14 @@ html {
 #main .main-bottom .right-slide .swiper-slide.swiper-slide {
   margin-right: 0.5rem;
 }
+#main .main-bottom .right-slide .swiper-slide:last-child {
+  margin-right: 0;
+}
+#main .main-bottom .right-slide .swiper-slide.full {
+  width: 100% !important;
+  height: 12.1875rem;
+  border-radius: 1.25rem;
+}
 #main .main-bottom .right-slide .btn-more {
   display: none;
 }
@@ -3584,6 +3691,14 @@ html {
   #main .main-bottom .right-slide .swiper-slide.swiper-slide {
     margin-right: 0.2708333333rem;
   }
+  #main .main-bottom .right-slide .swiper-slide:last-child {
+    margin-right: 0;
+  }
+  #main .main-bottom .right-slide .swiper-slide.full {
+    width: 100% !important;
+    height: 8.125rem;
+    border-radius: 0.9375rem;
+  }
   #main .main-bottom .right-slide .btn-more {
     display: block;
     font-size: 0.6604166667rem;
@@ -3631,13 +3746,15 @@ html {
 }
 .common-list .item-content .item-title {
   color: #02256c;
-  font-size: 1rem;
+  font-size: 0.875rem;
   display: block;
   width: 100%;
+  /*
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   letter-spacing: -0.025em;
+  */
   font-weight: 700;
 }
 .common-list .item-content .item-title a {
@@ -3656,7 +3773,7 @@ html {
   }
 }
 .common-list .item-content .item-summary {
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   color: #252525;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -3664,7 +3781,7 @@ html {
   letter-spacing: -0.025em;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 0 0 0.3125rem 0;
+  margin: 0.3125rem 0 0.3125rem 0;
   font-weight: 500;
   height: 2.56em;
   -webkit-line-clamp: 2;
@@ -3689,7 +3806,7 @@ html {
   margin: 0 0.625rem 0 0;
 }
 .common-list .item-content .item-info dl dd {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   color: #959595;
   font-weight: 500;
 }
@@ -3713,7 +3830,7 @@ html {
 .common-list.news .item .item-content {
   flex: 1;
   min-width: 0;
-  padding: 0.5rem 0;
+  padding: 0 0 0.5rem 0;
 }
 .common-list.news .item .item-content .item-summary {
   height: 5.12em;
@@ -3763,7 +3880,7 @@ html {
   padding-left: 0.9375rem;
 }
 .common-list.news.inner .item .item-content .item-title {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   white-space: initial;
 }
 @media screen and (max-width: 768px) {
@@ -3803,9 +3920,6 @@ html {
   height: 13.5rem;
   margin: 0 auto 0.625rem;
 }
-.common-list.toons .item .item-content .item-title {
-  font-size: 1.25rem;
-}
 @media screen and (max-width: 768px) {
   .common-list.toons .item {
     width: 100%;
@@ -3817,10 +3931,6 @@ html {
     width: 100%;
     height: auto;
   }
-  .common-list.toons .item .item-content .item-title {
-    font-size: 0.6875rem;
-    margin-bottom: 0.25rem;
-  }
 }
 .common-list.toons.inner .item {
   width: 50%;
@@ -3840,7 +3950,7 @@ html {
   padding-left: 0.9375rem;
 }
 .common-list.toons.inner .item .item-content .item-title {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   white-space: initial;
 }
 @media screen and (max-width: 768px) {
@@ -3876,17 +3986,21 @@ html {
   height: 13.75rem;
   margin: 0 0 0.5rem;
 }
-.common-list.shorts .item .item-content .item-title {
+.common-list.shorts .item .item-content {
+  /*
+  .item-title {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-  word-wrap: break-word;
+    word-wrap:break-word;
     overflow: hidden;
     text-overflow: ellipsis;
-  height: 2.56em;
+    height: 1.28em * 2;
     -webkit-line-clamp: 2;
-  line-height: 1.28em;
+    line-height:1.28em;
     white-space: normal;
     word-break: break-all;
+  }
+  */
 }
 @media screen and (max-width: 768px) {
   .common-list.shorts {
@@ -4155,7 +4269,7 @@ html {
   border-bottom: 0.0625rem solid #02256c;
 }
 #board .page-contents .contents-header .contents-title {
-  font-size: 1.875rem;
+  font-size: 1.5rem;
   margin-bottom: 0.625rem;
 }
 #board .page-contents .contents-header .page-header-info {

dist/clips/clips.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -192,7 +194,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -529,7 +531,124 @@
 
     </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>
 

dist/clips/detail.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -193,7 +195,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -226,7 +228,7 @@
 </ul>
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">기초연금제도 10주년 기념,국민참여 공모전 수상작을 소개합니다.</h2>
@@ -345,42 +347,6 @@
 
                 </li>
 
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">스톱모션으로 알아보는 <br>
-                                국민연금 '크레딧 제도'</a>
-                        </h4>
-                    </div>
-
-                </li>
-
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">
-                                ⭐미션! 2023 국민연금<br>
-                                레벨업⭐
-                            </a>
-                        </h4>
-                    </div>
-
-                </li>
-
             </ul>
         </div>
         <div class="form-content-wrap">
@@ -443,6 +409,124 @@
 
         </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>
     </main>
 </div>
 

dist/index.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="./news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="./toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="./clips/clips.html">동영상</a></li>
+                    <li><a href="./shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -177,15 +179,15 @@
 <section id="contents">
 
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<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">
     <h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
     <div class="main-top">
         <div class="line-01">
             <nav id="nav">
                 <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="./index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -193,13 +195,13 @@
 </div>
                 <ul class="menu-list">
     <li class="item ">
-        <a href="../news/news.html" class="link">국민연금 소식</a>
+        <a href="./news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li class=""><a href="./news/news.html">새소식</a></li>
             <li><a href="#">ESG</a></li>
             <li><a href="#">이벤트</a></li>
             <li><a href="#">대학생 홍보대사</a></li>
-            <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+            <li class=""><a href="./toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -209,17 +211,17 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  ">
-        <a href="../clips/clips.html" class="link">영상갤러리</a>
+        <a href="./clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class=""><a href="../clips/clips.html">동영상</a></li>
-            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
+            <li class=""><a href="./clips/clips.html">동영상</a></li>
+            <li class=""><a href="./shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>
                 <ul class="family-list">
-                    <li class="item tv"><a href="#">국민연금 TV</a></li>
-                    <li class="item instagram"><a href="#">인스타그램</a></li>
-                    <li class="item blog"><a href="#">블로그</a></li>
+                    <li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
+                    <li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
+                    <li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
                 </ul>
             </nav>
         </div>
@@ -282,9 +284,9 @@
         </div>
     </div>
     <ul class="family-list mobile">
-        <li class="item tv"><a href="#">국민연금 TV</a></li>
-        <li class="item instagram"><a href="#">인스타그램</a></li>
-        <li class="item blog"><a href="#">블로그</a></li>
+        <li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
+        <li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
+        <li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
     </ul>
     <div class="main-bottom">
         <div class="left-slide">
@@ -293,6 +295,7 @@
                     <h2 class="slide-title">최신 글 모아보기</h2>
                     <div class="control-box">
                         <div class="swiper-pagination"></div>
+
                         <button type="button" title="이전" class="btn btn-left">
                             <span class="material-symbols-outlined icon">chevron_left</span>
                         </button>
@@ -399,15 +402,115 @@
                             </div>
                         </div>
                     </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">01</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">28</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">20</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">16</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">01</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">28</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">20</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">16</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
+                            </div>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </div>
         <div class="right-slide">
             <div class="swiper-container">
                 <div class="title-box">
-                    <h2 class="slide-title">국민연금 Shorts</h2>
+                    <h2 class="slide-title">
+                        <span class="title title-1">영상갤러리</span>
+                        <span class="title title-2" style="display: none;">국민연금 Shorts</span>
+                    </h2>
                     <div class="control-box">
                         <div class="swiper-pagination"></div>
+
                         <button type="button" title="이전" class="btn btn-left">
                             <span class="material-symbols-outlined icon">chevron_left</span>
                         </button>
@@ -417,12 +520,7 @@
                     </div>
                 </div>
                 <ul class="swiper-wrapper short-list">
-                    <li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')">
-                        <a href="#" class="box-link">
-                            <p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
-                        </a>
-                    </li>
-                    <li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')">
+                    <li class="swiper-slide box full" style="background-image:url('assets/images/ex/ex8.png')">
                         <a href="#" class="box-link">
                             <p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
                         </a>
@@ -447,14 +545,20 @@
 <script>
     var recentNotice = new Swiper ('.left-slide .swiper-container', {
         slidesPerView: 1,
+        loop: true,
+        loopFillGroupWithBlank: true,
+        initial:0,
         grid: {
-            rows: 4,
+            rows: 4
         },
         pagination: {
             el: ".left-slide .swiper-pagination",
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + (index + 1) + "</span>";
+            },
         },
         autoplay: {
-            delay: 2000,
+            delay: 3000,
             reverseDirection: true,
             disableOnInteraction: false,
         },
@@ -465,21 +569,32 @@
     })
 
     var shortList = new Swiper ('.right-slide .swiper-container', {
-        slidesPerView: 2,
-        grid: {
-            rows: 1,
-        },
+        slidesPerView: "auto",
+        slidesPerGroupSkip: 1,
+        initial:0,
+        rewind: true,
         pagination: {
             el: ".right-slide .swiper-pagination",
         },
         autoplay: {
-            delay: 2000,
+            delay: 3000,
             reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {
             nextEl:".right-slide .btn-right",
             prevEl: ".right-slide .btn-left",
+        },
+        on: {
+            init : function (){
+                $('.right-slide .slide-title .title-1').show();
+            },
+            slideChange: function () {
+                console.log(this.realIndex);
+                var current = this.realIndex;
+                $('.right-slide .slide-title .title').hide(); // 모든 타이틀을 숨김
+                $('.right-slide .slide-title .title-' + (current + 1)).show(); // 현재 인덱스에 해당하는 타이틀을 표시
+            },
         }
     })
 </script>

dist/news/detail.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -193,7 +195,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -226,7 +228,7 @@
 </ul>
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단</h2>
@@ -1485,21 +1487,6 @@
                     </div>
 
                 </li>
-
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img"  src="../assets/images/ex/news-05.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
-                        </h4>
-                    </div>
-                </li>
             </ul>
         </div>
         <div class="form-content-wrap">
@@ -1561,7 +1548,125 @@
             <!-- 폼 2 끝  -->
 
         </div>
-        <a href="clips.html" class="btn-list-prev">목록으로</a>
+        <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>
     </main>
 </div>
 

dist/news/news.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -192,7 +194,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -385,6 +387,124 @@
 
     </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>
 

dist/shorts/detail.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -182,7 +184,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
@@ -193,7 +195,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -226,7 +228,7 @@
 </ul>
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">국민연금, 내고 싶은 사람만 내면 안되나요?</h2>
@@ -318,34 +320,6 @@
                     </div>
                 </li>
 
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">199X년생부터 국민연금
-                                을 하나도 못 받는다고?!</a>
-                        </h4>
-                    </div>
-                </li>
-
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">유럽 vs 우리나라
-                                국민연금 급여 차이는?</a>
-                        </h4>
-                    </div>
-                </li>
-
             </ul>
         </div>
 
@@ -408,6 +382,124 @@
             <!-- 폼 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>
+
+
+<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>
 

dist/shorts/shorts.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -181,7 +183,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="detail.html">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
@@ -192,7 +194,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -431,7 +433,124 @@
 
     </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>
 

dist/toons/detail.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -182,7 +184,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
@@ -193,7 +195,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -226,7 +228,7 @@
 </ul>
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">신입사원의 귀여운 실수?</h2>
@@ -316,30 +318,6 @@
                         </h4>
                     </div>
                 </li>
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
-                        </h4>
-                    </div>
-                </li>
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
-                        </h4>
-                    </div>
-                </li>
 
             </ul>
         </div>
@@ -404,6 +382,125 @@
 
         </div>
         <a href="toons.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>
     </main>
 </div>
 

dist/toons/toons.html

@@ -22,6 +22,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -72,6 +73,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -95,11 +97,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="..//news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -124,8 +126,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="..//clips/clips.html">동영상</a></li>
+                    <li><a href="..//shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -182,7 +184,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
@@ -193,7 +195,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="../index.html" class="link">국민연금 ON AIR</a>
     <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>
@@ -369,6 +371,124 @@
 
     </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>

src/html/clips/clips.html

@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips", "ROOT": ".."})
     </aside>
 
     <main class="page-contents">
@@ -300,7 +300,7 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/clips/detail.html

@@ -15,11 +15,11 @@
 <div class="sub-main container" id="board">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips", "ROOT": ".."})
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">기초연금제도 10주년 기념,국민참여 공모전 수상작을 소개합니다.</h2>
@@ -138,42 +138,6 @@
 
                 </li>
 
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">스톱모션으로 알아보는 <br>
-                                국민연금 '크레딧 제도'</a>
-                        </h4>
-                    </div>
-
-                </li>
-
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">
-                                ⭐미션! 2023 국민연금<br>
-                                레벨업⭐
-                            </a>
-                        </h4>
-                    </div>
-
-                </li>
-
             </ul>
         </div>
         <div class="form-content-wrap">
@@ -236,6 +200,7 @@
 
         </div>
         <a href="clips.html" class="btn-list-prev">목록으로</a>
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/include/header.html

@@ -9,6 +9,7 @@
 <header id="header">
     <div class="container">
         <div class="logo-box">
+            <a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
             <svg id="logo" viewBox="0 0 309.14 49.01">
                 <defs>
                     <linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
@@ -59,6 +60,7 @@
                     <path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
                 </g>
             </svg>
+            </a>
             <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
         </div>
     </div>
@@ -82,11 +84,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="@@ROOT/news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="@@ROOT/toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -111,8 +113,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="../clips/clips.html">동영상</a></li>
-                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                    <li><a href="@@ROOT/clips/clips.html">동영상</a></li>
+                    <li><a href="@@ROOT/shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>

src/html/include/left_menu.html

@@ -1,12 +1,12 @@
 <ul class="menu-list">
     <li class="item @@if ( active === 'news' ) { first active  }">
-        <a href="../news/news.html" class="link">국민연금 소식</a>
+        <a href="@@ROOT/news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class="@@if(subActive === 'news') {active}"><a href="../news/news.html">새소식</a></li>
+            <li class="@@if(subActive === 'news') {active}"><a href="@@ROOT/news/news.html">새소식</a></li>
             <li><a href="#">ESG</a></li>
             <li><a href="#">이벤트</a></li>
             <li><a href="#">대학생 홍보대사</a></li>
-            <li class="@@if(subActive === 'toons') {active}"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+            <li class="@@if(subActive === 'toons') {active}"><a href="@@ROOT/toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -16,10 +16,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  @@if ( active === 'clips' ) { first active  }">
-        <a href="../clips/clips.html" class="link">영상갤러리</a>
+        <a href="@@ROOT/clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class="@@if(subActive === 'clips') {active}"><a href="../clips/clips.html">동영상</a></li>
-            <li class="@@if(subActive === 'shorts') {active}"><a href="../shorts/shorts.html">Shorts</a></li>
+            <li class="@@if(subActive === 'clips') {active}"><a href="@@ROOT/clips/clips.html">동영상</a></li>
+            <li class="@@if(subActive === 'shorts') {active}"><a href="@@ROOT/shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>

src/html/include/search_box.html

@@ -1,5 +1,5 @@
 <div class="search-box">
-    <a href="#" class="link">국민연금 ON AIR</a>
+    <a href="@@ROOT/index.html" class="link">국민연금 ON AIR</a>
     <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>

src/html/include/sub-sns.html

@@ -0,0 +1,118 @@
+<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>

src/html/index.html

@@ -1,7 +1,7 @@
 @@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
 @@include("./include/header.html")
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<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">
     <h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
     <div class="main-top">
@@ -10,9 +10,9 @@
                 @@include("./include/search_box.html")
                 @@include("./include/left_menu.html", {"active": "main", "subActive": ""})
                 <ul class="family-list">
-                    <li class="item tv"><a href="#">국민연금 TV</a></li>
-                    <li class="item instagram"><a href="#">인스타그램</a></li>
-                    <li class="item blog"><a href="#">블로그</a></li>
+                    <li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
+                    <li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
+                    <li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
                 </ul>
             </nav>
         </div>
@@ -75,9 +75,9 @@
         </div>
     </div>
     <ul class="family-list mobile">
-        <li class="item tv"><a href="#">국민연금 TV</a></li>
-        <li class="item instagram"><a href="#">인스타그램</a></li>
-        <li class="item blog"><a href="#">블로그</a></li>
+        <li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
+        <li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
+        <li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
     </ul>
     <div class="main-bottom">
         <div class="left-slide">
@@ -86,6 +86,7 @@
                     <h2 class="slide-title">최신 글 모아보기</h2>
                     <div class="control-box">
                         <div class="swiper-pagination"></div>
+
                         <button type="button" title="이전" class="btn btn-left">
                             <span class="material-symbols-outlined icon">chevron_left</span>
                         </button>
@@ -192,15 +193,115 @@
                             </div>
                         </div>
                     </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">01</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">28</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">20</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">16</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">01</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">28</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">20</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
+                            </div>
+                        </div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="link">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd class="date">2024.07 <span class="big">16</span></dd>
+                            </dl>
+                            <div class="notice-text">
+                                <h5 class="label"><a href="#">공지사항</a></h5>
+                                <h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
+                            </div>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </div>
         <div class="right-slide">
             <div class="swiper-container">
                 <div class="title-box">
-                    <h2 class="slide-title">국민연금 Shorts</h2>
+                    <h2 class="slide-title">
+                        <span class="title title-1">영상갤러리</span>
+                        <span class="title title-2" style="display: none;">국민연금 Shorts</span>
+                    </h2>
                     <div class="control-box">
                         <div class="swiper-pagination"></div>
+
                         <button type="button" title="이전" class="btn btn-left">
                             <span class="material-symbols-outlined icon">chevron_left</span>
                         </button>
@@ -210,12 +311,7 @@
                     </div>
                 </div>
                 <ul class="swiper-wrapper short-list">
-                    <li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')">
-                        <a href="#" class="box-link">
-                            <p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
-                        </a>
-                    </li>
-                    <li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')">
+                    <li class="swiper-slide box full" style="background-image:url('assets/images/ex/ex8.png')">
                         <a href="#" class="box-link">
                             <p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
                         </a>
@@ -240,14 +336,20 @@
 <script>
     var recentNotice = new Swiper ('.left-slide .swiper-container', {
         slidesPerView: 1,
+        loop: true,
+        loopFillGroupWithBlank: true,
+        initial:0,
         grid: {
-            rows: 4,
+            rows: 4
         },
         pagination: {
             el: ".left-slide .swiper-pagination",
+            renderBullet: function (index, className) {
+                return '<span class="' + className + '">' + (index + 1) + "</span>";
+            },
         },
         autoplay: {
-            delay: 2000,
+            delay: 3000,
             reverseDirection: true,
             disableOnInteraction: false,
         },
@@ -258,21 +360,32 @@
     })
 
     var shortList = new Swiper ('.right-slide .swiper-container', {
-        slidesPerView: 2,
-        grid: {
-            rows: 1,
-        },
+        slidesPerView: "auto",
+        slidesPerGroupSkip: 1,
+        initial:0,
+        rewind: true,
         pagination: {
             el: ".right-slide .swiper-pagination",
         },
         autoplay: {
-            delay: 2000,
+            delay: 3000,
             reverseDirection: true,
             disableOnInteraction: false,
         },
         navigation: {
             nextEl:".right-slide .btn-right",
             prevEl: ".right-slide .btn-left",
+        },
+        on: {
+            init : function (){
+                $('.right-slide .slide-title .title-1').show();
+            },
+            slideChange: function () {
+                console.log(this.realIndex);
+                var current = this.realIndex;
+                $('.right-slide .slide-title .title').hide(); // 모든 타이틀을 숨김
+                $('.right-slide .slide-title .title-' + (current + 1)).show(); // 현재 인덱스에 해당하는 타이틀을 표시
+            },
         }
     })
 </script>

src/html/news/detail.html

@@ -15,11 +15,11 @@
 <div class="sub-main container" id="board">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news", "ROOT": ".."})
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단</h2>
@@ -1278,21 +1278,6 @@
                     </div>
 
                 </li>
-
-                <li class="item">
-
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img"  src="../assets/images/ex/news-05.jpg" alt="">
-                        </a>
-                    </figure>
-
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
-                        </h4>
-                    </div>
-                </li>
             </ul>
         </div>
         <div class="form-content-wrap">
@@ -1354,7 +1339,8 @@
             <!-- 폼 2 끝  -->
 
         </div>
-        <a href="clips.html" class="btn-list-prev">목록으로</a>
+        <a href="news.html" class="btn-list-prev">목록으로</a>
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/news/news.html

@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news", "ROOT": ".."})
     </aside>
 
     <main class="page-contents">
@@ -156,6 +156,7 @@
         </div>
 
         @@include("../../html/include/pagination.html")
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/shorts/detail.html

@@ -5,7 +5,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
@@ -15,11 +15,11 @@
 <div class="sub-main container" id="board">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts", "ROOT": ".."})
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">국민연금, 내고 싶은 사람만 내면 안되나요?</h2>
@@ -111,34 +111,6 @@
                     </div>
                 </li>
 
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">199X년생부터 국민연금
-                                을 하나도 못 받는다고?!</a>
-                        </h4>
-                    </div>
-                </li>
-
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="detail.html">
-                            <img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="detail.html">유럽 vs 우리나라
-                                국민연금 급여 차이는?</a>
-                        </h4>
-                    </div>
-                </li>
-
             </ul>
         </div>
 
@@ -201,6 +173,7 @@
             <!-- 폼 2 끝  -->
         </div>
         <a href="shorts.html" class="btn-list-prev">목록으로</a>
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/shorts/shorts.html

@@ -4,7 +4,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="detail.html">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts", "ROOT": ".."})
     </aside>
 
     <main class="page-contents">
@@ -202,7 +202,7 @@
         </div>
 
         @@include("../../html/include/pagination.html")
-
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/toons/detail.html

@@ -5,7 +5,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
@@ -15,11 +15,11 @@
 <div class="sub-main container" id="board">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons", "ROOT": ".."})
     </aside>
 
-    <main class="page-contents">
+    <main class="page-contents detail">
         <div class="contents-header">
             <header class="page-header">
                 <h2 class="contents-title">신입사원의 귀여운 실수?</h2>
@@ -109,30 +109,6 @@
                         </h4>
                     </div>
                 </li>
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
-                        </h4>
-                    </div>
-                </li>
-                <li class="item">
-                    <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
-                        </a>
-                    </figure>
-                    <div class="item-content">
-                        <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
-                        </h4>
-                    </div>
-                </li>
 
             </ul>
         </div>
@@ -197,6 +173,8 @@
 
         </div>
         <a href="toons.html" class="btn-list-prev">목록으로</a>
+
+        @@include("../../html/include/sub-sns.html")
     </main>
 </div>
 

src/html/toons/toons.html

@@ -5,7 +5,7 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="">홈</a></li>
+            <li><a href="../index.html">홈</a></li>
             <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
@@ -15,8 +15,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("../../html/include/search_box.html")
-        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
+        @@include("../../html/include/search_box.html", {"ROOT": ".."})
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons", "ROOT": ".."})
     </aside>
 
     <main class="page-contents">
@@ -140,6 +140,7 @@
         </div>
 
         @@include("../../html/include/pagination.html")
+        @@include("../../html/include/sub-sns.html")
 
     </main>
 </div>

src/scss/common/_layout.scss

@@ -276,8 +276,8 @@ body:has(#mobile-left-menu.opened) {
         > a {
           &:after{
             width:REM(21px);
-            height:REM(15px);
-            margin-left:REM(8px);
+            height:REM(21px);
+            left:REM(7px);
             @include background-image('../images/common/tv.png')
           }
         }
@@ -285,9 +285,9 @@ body:has(#mobile-left-menu.opened) {
       &.instagram {
         > a {
           &:after{
-            width:REM(19px);
-            height:REM(19px);
-            margin-left:REM(8.5px);
+            width:REM(21px);
+            height:REM(21px);
+            left:REM(7px);
             @include background-image('../images/common/instagram.png')
           }
         }
@@ -296,8 +296,8 @@ body:has(#mobile-left-menu.opened) {
         > a {
           &:after{
             width:REM(21px);
-            height:REM(17px);
-            margin-left:REM(8px);
+            height:REM(21px);
+            left:REM(7px);
             @include background-image('../images/common/blog.png')
           }
         }
@@ -382,12 +382,12 @@ body:has(#mobile-left-menu.opened) {
       }
       dt {
         font-weight:$font-weight-base;
-        font-size:REM(8px);
+        font-size:REM(10px);
         color:#fff;
       }
       dd {
         font-weight:$font-weight-base;
-        font-size:REM(8px);
+        font-size:REM(10px);
         color:#fff;
         > br{
           display: none;
@@ -468,6 +468,7 @@ body:has(#mobile-left-menu.opened) {
   border-radius: REM(15px);
   position:relative;
   box-sizing: border-box;
+  border:REM(1px) solid #C8C8C8FF;
   .link {
     @include background-image('../images/common/on-air.png');
     background-size: REM(142px) REM(38px);
@@ -530,15 +531,15 @@ body:has(#mobile-left-menu.opened) {
 .menu-list {
   border-radius: REM(15px);
   width: REM(169px);
-  min-height: REM(158px);
+  //min-height: REM(158px);
   margin-top: REM(12px);
-
+  border:REM(1px) solid #C8C8C8FF;
   .item {
     position:relative;
 
     .link {
       display: block;
-      padding:REM(12px) 0;
+      padding:REM(12.5px) 0;
       font-size:REM(13.52px);
       text-align: center;
       line-height:1;
@@ -675,5 +676,91 @@ body:has(#mobile-left-menu.opened) {
   .page-contents {
     flex:1;
     min-width:0;
+    position:relative;
+  }
+}
+
+
+.sns-sub {
+  display: none;
+  position:relative;
+  top:inherit;
+  left:inherit;
+  right:inherit;
+  text-align:center;
+  padding:REM(30px / 3) REM(45px / 3);
+  max-width:REM(500px / 3);
+  width: 100%;
+  margin:REM(30px / 3) auto 0 auto;
+  @include display-xs(){
+    display: block;
+  }
+  &:before{
+    content:"";
+    position:absolute;
+    width:200%;
+    height:100%;
+    background-color:#fff;
+    top:0;
+    left:50%;
+    transform: translate(-50%, 0);
+  }
+  li{
+    display:inline-block;
+    margin:REM(5px / 3);
+    a {
+      width: REM(60px / 3);
+      height: REM(60px / 3);
+      border-radius: 50%;
+      background: #bcc0c9;
+      display: block;
+      position: relative;
+      transition: .2s;
+      svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: REM(40px / 3);
+        height:  REM(40px / 3);
+        transform: translate(-50%, -50%);
+        fill: #fff;
+      }
+    }
+  }
+}
+
+.page-contents.detail {
+  .sns-sub {
+    &:before{
+      background-color:transparent;
+    }
+  }
+}
+
+.move-top{
+  position:absolute;
+  bottom:REM(10px);
+  right:REM(-100px);
+  z-index:1;
+  width:REM(44px);
+  height:REM(44px);
+  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%;
+  @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/pages/_lists.scss

@@ -35,13 +35,15 @@
   .item-content {
     .item-title {
       color:#02256c;
-      font-size:REM(16px);
+      font-size:REM(14px);
       display:block;
       width:100%;
+      /*
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       letter-spacing: -0.025em;
+      */
       font-weight:700;
 
       a {
@@ -61,9 +63,8 @@
       }
     }
 
-
     .item-summary {
-      font-size:REM(13px);
+      font-size:REM(12px);
       color:#252525;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -71,7 +72,7 @@
       letter-spacing: -0.025em;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin: 0 0 REM(5px) 0;
+      margin: REM(5px) 0 REM(5px) 0;
       font-weight:500;
       height: 1.28em * 2;
       -webkit-line-clamp: 2;
@@ -100,7 +101,7 @@
         }
 
         dd {
-          font-size:REM(14px);
+          font-size:REM(12px);
           color:#959595;
           font-weight:500;
           @include display-xs(){
@@ -130,7 +131,7 @@
 
         flex:1;
         min-width:0;
-        padding:REM(8px) 0;
+        padding:0 0 REM(8px) 0;
 
         .item-summary {
           height: 1.28em * 4;
@@ -178,7 +179,7 @@
         .item-content {
           padding-left:REM(15px);
           .item-title {
-            font-size:REM(15px);
+            font-size:REM(14px);
             white-space: initial;
           }
         }
@@ -221,12 +222,6 @@
         margin:0 auto REM(10px)
       }
 
-      .item-content {
-        .item-title {
-          font-size:REM(20px);
-        }
-      }
-
       @include display-xs(){
         width:100%;
         padding:REM(15px / 3) REM(20px / 3);
@@ -236,13 +231,6 @@
           width:100%;
           height:auto;
         }
-
-        .item-content {
-          .item-title{
-            font-size:REM(33px / 3);
-            margin-bottom:REM(12px / 3);
-          }
-        }
       }
     }
     &.inner{
@@ -262,7 +250,7 @@
         .item-content {
           padding-left:REM(15px);
           .item-title {
-            font-size:REM(15px);
+            font-size:REM(14px);
             white-space: initial;
           }
         }
@@ -304,6 +292,7 @@
       }
 
       .item-content {
+        /*
         .item-title {
           display: -webkit-box;
           -webkit-box-orient: vertical;
@@ -316,6 +305,7 @@
           white-space: normal;
           word-break: break-all;
         }
+        */
       }
     }
 

src/scss/pages/main.scss

@@ -58,6 +58,7 @@
           height: REM(229px);
           background-color:#33CC99FF;
           overflow:hidden;
+          border:REM(1px) solid #C8C8C8FF;
           .link {
             width: 100%;
             height:100%;
@@ -137,6 +138,7 @@
             border-radius: REM(20px / 3);
             width: REM(310px / 3);
             height: REM(367px / 3);
+            border:REM(1px) solid #C8C8C8FF;
             .link {
               padding:REM(20px / 3);
               @include display-flex();
@@ -205,6 +207,7 @@
       }
       .bottom {
         border-radius: REM(15px);
+        border:REM(1px) solid #C8C8C8FF;
         width: REM(192px);
         height: REM(112px);
         background-color:#FFB400FF;
@@ -215,7 +218,7 @@
           padding:REM(10px) REM(10px);
         }
         .title{
-          font-size:REM(19px);
+          font-size:REM(18px);
           font-weight:$font-weight-extra-bold;
           line-height:1.15;
           color:#fff;
@@ -223,7 +226,6 @@
           padding-bottom:REM(28px);
           position:relative;
           letter-spacing: REM(-1px);
-
           &:before{
             content:"";
             width:REM(66px);
@@ -378,8 +380,8 @@
           > a {
             &:after{
               width:REM(22px / 3);
-              height:REM(15px / 3);
-              margin-left:REM(8px / 3);
+              height:REM(22px / 3);
+              margin-left:REM(8.5px / 3);
               @include background-image('../images/common/tv.png')
             }
           }
@@ -388,8 +390,8 @@
           margin-left:REM(50px / 3);
           > a {
             &:after{
-              width:REM(19px / 3);
-              height:REM(19px / 3);
+              width:REM(22px / 3);
+              height:REM(22px / 3);
               margin-left:REM(9px / 3);
               @include background-image('../images/common/instagram.png')
             }
@@ -399,9 +401,9 @@
           margin-left:REM(50px / 3);
           > a {
             &:after{
-              width:REM(21px / 3);
-              height:REM(17px / 3);
-              margin-left:REM(8px / 3);
+              width:REM(22px / 3);
+              height:REM(22px / 3);
+              margin-left:REM(8.5px / 3);
               @include background-image('../images/common/blog.png')
             }
           }
@@ -453,12 +455,24 @@
         justify-content: center;
         margin-left:REM(15px);
         line-height:1;
+        padding:0;
         &.btn-right{
           margin-left:REM(5px);
         }
         .icon {
           font-size:REM(24px);
         }
+        &:active,
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:focus-within{
+          width:100%;
+          outline: none;
+          background-color: #d5d8e1;
+          cursor: pointer;
+          overflow:hidden;
+        }
       }
       .swiper-pagination {
         position:relative;
@@ -646,6 +660,14 @@
         &.swiper-slide{
           margin-right:REM(8px);
         }
+        &:last-child {
+          margin-right:0;
+        }
+      }
+      .swiper-slide.full {
+        width:100% !important;
+        height:REM(195px);
+        border-radius: REM(20px);
       }
       .btn-more{
         display: none;
@@ -662,6 +684,14 @@
           &.swiper-slide{
             margin-right:REM(13px / 3);
           }
+          &:last-child {
+            margin-right:0;
+          }
+        }
+        .swiper-slide.full {
+          width:100% !important;
+          height:REM(390px / 3);
+          border-radius: REM(45px / 3);
         }
         .btn-more {
           display: block;