작업

.gitignore

@@ -50,3 +50,6 @@ node_modules/
 
 package-lock.json
 yarn.lock
+
+.yarn
+.yarnrc.yml

dist/assets/css/style.css

@@ -331,12 +331,7 @@ html {
   letter-spacing: -0.04em;
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   overflow-x: hidden;
-  font-size: 1.6666666667vw;
-}
-@media screen and (min-width: 1921px) {
-  html {
   font-size: 20px;
-  }
 }
 @media screen and (max-width: 768px) {
   html {
@@ -543,87 +538,6 @@ html {
 #nav {
   width: 10.5625rem;
 }
-#nav .search-box {
-  width: 10.5625rem;
-  height: 8.4375rem;
-  background-color: #fff;
-  padding: 4.125rem 0.75rem 1.25rem 0.75rem;
-  border-radius: 0.9375rem;
-  position: relative;
-  box-sizing: border-box;
-}
-#nav .search-box:before {
-  content: "";
-  background-color: transparent;
-  background-image: url("../images/common/on-air.png");
-  background-repeat: no-repeat;
-  background-position-x: center;
-  background-position-y: center;
-  background-size: cover;
-  width: 8.875rem;
-  height: 2.375rem;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, 0);
-  top: 1.6875rem;
-}
-#nav .search-box .search-form {
-  width: 100%;
-  position: relative;
-  margin-top: 1.25rem;
-}
-#nav .search-box .search-form .input {
-  width: 100%;
-  height: 1.6875rem;
-  border-radius: 2.4375rem;
-  border: 0.0625rem solid #26356b;
-  padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
-  box-sizing: border-box;
-}
-#nav .search-box .search-form .search-btn {
-  width: 1rem;
-  height: 1.0625rem;
-  position: absolute;
-  right: 0.3125rem;
-  top: 50%;
-  transform: translate(0, -50%);
-  border: none;
-  background-color: #fff;
-  padding: 0;
-}
-#nav .search-box .search-form .search-btn .icon {
-  font-size: 1rem;
-  color: #26356b;
-}
-#nav .menu-list {
-  background-color: #fff;
-  border-radius: 0.9375rem;
-  width: 10.5625rem;
-  height: 9.875rem;
-  margin-top: 0.75rem;
-}
-#nav .menu-list .item .link {
-  display: block;
-  padding: 0.75rem 0;
-  font-size: 0.845rem;
-  text-align: center;
-  line-height: 1;
-}
-#nav .menu-list .item + .item {
-  border-top: 0.0625rem solid #cccccc;
-}
-#nav .menu-list .item.active {
-  background-color: #02256c;
-}
-#nav .menu-list .item.active .link {
-  color: #fff;
-}
-#nav .menu-list .item.active.first {
-  border-radius: 0.9375rem 0.9375rem 0 0;
-}
-#nav .menu-list .item.active.last {
-  border-radius: 0 0 0.9375rem 0.9375rem;
-}
 #nav .family-list {
   margin-top: 0.75rem;
   position: relative;
@@ -838,6 +752,145 @@ html {
   }
 }
 
+/**
+ * 좌측 로고&검색박스
+ */
+.search-box {
+  width: 10.5625rem;
+  height: 8.4375rem;
+  background-color: #fff;
+  padding: 4.125rem 0.75rem 1.25rem 0.75rem;
+  border-radius: 0.9375rem;
+  position: relative;
+  box-sizing: border-box;
+}
+.search-box:before {
+  content: "";
+  background-color: transparent;
+  background-image: url("../images/common/on-air.png");
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+  background-size: cover;
+  width: 8.875rem;
+  height: 2.375rem;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 1.6875rem;
+}
+.search-box .search-form {
+  width: 100%;
+  position: relative;
+  margin-top: 1.25rem;
+}
+.search-box .search-form .input {
+  width: 100%;
+  height: 1.6875rem;
+  border-radius: 2.4375rem;
+  border: 0.0625rem solid #26356b;
+  padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
+  box-sizing: border-box;
+}
+.search-box .search-form .search-btn {
+  width: 1rem;
+  height: 1.0625rem;
+  position: absolute;
+  right: 0.3125rem;
+  top: 50%;
+  transform: translate(0, -50%);
+  border: none;
+  background-color: #fff;
+  padding: 0;
+}
+.search-box .search-form .search-btn .icon {
+  font-size: 1rem;
+  color: #26356b;
+}
+
+/**
+ * 좌측 메뉴
+ */
+.menu-list {
+  border-radius: 0.9375rem;
+  width: 10.5625rem;
+  min-height: 9.875rem;
+  margin-top: 0.75rem;
+}
+.menu-list .item {
+  position: relative;
+}
+.menu-list .item .link {
+  display: block;
+  padding: 0.75rem 0;
+  font-size: 0.845rem;
+  text-align: center;
+  line-height: 1;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  background-color: #fff;
+}
+.menu-list .item:first-child .link {
+  border-radius: 0.9375rem 0.9375rem 0 0;
+}
+.menu-list .item:last-child .link {
+  border-radius: 0 0 0.9375rem 0.9375rem;
+}
+.menu-list .item + .item {
+  border-top: 0.0625rem solid #cccccc;
+}
+.menu-list .item:hover .link, .menu-list .item.active .link {
+  background-color: #02256c;
+  color: #fff;
+}
+.menu-list .item:hover .submenu {
+  display: block;
+}
+.menu-list .item .submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  z-index: 10;
+  display: none;
+}
+.menu-list .item .submenu li a {
+  display: flex;
+  border: 1px solid #cccccc;
+  width: 9.5625rem;
+  height: 2.4375rem;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  transition: background-color 0.3s ease;
+  font-weight: 500;
+  font-size: 0.84625rem;
+}
+.menu-list .item .submenu li:hover a, .menu-list .item .submenu li.active a {
+  background-color: #ccc;
+}
+.menu-list .item .submenu li:first-child a {
+  border-radius: 0.9375rem 0.9375rem 0 0;
+}
+.menu-list .item .submenu li:last-child a {
+  border-radius: 0 0 0.9375rem 0.9375rem;
+}
+
+/**
+ * 서브페이지
+ */
+.sub-main {
+  width: 100%;
+  display: flex;
+}
+.sub-main .left-nav {
+  width: 10.625rem;
+  flex-shrink: 0;
+  margin-right: 1rem;
+}
+.sub-main .page-contents {
+  flex: 1;
+  min-width: 0;
+}
+
 /***************************************************************************************
  * 유틸리티
  ****************************************************************************************/
@@ -2611,6 +2664,84 @@ html {
 /***************************************************************************************
  * 버튼
  ****************************************************************************************/
+.breadcrumb {
+  width: 100%;
+  margin: 0 0 0.3125rem 0;
+  padding: 0 0 0 11.625rem;
+}
+.breadcrumb ol {
+  list-style: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+.breadcrumb ol li a, .breadcrumb ol li span {
+  color: #252525;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
+  content: ">";
+  color: #252525;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0.1875rem;
+}
+
+.contents-box {
+  background: #fff;
+  border-radius: 0.9375rem;
+  padding: 1rem 2rem;
+  margin: 0 0 1.25rem 0;
+}
+.contents-box .contents-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-bottom: 2px solid #02256c;
+  padding: 0.625rem 0;
+}
+.contents-box .contents-header .contents-title {
+  font-size: 1.5625rem;
+  color: #02256c;
+  font-weight: 600;
+  line-height: 1em;
+}
+
+.pagination {
+  display: block;
+  width: 100%;
+}
+.pagination ol {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pagination ol li a, .pagination ol li span {
+  display: flex;
+  width: 1.75rem;
+  height: 1.75rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  color: #707070;
+  background-color: transparent;
+  transition: color 0.3s ease, background-color 0.3s ease;
+  cursor: pointer;
+}
+.pagination ol li.active a, .pagination ol li.active span, .pagination ol li:not(.disabled):not(.active):hover a, .pagination ol li:not(.disabled):not(.active):hover span {
+  background-color: #02256c;
+  color: #fff;
+}
+.pagination ol li.active a, .pagination ol li.active span {
+  cursor: default;
+}
+.pagination ol li.disabled a, .pagination ol li.disabled span {
+  opacity: 0.4;
+  cursor: default;
+}
+
 /***************************************************************************************
  * 플러그인 커스텀
  ****************************************************************************************/
@@ -3307,3 +3438,217 @@ html {
     margin: 0.7708333333rem 0 1.1875rem 0;
   }
 }
+
+.common-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.common-list .thumbnail {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+.common-list .thumbnail .thumbnail-link {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.common-list .thumbnail .thumbnail-link .thumbnail-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.common-list .item-content .item-title {
+  color: #02256c;
+  font-size: 1rem;
+  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 {
+  color: inherit;
+}
+.common-list .item-content .item-title a:hover {
+  text-decoration: underline;
+}
+.common-list .item-content .item-summary {
+  font-size: 0.875rem;
+  color: #252525;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  letter-spacing: -0.025em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0 0 0.3125rem 0;
+  font-weight: 500;
+  height: 2.56em;
+  -webkit-line-clamp: 2;
+  line-height: 1.28em;
+}
+.common-list .item-content .item-summary a {
+  color: inherit;
+}
+.common-list .item-content .item-summary a:hover {
+  text-decoration: underline;
+}
+.common-list .item-content .item-info {
+  margin: 0;
+  padding: 0;
+}
+.common-list .item-content .item-info dl {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+.common-list .item-content .item-info dl dt {
+  margin: 0 0.625rem 0 0;
+}
+.common-list .item-content .item-info dl dd {
+  font-size: 0.875rem;
+  color: #959595;
+  font-weight: 500;
+}
+.common-list.news .item {
+  display: flex;
+  padding: 1.25rem 0;
+  border-bottom: 1px solid #02256c;
+}
+.common-list.news .item .thumbnail {
+  width: 11.375rem;
+  height: 8.3125rem;
+  flex-shrink: 0;
+  margin-right: 0.8125rem;
+}
+.common-list.news .item .item-content {
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0;
+}
+.common-list.news .item .item-content .item-summary {
+  height: 5.12em;
+  -webkit-line-clamp: 4;
+  line-height: 1.28em;
+}
+.common-list.toons {
+  display: flex;
+  flex-wrap: wrap;
+}
+.common-list.toons .item {
+  width: 50%;
+  padding: 0.625rem 0.9375rem;
+}
+.common-list.toons .item .thumbnail {
+  width: 13.5rem;
+  height: 13.5rem;
+  margin: 0 auto 0.625rem;
+}
+.common-list.toons .item .item-content .item-title {
+  font-size: 1.25rem;
+}
+.common-list.shorts {
+  margin: 0 -0.25rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+.common-list.shorts .item {
+  width: 25%;
+  padding: 1.25rem 0.25rem;
+}
+.common-list.shorts .item .thumbnail {
+  width: 8.375rem;
+  height: 13.75rem;
+  margin: 0 0 0.5rem;
+}
+.common-list.shorts .item .item-content .item-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 2.56em;
+  -webkit-line-clamp: 2;
+  line-height: 1.28em;
+  white-space: normal;
+  word-break: break-all;
+}
+.common-list.clips {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: -1.25rem -0.25rem;
+  padding-bottom: 1.875rem;
+}
+.common-list.clips .item {
+  padding: 1.25rem 0.25rem;
+  width: 25%;
+  border-bottom: 1px solid #c2c2c2;
+}
+.common-list.clips .item .thumbnail {
+  width: 100%;
+  height: 5.9375rem;
+}
+.common-list.clips .item .item-title {
+  font-size: 0.8125rem;
+}
+.common-list.clips .item .item-summary {
+  font-size: 0.8125rem;
+  height: 2.56em;
+  -webkit-line-clamp: 2;
+  line-height: 1.28em;
+}
+
+.tag-container {
+  width: 100%;
+  display: flex;
+  border: 1px solid #b7b7b7;
+  padding: 0.625rem;
+  align-items: stretch;
+  margin: 0.75rem 0 1.5625rem;
+  border-radius: 0.9375rem;
+}
+.tag-container .tag-title {
+  flex-shrink: 0;
+  color: #000000;
+  margin-right: 1.5625rem;
+  display: flex;
+  align-items: center;
+  font-size: 1.450625rem;
+  padding: 0 1.25rem;
+}
+.tag-container .tag-list {
+  list-style: none;
+  padding: 0;
+  margin: -0.1875rem;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.tag-container .tag-list li {
+  padding: 0.1875rem;
+}
+.tag-container .tag-list li a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.75rem;
+  border-radius: 0.875rem;
+  background-color: #ffffff;
+  color: #464646;
+  font-size: 1.02625rem;
+  padding: 0 0.875rem;
+  box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
+}
+.tag-container .tag-list li.active a {
+  background-color: #02256c;
+  color: #fff;
+}

dist/clips.html

@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>영상갤러리 - 동영상</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="./assets/css/style.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./assets/js/common.min.js"></script>
+</head>
+<body>
+<!--S: 숨김 메뉴-->
+<ul class="sr-only sr-only-focusable">
+    <li><a href="#contents">컨텐츠 바로가기</a></li>
+    <li><a href="#nav">메뉴 바로가기</a></li>
+</ul>
+<!--E: 숨김 메뉴-->
+
+<!--S: 헤더 영역-->
+<header id="header">
+    <div class="container">
+        <div class="logo-box">
+            <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">
+                        <stop offset="0" stop-color="#bfd72f"/>
+                        <stop offset=".1" stop-color="#aed331"/>
+                        <stop offset=".29" stop-color="#84ca38"/>
+                        <stop offset=".55" stop-color="#40bc42"/>
+                        <stop offset=".74" stop-color="#0ab14b"/>
+                        <stop offset="1" stop-color="#007f49"/>
+                    </linearGradient>
+                    <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                        <stop offset="0" stop-color="#ffcb02"/>
+                        <stop offset=".09" stop-color="#fdc105"/>
+                        <stop offset=".49" stop-color="#f89a13"/>
+                        <stop offset=".8" stop-color="#f5811b"/>
+                        <stop offset="1" stop-color="#f4791f"/>
+                    </linearGradient>
+                </defs>
+                <g>
+                    <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    <g>
+                        <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                </g>
+                <g>
+                    <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                    <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <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 href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
+        </div>
+    </div>
+</header>
+<!--E: 헤더 영역-->
+
+<header class="mobile-header">
+    <button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
+    <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+    <button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
+</header>
+
+<aside id="mobile-left-menu">
+    <header class="mobile-header">
+        <span class="m-button"></span>
+        <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+        <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
+    </header>
+    <nav class="mobile-nav">
+        <ul>
+            <li>
+                <a href="" class="depth-1 active">국민연금 소식</a>
+                <ul class="sub-menu open">
+                    <li><a href="">새소식</a></li>
+                    <li><a href="">ESG</a></li>
+                    <li><a href="">이벤트</a></li>
+                    <li><a href="">대학생 홍보대사</a></li>
+                    <li><a href="">국민연금 인스타툰</a></li>
+                    <li><a href="">국민연금 수기</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 제도</a>
+                <ul class="sub-menu">
+                    <li><a href="">제도 정보</a></li>
+                    <li><a href="">NPS 팩트체크</a></li>
+                    <li><a href="">연금 개혁</a></li>
+                    <li><a href="">국민연금 용어사전</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 기금</a>
+                <ul class="sub-menu">
+                    <li><a href="">기금운용 현황</a></li>
+                    <li><a href="">기금운용 이슈</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">영상갤러리</a>
+                <ul class="sub-menu">
+                    <li><a href="">동영상</a></li>
+                    <li><a href="">Shorts</a></li>
+                </ul>
+            </li>
+        </ul>
+        <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
+    </nav>
+</aside>
+
+<script>
+    const mainMenuLinks = document.querySelectorAll('.depth-1');
+
+    mainMenuLinks.forEach(link => {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            // Close all other sub-menus
+            mainMenuLinks.forEach(otherLink => {
+                if (otherLink !== link) {
+                    const otherSubMenu = otherLink.nextElementSibling;
+                    otherSubMenu.classList.remove('open');
+                    otherLink.classList.remove('active');
+                }
+            });
+
+            // Toggle the clicked sub-menu
+            const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
+
+            if (!subMenu.classList.contains('open')) {
+                subMenu.classList.add('open');
+                this.classList.add('active');
+            } else {
+                subMenu.classList.remove('open');
+                this.classList.remove('active');
+            }
+        });
+    });
+</script>
+
+<!--S: 컨텐츠 영역-->
+<section id="contents">
+
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><span>동영상</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        <div class="search-box">
+    <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>
+    </form>
+</div>
+        <ul class="menu-list">
+    <li class="item ">
+        <a href="./news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class=""><a href="./news.html">새소식</a></li>
+            <li><a href="./news.html">ESG</a></li>
+            <li><a href="./toons.html">이벤트</a></li>
+            <li><a href="./toons.html">대학생 홍보대사</a></li>
+            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last   first active  ">
+        <a href="./clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class="active"><a href="./clips.html">동영상</a></li>
+            <li class=""><a href="./shorts.html">Shorts</a></li>
+        </ul>
+    </li>
+</ul>
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+
+            <header class="contents-header">
+                <h2 class="contents-title">동영상</h2>
+            </header>
+
+            <div class="tag-container">
+                <h4 class="tag-title">모아보기</h4>
+                <ul class="tag-list">
+                    <li class="active"><a href="">#콕콕연금뉴스</a></li>
+                    <li><a href="">#연금이랑 알아볼게</a></li>
+                    <li><a href="">#캠페인 영상</a></li>
+                    <li><a href="">#광고</a></li>
+                    <li><a href="">#연금연금</a></li>
+                    <li><a href="">#연금연금</a></li>
+                    <li><a href="">#연금연금</a></li>
+                </ul>
+            </div>
+
+            <ul class="common-list clips">
+
+                <li class="item">
+
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/clips-01.png" alt="">
+                        </a>
+                    </figure>
+
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">[콕콕 연금뉴스]</a>
+                        </h4>
+                        <p class="item-summary">
+                            <a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
+                        </p>
+                    </div>
+
+                </li>
+
+            </ul>
+
+        </div>
+
+        <nav class="pagination">
+    <ol>
+        <li class="prev disabled">
+            <span>&lt;&lt;</span>
+        </li>
+        <li class="active">
+            <span>1</span>
+        </li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li><a href="">5</a></li>
+        <li><a href="">6</a></li>
+        <li><a href="">7</a></li>
+        <li><a href="">8</a></li>
+        <li><a href="">9</a></li>
+        <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;&gt;</a>
+        </li>
+
+    </ol>
+</nav>
+
+    </main>
+</div>
+
+</section>
+<!--E: 컨텐츠 영역-->
+
+<!--S: 푸터 영역-->
+<footer id="footer">
+    <div class="logo-box">
+        <svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
+            <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">
+                    <stop offset="0" stop-color="#bfd72f"/>
+                    <stop offset=".1" stop-color="#aed331"/>
+                    <stop offset=".29" stop-color="#84ca38"/>
+                    <stop offset=".55" stop-color="#40bc42"/>
+                    <stop offset=".74" stop-color="#0ab14b"/>
+                    <stop offset="1" stop-color="#007f49"/>
+                </linearGradient>
+                <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                    <stop offset="0" stop-color="#ffcb02"/>
+                    <stop offset=".09" stop-color="#fdc105"/>
+                    <stop offset=".49" stop-color="#f89a13"/>
+                    <stop offset=".8" stop-color="#f5811b"/>
+                    <stop offset="1" stop-color="#f4791f"/>
+                </linearGradient>
+            </defs>
+            <g>
+                <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                <g>
+                    <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+            </g>
+            <g>
+                <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <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>
+    </div>
+    <div class="footer-info">
+        <dl>
+            <dt>우편번호</dt>
+            <dd>54870</dd>
+        </dl>
+        <dl>
+            <dt class="sr-only">주소</dt>
+            <dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
+        </dl>
+        <dl>
+            <dt>고객센터</dt>
+            <dd>1355(유료)</dd>
+        </dl>
+    </div>
+    <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
+</footer>
+<!--E: 푸터 영역-->
+
+</body>
+</html>

dist/index.html

@@ -178,13 +178,32 @@
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
     </form>
-                </div>
+</div>
                 <ul class="menu-list">
-                    <li class="item first active"><a href="#" class="link">국민연금 소식</a></li>
-                    <li class="item"><a href="#" class="link">국민연금 제도</a></li>
-                    <li class="item"><a href="#" class="link">국민연금 기금</a></li>
-                    <li class="item last"><a href="#" class="link">영상갤러리</a></li>
+    <li class="item ">
+        <a href="./news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class=""><a href="./news.html">새소식</a></li>
+            <li><a href="./news.html">ESG</a></li>
+            <li><a href="./toons.html">이벤트</a></li>
+            <li><a href="./toons.html">대학생 홍보대사</a></li>
+            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last  ">
+        <a href="./clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class=""><a href="./clips.html">동영상</a></li>
+            <li class=""><a href="./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>

dist/news.html

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>국민염금 소식 - 새 소식</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="./assets/css/style.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./assets/js/common.min.js"></script>
+</head>
+<body>
+<!--S: 숨김 메뉴-->
+<ul class="sr-only sr-only-focusable">
+    <li><a href="#contents">컨텐츠 바로가기</a></li>
+    <li><a href="#nav">메뉴 바로가기</a></li>
+</ul>
+<!--E: 숨김 메뉴-->
+
+<!--S: 헤더 영역-->
+<header id="header">
+    <div class="container">
+        <div class="logo-box">
+            <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">
+                        <stop offset="0" stop-color="#bfd72f"/>
+                        <stop offset=".1" stop-color="#aed331"/>
+                        <stop offset=".29" stop-color="#84ca38"/>
+                        <stop offset=".55" stop-color="#40bc42"/>
+                        <stop offset=".74" stop-color="#0ab14b"/>
+                        <stop offset="1" stop-color="#007f49"/>
+                    </linearGradient>
+                    <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                        <stop offset="0" stop-color="#ffcb02"/>
+                        <stop offset=".09" stop-color="#fdc105"/>
+                        <stop offset=".49" stop-color="#f89a13"/>
+                        <stop offset=".8" stop-color="#f5811b"/>
+                        <stop offset="1" stop-color="#f4791f"/>
+                    </linearGradient>
+                </defs>
+                <g>
+                    <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    <g>
+                        <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                </g>
+                <g>
+                    <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                    <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <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 href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
+        </div>
+    </div>
+</header>
+<!--E: 헤더 영역-->
+
+<header class="mobile-header">
+    <button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
+    <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+    <button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
+</header>
+
+<aside id="mobile-left-menu">
+    <header class="mobile-header">
+        <span class="m-button"></span>
+        <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+        <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
+    </header>
+    <nav class="mobile-nav">
+        <ul>
+            <li>
+                <a href="" class="depth-1 active">국민연금 소식</a>
+                <ul class="sub-menu open">
+                    <li><a href="">새소식</a></li>
+                    <li><a href="">ESG</a></li>
+                    <li><a href="">이벤트</a></li>
+                    <li><a href="">대학생 홍보대사</a></li>
+                    <li><a href="">국민연금 인스타툰</a></li>
+                    <li><a href="">국민연금 수기</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 제도</a>
+                <ul class="sub-menu">
+                    <li><a href="">제도 정보</a></li>
+                    <li><a href="">NPS 팩트체크</a></li>
+                    <li><a href="">연금 개혁</a></li>
+                    <li><a href="">국민연금 용어사전</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 기금</a>
+                <ul class="sub-menu">
+                    <li><a href="">기금운용 현황</a></li>
+                    <li><a href="">기금운용 이슈</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">영상갤러리</a>
+                <ul class="sub-menu">
+                    <li><a href="">동영상</a></li>
+                    <li><a href="">Shorts</a></li>
+                </ul>
+            </li>
+        </ul>
+        <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
+    </nav>
+</aside>
+
+<script>
+    const mainMenuLinks = document.querySelectorAll('.depth-1');
+
+    mainMenuLinks.forEach(link => {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            // Close all other sub-menus
+            mainMenuLinks.forEach(otherLink => {
+                if (otherLink !== link) {
+                    const otherSubMenu = otherLink.nextElementSibling;
+                    otherSubMenu.classList.remove('open');
+                    otherLink.classList.remove('active');
+                }
+            });
+
+            // Toggle the clicked sub-menu
+            const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
+
+            if (!subMenu.classList.contains('open')) {
+                subMenu.classList.add('open');
+                this.classList.add('active');
+            } else {
+                subMenu.classList.remove('open');
+                this.classList.remove('active');
+            }
+        });
+    });
+</script>
+
+<!--S: 컨텐츠 영역-->
+<section id="contents">
+
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><span>새 소식</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        <div class="search-box">
+    <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>
+    </form>
+</div>
+        <ul class="menu-list">
+    <li class="item  first active  ">
+        <a href="./news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class="active"><a href="./news.html">새소식</a></li>
+            <li><a href="./news.html">ESG</a></li>
+            <li><a href="./toons.html">이벤트</a></li>
+            <li><a href="./toons.html">대학생 홍보대사</a></li>
+            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last  ">
+        <a href="./clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class=""><a href="./clips.html">동영상</a></li>
+            <li class=""><a href="./shorts.html">Shorts</a></li>
+        </ul>
+    </li>
+</ul>
+    </aside>
+
+    <main class="page-contents">
+        <div class="contents-box">
+
+            <header class="contents-header">
+                <h2 class="contents-title">새소식</h2>
+            </header>
+
+            <ul class="common-list news">
+
+                <li class="item">
+
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/news-01.png" alt="">
+                        </a>
+                    </figure>
+
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
+                        </h4>
+                        <p class="item-summary">
+                            (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
+                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.07.01</dd>
+                            </dl>
+                        </div>
+                    </div>
+
+                </li>
+
+
+
+            </ul>
+        </div>
+
+        <nav class="pagination">
+    <ol>
+        <li class="prev disabled">
+            <span>&lt;&lt;</span>
+        </li>
+        <li class="active">
+            <span>1</span>
+        </li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li><a href="">5</a></li>
+        <li><a href="">6</a></li>
+        <li><a href="">7</a></li>
+        <li><a href="">8</a></li>
+        <li><a href="">9</a></li>
+        <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;&gt;</a>
+        </li>
+
+    </ol>
+</nav>
+    </main>
+</div>
+
+</section>
+<!--E: 컨텐츠 영역-->
+
+<!--S: 푸터 영역-->
+<footer id="footer">
+    <div class="logo-box">
+        <svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
+            <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">
+                    <stop offset="0" stop-color="#bfd72f"/>
+                    <stop offset=".1" stop-color="#aed331"/>
+                    <stop offset=".29" stop-color="#84ca38"/>
+                    <stop offset=".55" stop-color="#40bc42"/>
+                    <stop offset=".74" stop-color="#0ab14b"/>
+                    <stop offset="1" stop-color="#007f49"/>
+                </linearGradient>
+                <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                    <stop offset="0" stop-color="#ffcb02"/>
+                    <stop offset=".09" stop-color="#fdc105"/>
+                    <stop offset=".49" stop-color="#f89a13"/>
+                    <stop offset=".8" stop-color="#f5811b"/>
+                    <stop offset="1" stop-color="#f4791f"/>
+                </linearGradient>
+            </defs>
+            <g>
+                <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                <g>
+                    <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+            </g>
+            <g>
+                <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <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>
+    </div>
+    <div class="footer-info">
+        <dl>
+            <dt>우편번호</dt>
+            <dd>54870</dd>
+        </dl>
+        <dl>
+            <dt class="sr-only">주소</dt>
+            <dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
+        </dl>
+        <dl>
+            <dt>고객센터</dt>
+            <dd>1355(유료)</dd>
+        </dl>
+    </div>
+    <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
+</footer>
+<!--E: 푸터 영역-->
+
+</body>
+</html>

dist/shorts.html

@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>영상갤러리 - Shorts</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="./assets/css/style.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./assets/js/common.min.js"></script>
+</head>
+<body>
+<!--S: 숨김 메뉴-->
+<ul class="sr-only sr-only-focusable">
+    <li><a href="#contents">컨텐츠 바로가기</a></li>
+    <li><a href="#nav">메뉴 바로가기</a></li>
+</ul>
+<!--E: 숨김 메뉴-->
+
+<!--S: 헤더 영역-->
+<header id="header">
+    <div class="container">
+        <div class="logo-box">
+            <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">
+                        <stop offset="0" stop-color="#bfd72f"/>
+                        <stop offset=".1" stop-color="#aed331"/>
+                        <stop offset=".29" stop-color="#84ca38"/>
+                        <stop offset=".55" stop-color="#40bc42"/>
+                        <stop offset=".74" stop-color="#0ab14b"/>
+                        <stop offset="1" stop-color="#007f49"/>
+                    </linearGradient>
+                    <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                        <stop offset="0" stop-color="#ffcb02"/>
+                        <stop offset=".09" stop-color="#fdc105"/>
+                        <stop offset=".49" stop-color="#f89a13"/>
+                        <stop offset=".8" stop-color="#f5811b"/>
+                        <stop offset="1" stop-color="#f4791f"/>
+                    </linearGradient>
+                </defs>
+                <g>
+                    <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    <g>
+                        <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                </g>
+                <g>
+                    <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                    <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <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 href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
+        </div>
+    </div>
+</header>
+<!--E: 헤더 영역-->
+
+<header class="mobile-header">
+    <button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
+    <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+    <button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
+</header>
+
+<aside id="mobile-left-menu">
+    <header class="mobile-header">
+        <span class="m-button"></span>
+        <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+        <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
+    </header>
+    <nav class="mobile-nav">
+        <ul>
+            <li>
+                <a href="" class="depth-1 active">국민연금 소식</a>
+                <ul class="sub-menu open">
+                    <li><a href="">새소식</a></li>
+                    <li><a href="">ESG</a></li>
+                    <li><a href="">이벤트</a></li>
+                    <li><a href="">대학생 홍보대사</a></li>
+                    <li><a href="">국민연금 인스타툰</a></li>
+                    <li><a href="">국민연금 수기</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 제도</a>
+                <ul class="sub-menu">
+                    <li><a href="">제도 정보</a></li>
+                    <li><a href="">NPS 팩트체크</a></li>
+                    <li><a href="">연금 개혁</a></li>
+                    <li><a href="">국민연금 용어사전</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 기금</a>
+                <ul class="sub-menu">
+                    <li><a href="">기금운용 현황</a></li>
+                    <li><a href="">기금운용 이슈</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">영상갤러리</a>
+                <ul class="sub-menu">
+                    <li><a href="">동영상</a></li>
+                    <li><a href="">Shorts</a></li>
+                </ul>
+            </li>
+        </ul>
+        <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
+    </nav>
+</aside>
+
+<script>
+    const mainMenuLinks = document.querySelectorAll('.depth-1');
+
+    mainMenuLinks.forEach(link => {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            // Close all other sub-menus
+            mainMenuLinks.forEach(otherLink => {
+                if (otherLink !== link) {
+                    const otherSubMenu = otherLink.nextElementSibling;
+                    otherSubMenu.classList.remove('open');
+                    otherLink.classList.remove('active');
+                }
+            });
+
+            // Toggle the clicked sub-menu
+            const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
+
+            if (!subMenu.classList.contains('open')) {
+                subMenu.classList.add('open');
+                this.classList.add('active');
+            } else {
+                subMenu.classList.remove('open');
+                this.classList.remove('active');
+            }
+        });
+    });
+</script>
+
+<!--S: 컨텐츠 영역-->
+<section id="contents">
+
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><span>Shorts</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        <div class="search-box">
+    <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>
+    </form>
+</div>
+        <ul class="menu-list">
+    <li class="item ">
+        <a href="./news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class=""><a href="./news.html">새소식</a></li>
+            <li><a href="./news.html">ESG</a></li>
+            <li><a href="./toons.html">이벤트</a></li>
+            <li><a href="./toons.html">대학생 홍보대사</a></li>
+            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last   first active  ">
+        <a href="./clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class=""><a href="./clips.html">동영상</a></li>
+            <li class="active"><a href="./shorts.html">Shorts</a></li>
+        </ul>
+    </li>
+</ul>
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+            <header class="contents-header">
+                <h2 class="contents-title">Shorts</h2>
+            </header>
+
+            <ul class="common-list shorts">
+
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/shorts-01.png" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
+                        </h4>
+                    </div>
+                </li>
+
+
+            </ul>
+        </div>
+
+        <nav class="pagination">
+    <ol>
+        <li class="prev disabled">
+            <span>&lt;&lt;</span>
+        </li>
+        <li class="active">
+            <span>1</span>
+        </li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li><a href="">5</a></li>
+        <li><a href="">6</a></li>
+        <li><a href="">7</a></li>
+        <li><a href="">8</a></li>
+        <li><a href="">9</a></li>
+        <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;&gt;</a>
+        </li>
+
+    </ol>
+</nav>
+
+    </main>
+</div>
+
+</section>
+<!--E: 컨텐츠 영역-->
+
+<!--S: 푸터 영역-->
+<footer id="footer">
+    <div class="logo-box">
+        <svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
+            <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">
+                    <stop offset="0" stop-color="#bfd72f"/>
+                    <stop offset=".1" stop-color="#aed331"/>
+                    <stop offset=".29" stop-color="#84ca38"/>
+                    <stop offset=".55" stop-color="#40bc42"/>
+                    <stop offset=".74" stop-color="#0ab14b"/>
+                    <stop offset="1" stop-color="#007f49"/>
+                </linearGradient>
+                <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                    <stop offset="0" stop-color="#ffcb02"/>
+                    <stop offset=".09" stop-color="#fdc105"/>
+                    <stop offset=".49" stop-color="#f89a13"/>
+                    <stop offset=".8" stop-color="#f5811b"/>
+                    <stop offset="1" stop-color="#f4791f"/>
+                </linearGradient>
+            </defs>
+            <g>
+                <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                <g>
+                    <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+            </g>
+            <g>
+                <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <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>
+    </div>
+    <div class="footer-info">
+        <dl>
+            <dt>우편번호</dt>
+            <dd>54870</dd>
+        </dl>
+        <dl>
+            <dt class="sr-only">주소</dt>
+            <dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
+        </dl>
+        <dl>
+            <dt>고객센터</dt>
+            <dd>1355(유료)</dd>
+        </dl>
+    </div>
+    <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
+</footer>
+<!--E: 푸터 영역-->
+
+</body>
+</html>

dist/toons.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>국민염금 소식 - 국민연금 인스타 툰</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="./assets/css/style.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./assets/js/common.min.js"></script>
+</head>
+<body>
+<!--S: 숨김 메뉴-->
+<ul class="sr-only sr-only-focusable">
+    <li><a href="#contents">컨텐츠 바로가기</a></li>
+    <li><a href="#nav">메뉴 바로가기</a></li>
+</ul>
+<!--E: 숨김 메뉴-->
+
+<!--S: 헤더 영역-->
+<header id="header">
+    <div class="container">
+        <div class="logo-box">
+            <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">
+                        <stop offset="0" stop-color="#bfd72f"/>
+                        <stop offset=".1" stop-color="#aed331"/>
+                        <stop offset=".29" stop-color="#84ca38"/>
+                        <stop offset=".55" stop-color="#40bc42"/>
+                        <stop offset=".74" stop-color="#0ab14b"/>
+                        <stop offset="1" stop-color="#007f49"/>
+                    </linearGradient>
+                    <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                        <stop offset="0" stop-color="#ffcb02"/>
+                        <stop offset=".09" stop-color="#fdc105"/>
+                        <stop offset=".49" stop-color="#f89a13"/>
+                        <stop offset=".8" stop-color="#f5811b"/>
+                        <stop offset="1" stop-color="#f4791f"/>
+                    </linearGradient>
+                </defs>
+                <g>
+                    <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    <g>
+                        <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                    <g>
+                        <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
+                        <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
+                    </g>
+                </g>
+                <g>
+                    <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                    <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                    <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 href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
+        </div>
+    </div>
+</header>
+<!--E: 헤더 영역-->
+
+<header class="mobile-header">
+    <button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
+    <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+    <button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
+</header>
+
+<aside id="mobile-left-menu">
+    <header class="mobile-header">
+        <span class="m-button"></span>
+        <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+        <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
+    </header>
+    <nav class="mobile-nav">
+        <ul>
+            <li>
+                <a href="" class="depth-1 active">국민연금 소식</a>
+                <ul class="sub-menu open">
+                    <li><a href="">새소식</a></li>
+                    <li><a href="">ESG</a></li>
+                    <li><a href="">이벤트</a></li>
+                    <li><a href="">대학생 홍보대사</a></li>
+                    <li><a href="">국민연금 인스타툰</a></li>
+                    <li><a href="">국민연금 수기</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 제도</a>
+                <ul class="sub-menu">
+                    <li><a href="">제도 정보</a></li>
+                    <li><a href="">NPS 팩트체크</a></li>
+                    <li><a href="">연금 개혁</a></li>
+                    <li><a href="">국민연금 용어사전</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 기금</a>
+                <ul class="sub-menu">
+                    <li><a href="">기금운용 현황</a></li>
+                    <li><a href="">기금운용 이슈</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">영상갤러리</a>
+                <ul class="sub-menu">
+                    <li><a href="">동영상</a></li>
+                    <li><a href="">Shorts</a></li>
+                </ul>
+            </li>
+        </ul>
+        <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
+    </nav>
+</aside>
+
+<script>
+    const mainMenuLinks = document.querySelectorAll('.depth-1');
+
+    mainMenuLinks.forEach(link => {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            // Close all other sub-menus
+            mainMenuLinks.forEach(otherLink => {
+                if (otherLink !== link) {
+                    const otherSubMenu = otherLink.nextElementSibling;
+                    otherSubMenu.classList.remove('open');
+                    otherLink.classList.remove('active');
+                }
+            });
+
+            // Toggle the clicked sub-menu
+            const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
+
+            if (!subMenu.classList.contains('open')) {
+                subMenu.classList.add('open');
+                this.classList.add('active');
+            } else {
+                subMenu.classList.remove('open');
+                this.classList.remove('active');
+            }
+        });
+    });
+</script>
+
+<!--S: 컨텐츠 영역-->
+<section id="contents">
+
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><span>국민연금 인스타 툰</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        <div class="search-box">
+    <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>
+    </form>
+</div>
+        <ul class="menu-list">
+    <li class="item  first active  ">
+        <a href="./news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class=""><a href="./news.html">새소식</a></li>
+            <li><a href="./news.html">ESG</a></li>
+            <li><a href="./toons.html">이벤트</a></li>
+            <li><a href="./toons.html">대학생 홍보대사</a></li>
+            <li class="active"><a href="./toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last  ">
+        <a href="./clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class=""><a href="./clips.html">동영상</a></li>
+            <li class=""><a href="./shorts.html">Shorts</a></li>
+        </ul>
+    </li>
+</ul>
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+            <header class="contents-header">
+                <h2 class="contents-title">국민연금 인스타 툰</h2>
+            </header>
+
+            <ul class="common-list toons">
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/toon-01.png" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.07.01</dd>
+                            </dl>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+
+        <nav class="pagination">
+    <ol>
+        <li class="prev disabled">
+            <span>&lt;&lt;</span>
+        </li>
+        <li class="active">
+            <span>1</span>
+        </li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li><a href="">5</a></li>
+        <li><a href="">6</a></li>
+        <li><a href="">7</a></li>
+        <li><a href="">8</a></li>
+        <li><a href="">9</a></li>
+        <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;&gt;</a>
+        </li>
+
+    </ol>
+</nav>
+
+    </main>
+</div>
+
+</section>
+<!--E: 컨텐츠 영역-->
+
+<!--S: 푸터 영역-->
+<footer id="footer">
+    <div class="logo-box">
+        <svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
+            <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">
+                    <stop offset="0" stop-color="#bfd72f"/>
+                    <stop offset=".1" stop-color="#aed331"/>
+                    <stop offset=".29" stop-color="#84ca38"/>
+                    <stop offset=".55" stop-color="#40bc42"/>
+                    <stop offset=".74" stop-color="#0ab14b"/>
+                    <stop offset="1" stop-color="#007f49"/>
+                </linearGradient>
+                <linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
+                    <stop offset="0" stop-color="#ffcb02"/>
+                    <stop offset=".09" stop-color="#fdc105"/>
+                    <stop offset=".49" stop-color="#f89a13"/>
+                    <stop offset=".8" stop-color="#f5811b"/>
+                    <stop offset="1" stop-color="#f4791f"/>
+                </linearGradient>
+            </defs>
+            <g>
+                <path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                <g>
+                    <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+                <g>
+                    <path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
+                    <path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
+                </g>
+            </g>
+            <g>
+                <path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
+                <path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
+                <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>
+    </div>
+    <div class="footer-info">
+        <dl>
+            <dt>우편번호</dt>
+            <dd>54870</dd>
+        </dl>
+        <dl>
+            <dt class="sr-only">주소</dt>
+            <dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
+        </dl>
+        <dl>
+            <dt>고객센터</dt>
+            <dd>1355(유료)</dd>
+        </dl>
+    </div>
+    <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
+</footer>
+<!--E: 푸터 영역-->
+
+</body>
+</html>

package.json

@@ -25,11 +25,10 @@
     "gulp-plumber": "^1.2.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
-    "node-sass": "^7.0.1",
-    "sass": "^1.32.7",
     "gulp-size": "^3.0.0",
     "gulp-sourcemaps": "^2.6.5",
-    "gulp.spritesmith": "^6.11.0"
-  },
-  "dependencies": {}
+    "gulp.spritesmith": "^6.11.0",
+    "node-sass": "^7.0.1",
+    "sass": "^1.32.7"
+  }
 }

src/html/clips.html

@@ -0,0 +1,73 @@
+@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - 동영상"})
+@@include("./include/header.html")
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><span>동영상</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        @@include("./include/search_box.html")
+        @@include("./include/left_menu.html", {"active": "clips", "subActive": "clips"})
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+
+            <header class="contents-header">
+                <h2 class="contents-title">동영상</h2>
+            </header>
+
+            <div class="tag-container">
+                <h4 class="tag-title">모아보기</h4>
+                <ul class="tag-list">
+                    <li class="active"><a href="">#콕콕연금뉴스</a></li>
+                    <li><a href="">#연금이랑 알아볼게</a></li>
+                    <li><a href="">#캠페인 영상</a></li>
+                    <li><a href="">#광고</a></li>
+                    <li><a href="">#연금연금</a></li>
+                    <li><a href="">#연금연금</a></li>
+                    <li><a href="">#연금연금</a></li>
+                </ul>
+            </div>
+
+            <ul class="common-list clips">
+
+                <li class="item">
+
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/clips-01.png" alt="">
+                        </a>
+                    </figure>
+
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">[콕콕 연금뉴스]</a>
+                        </h4>
+                        <p class="item-summary">
+                            <a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
+                        </p>
+                    </div>
+
+                </li>
+
+            </ul>
+
+        </div>
+
+        @@include("./include/pagination.html")
+
+    </main>
+</div>
+
+@@include("./include/footer.html")
+@@include("./include/tail.html")

src/html/include/left_menu.html

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

src/html/include/pagination.html

@@ -0,0 +1,23 @@
+<nav class="pagination">
+    <ol>
+        <li class="prev disabled">
+            <span>&lt;&lt;</span>
+        </li>
+        <li class="active">
+            <span>1</span>
+        </li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li><a href="">5</a></li>
+        <li><a href="">6</a></li>
+        <li><a href="">7</a></li>
+        <li><a href="">8</a></li>
+        <li><a href="">9</a></li>
+        <li><a href="">10</a></li>
+        <li class="next">
+            <a href="">&gt;&gt;</a>
+        </li>
+
+    </ol>
+</nav>

src/html/include/search_box.html

@@ -0,0 +1,6 @@
+<div class="search-box">
+    <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>
+    </form>
+</div>

src/html/index.html

@@ -7,18 +7,8 @@
     <div class="main-top">
         <div class="line-01">
             <nav id="nav">
-                <div class="search-box">
-                    <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>
-                    </form>
-                </div>
-                <ul class="menu-list">
-                    <li class="item first active"><a href="#" class="link">국민연금 소식</a></li>
-                    <li class="item"><a href="#" class="link">국민연금 제도</a></li>
-                    <li class="item"><a href="#" class="link">국민연금 기금</a></li>
-                    <li class="item last"><a href="#" class="link">영상갤러리</a></li>
-                </ul>
+                @@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>

src/html/news.html

@@ -0,0 +1,65 @@
+@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식"})
+@@include("./include/header.html")
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><span>새 소식</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        @@include("./include/search_box.html")
+        @@include("./include/left_menu.html", {"active": "news", "subActive": "news"})
+    </aside>
+
+    <main class="page-contents">
+        <div class="contents-box">
+
+            <header class="contents-header">
+                <h2 class="contents-title">새소식</h2>
+            </header>
+
+            <ul class="common-list news">
+
+                <li class="item">
+
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/news-01.png" alt="">
+                        </a>
+                    </figure>
+
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
+                        </h4>
+                        <p class="item-summary">
+                            (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
+                        </p>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.07.01</dd>
+                            </dl>
+                        </div>
+                    </div>
+
+                </li>
+
+
+
+            </ul>
+        </div>
+
+        @@include("./include/pagination.html")
+    </main>
+</div>
+
+@@include("./include/footer.html")
+@@include("./include/tail.html")

src/html/shorts.html

@@ -0,0 +1,53 @@
+@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - Shorts"})
+@@include("./include/header.html")
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><span>Shorts</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        @@include("./include/search_box.html")
+        @@include("./include/left_menu.html", {"active": "clips", "subActive": "shorts"})
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+            <header class="contents-header">
+                <h2 class="contents-title">Shorts</h2>
+            </header>
+
+            <ul class="common-list shorts">
+
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/shorts-01.png" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
+                        </h4>
+                    </div>
+                </li>
+
+
+            </ul>
+        </div>
+
+        @@include("./include/pagination.html")
+
+    </main>
+</div>
+
+@@include("./include/footer.html")
+@@include("./include/tail.html")

src/html/toons.html

@@ -0,0 +1,57 @@
+@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰"})
+@@include("./include/header.html")
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="./">홈</a></li>
+            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><span>국민연금 인스타 툰</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="main">
+
+    <aside class="left-nav">
+        @@include("./include/search_box.html")
+        @@include("./include/left_menu.html", {"active": "news", "subActive": "toons"})
+    </aside>
+
+    <main class="page-contents">
+
+        <div class="contents-box">
+            <header class="contents-header">
+                <h2 class="contents-title">국민연금 인스타 툰</h2>
+            </header>
+
+            <ul class="common-list toons">
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="./assets/images/ex/toon-01.png" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                        <div class="item-info">
+                            <dl>
+                                <dt class="sr-only">등록일</dt>
+                                <dd>2024.07.01</dd>
+                            </dl>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+
+        @@include("./include/pagination.html")
+
+    </main>
+</div>
+
+@@include("./include/footer.html")
+@@include("./include/tail.html")

src/scss/common/_layout.scss

@@ -5,10 +5,8 @@ html {
   letter-spacing: -0.04em;
   font-family: $font-family-base;
   overflow-x: hidden;
-  font-size: calc((16vw / 960) * 100);
-  @media screen and (min-width:1921px) {
-    font-size: 20px;
-  }
+  //font-size: calc((16vw / 960) * 100);
+  font-size:20px;
 
   @include display-xs(){
     font-size: calc((48vw / 720) * 100);
@@ -220,87 +218,7 @@ body:has(#mobile-left-menu.opened) {
 
 #nav {
   width: REM(169px);
-  .search-box {
-    width: REM(169px);
-    height:REM(135px);
-    background-color:#fff;
-    padding:REM(66px) REM(12px) REM(20px) REM(12px);
-    border-radius: REM(15px);
-    position:relative;
-    box-sizing: border-box;
-    &:before{
-      content:"";
-      @include background-image('../images/common/on-air.png');
-      background-size: cover;
-      width:REM(142px);
-      height:REM(38px);
-      position:absolute;
-      left:50%;
-      transform: translate(-50%, 0);
-      top:REM(27px);
-    }
-    .search-form {
-      width:100%;
-      position:relative;
-      margin-top:REM(20px);
-      .input {
-        width:100%;
-        height:REM(27px);
-        border-radius: REM(13px * 3);
-        border:REM(1px) solid #26356BFF;
-        padding:REM(5px) REM(18px) REM(5px) REM(12px) ;
-        box-sizing: border-box;
-      }
-      .search-btn {
-        width:REM(16px);
-        height:REM(17px);
-        position:absolute;
-        right:REM(5px);
-        top:50%;
-        transform:translate(0, -50%);
-        border:none;
-        background-color:#fff;
-        padding:0;
-       .icon {
-         font-size:REM(16px);
-         color:#26356BFF;
-       }
-      }
-    }
-  }
-  .menu-list {
-    background-color:#fff;
-    border-radius: REM(15px);
-    width: REM(169px);
-    height: REM(158px);
-    margin-top: REM(12px);
-
-    .item {
-      .link {
-        display: block;
-        padding:REM(12px) 0;
-        font-size:REM(13.52px);
-        text-align: center;
-        line-height:1;
-      }
-      & + .item{
-        border-top:REM(1px) solid #CCCCCCFF;
-      }
-      &.active{
-        background-color:#02256c;
-        .link {
-          color:#fff;
-        }
-        &.first {
-          border-radius: REM(15px) REM(15px) 0 0;
-        }
-        &.last {
-          border-radius: 0 0 REM(15px) REM(15px);
-        }
-      }
-    }
 
-  }
   .family-list {
     margin-top: REM(12px);
     position:relative;
@@ -503,3 +421,171 @@ body:has(#mobile-left-menu.opened) {
     }
   }
 }
+
+/**
+ * 좌측 로고&검색박스
+ */
+.search-box {
+  width: REM(169px);
+  height:REM(135px);
+  background-color:#fff;
+  padding:REM(66px) REM(12px) REM(20px) REM(12px);
+  border-radius: REM(15px);
+  position:relative;
+  box-sizing: border-box;
+  &:before{
+    content:"";
+    @include background-image('../images/common/on-air.png');
+    background-size: cover;
+    width:REM(142px);
+    height:REM(38px);
+    position:absolute;
+    left:50%;
+    transform: translate(-50%, 0);
+    top:REM(27px);
+  }
+  .search-form {
+    width:100%;
+    position:relative;
+    margin-top:REM(20px);
+    .input {
+      width:100%;
+      height:REM(27px);
+      border-radius: REM(13px * 3);
+      border:REM(1px) solid #26356BFF;
+      padding:REM(5px) REM(18px) REM(5px) REM(12px) ;
+      box-sizing: border-box;
+    }
+    .search-btn {
+      width:REM(16px);
+      height:REM(17px);
+      position:absolute;
+      right:REM(5px);
+      top:50%;
+      transform:translate(0, -50%);
+      border:none;
+      background-color:#fff;
+      padding:0;
+      .icon {
+        font-size:REM(16px);
+        color:#26356BFF;
+      }
+    }
+  }
+}
+
+
+/**
+ * 좌측 메뉴
+ */
+.menu-list {
+  border-radius: REM(15px);
+  width: REM(169px);
+  min-height: REM(158px);
+  margin-top: REM(12px);
+
+  .item {
+    position:relative;
+
+    .link {
+      display: block;
+      padding:REM(12px) 0;
+      font-size:REM(13.52px);
+      text-align: center;
+      line-height:1;
+      transition: background-color .3s ease, color .3s ease;
+      background-color:#fff;
+    }
+
+    &:first-child {
+      .link {
+        border-radius: REM(15px) REM(15px) 0 0;
+      }
+    }
+
+    &:last-child {
+      .link {
+        border-radius: 0 0 REM(15px) REM(15px);
+      }
+    }
+
+    & + .item{
+      border-top:REM(1px) solid #CCCCCCFF;
+    }
+
+    &:hover,
+    &.active{
+      .link {
+        background-color:#02256c;
+        color:#fff;
+      }
+    }
+
+    &:hover {
+      .submenu {
+        display:block;
+      }
+    }
+
+    .submenu {
+      position:absolute;
+      left:100%;
+      top:0;
+      z-index:10;
+      display:none;
+
+      li {
+        a {
+          display:flex;
+          border: 1px solid #cccccc;
+          width:REM(153px);
+          height:REM(39px);
+          justify-content: center;
+          align-items: center;
+          background-color:#fff;
+          transition: background-color .3s ease;
+          font-weight:500;
+          font-size:REM(13.54px);
+        }
+
+        &:hover,
+        &.active {
+          a {
+            background-color: #ccc;
+          }
+        }
+        &:first-child {
+          a {
+            border-radius: REM(15px) REM(15px) 0 0;
+          }
+        }
+        &:last-child {
+          a {
+            border-radius: 0 0 REM(15px) REM(15px);
+          }
+        }
+
+      }
+    }
+  }
+
+}
+
+/**
+ * 서브페이지
+ */
+.sub-main {
+  width:100%;
+  display:flex;
+
+  .left-nav {
+    width:REM(170px);
+    flex-shrink: 0;
+    margin-right:REM(16px);
+  }
+
+  .page-contents {
+    flex:1;
+    min-width:0;
+  }
+}

src/scss/components/_breadcrumbs.scss

@@ -0,0 +1,32 @@
+.breadcrumb {
+  width:100%;
+  margin:0 0 REM(5px) 0;
+  padding:0 0 0 REM(186px); // 좌측 메뉴 만큼 띄워주기
+
+  ol {
+    list-style:none;
+    display:flex;
+    padding:0;
+    margin:0;
+
+    li {
+      a,span {
+        color:#252525;
+        font-size:REM(14px);
+        font-weight:600;
+      }
+
+      & + li {
+        a, span {
+          &:before {
+            content: '>';
+            color:#252525;
+            font-size:REM(14px);
+            font-weight:600;
+            margin:0 REM(3px);
+          }
+        }
+      }
+    }
+  }
+}

src/scss/components/_contents_box.scss

@@ -0,0 +1,21 @@
+.contents-box {
+  background:#fff;
+  border-radius:REM(15px);
+  padding:REM(16px) REM(32px);
+  margin:0 0 REM(20px) 0;
+
+  .contents-header {
+    display:flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-bottom:2px solid #02256c;
+    padding:REM(10px) 0;
+
+    .contents-title {
+      font-size:REM(25px);
+      color:#02256c;
+      font-weight:600;
+      line-height:1em;
+    }
+  }
+}

src/scss/components/_pagination.scss

@@ -0,0 +1,47 @@
+.pagination {
+  display:block;
+  width:100%;
+
+  ol {
+    width:100%;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    li {
+      a, span {
+        display:flex;
+        width:REM(28px);
+        height:REM(28px);
+        justify-content: center;
+        align-items: center;
+        border-radius:100%;
+        color:#707070;
+        background-color:transparent;
+        transition: color .3s ease, background-color .3s ease;
+        cursor:pointer;
+      }
+
+      &.active,
+      &:not(.disabled):not(.active):hover {
+        a, span {
+          background-color:#02256c;
+          color:#fff;
+        }
+      }
+
+      &.active {
+        a, span {
+          cursor:default;
+        }
+      }
+
+      &.disabled {
+        a, span {
+          opacity:.4;
+          cursor:default;
+        }
+      }
+    }
+  }
+}

src/scss/pages/_lists.scss

@@ -0,0 +1,259 @@
+.common-list {
+  list-style:none;
+  padding:0;
+  margin:0;
+
+  .thumbnail {
+    position:relative;
+    padding:0;
+    margin:0;
+    overflow: hidden;
+
+    .thumbnail-link {
+      display:flex;
+      width:100%;
+      height:100%;
+
+      .thumbnail-img {
+        width:100%;
+        height:100%;
+        display:block;
+        object-fit: cover;
+      }
+    }
+  }
+
+  .item-content {
+    .item-title {
+      color:#02256c;
+      font-size:REM(16px);
+      display:block;
+      width:100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      letter-spacing: -0.025em;
+      font-weight:700;
+
+      a {
+        color:inherit;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .item-summary {
+      font-size:REM(14px);
+      color:#252525;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      word-wrap:break-word;
+      letter-spacing: -0.025em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0 0 REM(5px) 0;
+      font-weight:500;
+      height: 1.28em * 2;
+      -webkit-line-clamp: 2;
+      line-height:1.28em;
+
+      a {
+        color:inherit;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .item-info {
+      margin:0;
+      padding:0;
+
+      dl {
+        margin:0;
+        display:flex;
+        align-items: center;
+
+        dt {
+          margin:0 REM(10px) 0 0;
+        }
+
+        dd {
+          font-size:REM(14px);
+          color:#959595;
+          font-weight:500;
+        }
+      }
+    }
+  }
+
+  &.news {
+    .item {
+      display:flex;
+      padding:REM(20px) 0;
+      border-bottom:1px solid #02256c;
+
+      .thumbnail {
+        width:REM(182px);
+        height:REM(133px);
+
+        flex-shrink: 0;
+        margin-right:REM(13px);
+      }
+
+      .item-content {
+
+        flex:1;
+        min-width:0;
+        padding:REM(8px) 0;
+
+        .item-summary {
+          height: 1.28em * 4;
+          -webkit-line-clamp: 4;
+          line-height:1.28em;
+        }
+      }
+    }
+  }
+
+  &.toons {
+    display:flex;
+    flex-wrap:wrap;
+
+    .item {
+      width:50%;
+      padding:REM(10px) REM(15px);
+
+      .thumbnail {
+        width:REM(216px);
+        height:REM(216px);
+        margin:0 auto REM(10px)
+      }
+
+      .item-content {
+        .item-title {
+          font-size:REM(20px);
+        }
+      }
+    }
+  }
+
+  &.shorts {
+    margin:0 REM(-4px);
+    display:flex;
+    flex-wrap:wrap;
+
+    .item {
+      width:25%;
+      padding:REM(20px) REM(4px);
+
+      .thumbnail {
+        width:REM(134px);
+        height:REM(220px);
+        margin:0 0 REM(8px);
+      }
+
+      .item-content {
+        .item-title {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          word-wrap:break-word;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          height: 1.28em * 2;
+          -webkit-line-clamp: 2;
+          line-height:1.28em;
+          white-space: normal;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
+  &.clips {
+    display:flex;
+    flex-wrap: wrap;
+    width:100%;
+    margin: REM(-20px) REM(-4px);
+    padding-bottom:REM(30px);
+
+    .item {
+      padding:REM(20px) REM(4px);
+      width:25%;
+      border-bottom:1px solid #c2c2c2;
+
+      .thumbnail {
+        width:100%;
+        height:REM(95px);
+      }
+
+      .item-title {
+        font-size:REM(13px);
+      }
+
+      .item-summary {
+        font-size:REM(13px);
+        height: 1.28em * 2;
+        -webkit-line-clamp: 2;
+        line-height:1.28em;
+      }
+    }
+  }
+}
+
+.tag-container {
+  width:100%;
+  display:flex;
+  border:1px solid #b7b7b7;
+  padding: REM(10px);
+  align-items: stretch;
+  margin:REM(12px) 0 REM(25px);
+  border-radius:REM(15px);
+
+  .tag-title {
+    flex-shrink: 0;
+    color:#000000;
+    margin-right:REM(25px);
+    display:flex;
+    align-items: center;
+    font-size:REM(23.21px);
+    padding:0 REM(20px);
+  }
+
+  .tag-list {
+    list-style:none;
+    padding:0;
+    margin:REM(-3px);
+    flex:1;
+    min-width:0;
+    display:flex;
+    flex-wrap:wrap;
+
+    li {
+      padding:REM(3px);
+
+      a {
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        height:REM(28px);
+        border-radius:REM(14px);
+        background-color:#ffffff;
+        color:#464646;
+        font-size:REM(16.42px);
+        padding:0 REM(14px);
+        box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
+      }
+
+      &.active {
+        a {
+          background-color:#02256c;
+          color:#fff;
+        }
+      }
+    }
+  }
+}

src/scss/style.scss

@@ -13,9 +13,13 @@
 // 각종 컴포넌트
 @import "components/icons";
 @import "components/button";
+@import "components/breadcrumbs";
+@import "components/contents_box";
+@import "components/pagination";
 
 // 각종 플러그인 SCSS 및 플러그인 커스텀
 @import "plugins/custom";
 
 // 레이아웃 및 각 페이지 SCSS 파일
 @import 'pages/main';
+@import "pages/lists";