You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

611 lines
30 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  6. <title>영상갤러리 - 동영상</title>
  7. <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" />
  8. <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  10. <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
  11. <script src="..//assets/js/common.min.js"></script>
  12. </head>
  13. <body>
  14. <!--S: 숨김 메뉴-->
  15. <ul class="sr-only sr-only-focusable">
  16. <li><a href="#contents">컨텐츠 바로가기</a></li>
  17. <li><a href="#nav">메뉴 바로가기</a></li>
  18. </ul>
  19. <!--E: 숨김 메뉴-->
  20. <!--S: 헤더 영역-->
  21. <header id="header">
  22. <div class="container">
  23. <div class="logo-box">
  24. <svg id="logo" viewBox="0 0 309.14 49.01">
  25. <defs>
  26. <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">
  27. <stop offset="0" stop-color="#bfd72f"/>
  28. <stop offset=".1" stop-color="#aed331"/>
  29. <stop offset=".29" stop-color="#84ca38"/>
  30. <stop offset=".55" stop-color="#40bc42"/>
  31. <stop offset=".74" stop-color="#0ab14b"/>
  32. <stop offset="1" stop-color="#007f49"/>
  33. </linearGradient>
  34. <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">
  35. <stop offset="0" stop-color="#ffcb02"/>
  36. <stop offset=".09" stop-color="#fdc105"/>
  37. <stop offset=".49" stop-color="#f89a13"/>
  38. <stop offset=".8" stop-color="#f5811b"/>
  39. <stop offset="1" stop-color="#f4791f"/>
  40. </linearGradient>
  41. </defs>
  42. <g>
  43. <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;"/>
  44. <g>
  45. <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
  46. <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;"/>
  47. <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;"/>
  48. </g>
  49. <g>
  50. <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;"/>
  51. <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;"/>
  52. </g>
  53. <g>
  54. <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;"/>
  55. <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;"/>
  56. </g>
  57. <g>
  58. <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;"/>
  59. <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;"/>
  60. </g>
  61. <g>
  62. <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;"/>
  63. <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;"/>
  64. </g>
  65. </g>
  66. <g>
  67. <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;"/>
  68. <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;"/>
  69. <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;"/>
  70. <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;"/>
  71. <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;"/>
  72. </g>
  73. </svg>
  74. <a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
  75. </div>
  76. </div>
  77. </header>
  78. <!--E: 헤더 영역-->
  79. <header class="mobile-header">
  80. <button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
  81. <a href="/" class="mobile-logo">국민연금 ON AIR</a>
  82. <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
  83. </header>
  84. <aside id="mobile-left-menu">
  85. <header class="mobile-header">
  86. <span class="m-button"></span>
  87. <a href="/" class="mobile-logo">국민연금 ON AIR</a>
  88. <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
  89. </header>
  90. <nav class="mobile-nav">
  91. <ul>
  92. <li>
  93. <a href="" class="depth-1 active">국민연금 소식</a>
  94. <ul class="sub-menu open">
  95. <li><a href="../news/news.html">새소식</a></li>
  96. <li><a href="">ESG</a></li>
  97. <li><a href="">이벤트</a></li>
  98. <li><a href="">대학생 홍보대사</a></li>
  99. <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
  100. <li><a href="">국민연금 수기</a></li>
  101. </ul>
  102. </li>
  103. <li>
  104. <a href="" class="depth-1">국민연금 제도</a>
  105. <ul class="sub-menu">
  106. <li><a href="">제도 정보</a></li>
  107. <li><a href="">NPS 팩트체크</a></li>
  108. <li><a href="">연금 개혁</a></li>
  109. <li><a href="">국민연금 용어사전</a></li>
  110. <li><a href="">전문가 시선</a></li>
  111. </ul>
  112. </li>
  113. <li>
  114. <a href="" class="depth-1">국민연금 기금</a>
  115. <ul class="sub-menu">
  116. <li><a href="">기금운용 현황</a></li>
  117. <li><a href="">기금운용 이슈</a></li>
  118. <li><a href="">전문가 시선</a></li>
  119. </ul>
  120. </li>
  121. <li>
  122. <a href="" class="depth-1">영상갤러리</a>
  123. <ul class="sub-menu">
  124. <li><a href="../clips/clips.html">동영상</a></li>
  125. <li><a href="../shorts/shorts.html">Shorts</a></li>
  126. </ul>
  127. </li>
  128. </ul>
  129. <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
  130. </nav>
  131. </aside>
  132. <script>
  133. const mainMenuLinks = document.querySelectorAll('.depth-1');
  134. mainMenuLinks.forEach(link => {
  135. link.addEventListener('click', function(event) {
  136. event.preventDefault(); // Prevent the default link behavior
  137. // Close all other sub-menus
  138. mainMenuLinks.forEach(otherLink => {
  139. if (otherLink !== link) {
  140. const otherSubMenu = otherLink.nextElementSibling;
  141. otherSubMenu.classList.remove('open');
  142. otherLink.classList.remove('active');
  143. }
  144. });
  145. // Toggle the clicked sub-menu
  146. const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
  147. if (!subMenu.classList.contains('open')) {
  148. subMenu.classList.add('open');
  149. this.classList.add('active');
  150. } else {
  151. subMenu.classList.remove('open');
  152. this.classList.remove('active');
  153. }
  154. });
  155. });
  156. document.addEventListener('DOMContentLoaded', function() {
  157. const toggleButton = document.getElementById('toggle-search');
  158. const form = document.querySelector('.search-box');
  159. toggleButton.addEventListener('click', function() {
  160. form.classList.toggle('open');
  161. });
  162. });
  163. </script>
  164. <!--S: 컨텐츠 영역-->
  165. <section id="contents">
  166. <div class="container">
  167. <nav class="breadcrumb">
  168. <ol>
  169. <li><a href="../index.html"></a></li>
  170. <li><a href="../clips/clips.html">영상갤러리</a></li>
  171. <li><span>동영상</span></li>
  172. </ol>
  173. </nav>
  174. </div>
  175. <div class="sub-main container" id="main">
  176. <aside class="left-nav">
  177. <div class="search-box">
  178. <a href="#" class="link">국민연금 ON AIR</a>
  179. <form class="search-form">
  180. <input type="text" class="input"/>
  181. <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
  182. </form>
  183. </div>
  184. <ul class="menu-list">
  185. <li class="item ">
  186. <a href="../news/news.html" class="link">국민연금 소식</a>
  187. <ul class="submenu">
  188. <li class=""><a href="../news/news.html">새소식</a></li>
  189. <li><a href="#">ESG</a></li>
  190. <li><a href="#">이벤트</a></li>
  191. <li><a href="#">대학생 홍보대사</a></li>
  192. <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
  193. </ul>
  194. </li>
  195. <li class="item">
  196. <a href="#" class="link">국민연금 제도</a>
  197. </li>
  198. <li class="item">
  199. <a href="#" class="link">국민연금 기금</a>
  200. </li>
  201. <li class="item last first active ">
  202. <a href="../clips/clips.html" class="link">영상갤러리</a>
  203. <ul class="submenu">
  204. <li class="active"><a href="../clips/clips.html">동영상</a></li>
  205. <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
  206. </ul>
  207. </li>
  208. </ul>
  209. </aside>
  210. <main class="page-contents">
  211. <div class="contents-box">
  212. <header class="contents-header">
  213. <h2 class="contents-title">동영상</h2>
  214. </header>
  215. <div class="tag-container">
  216. <h4 class="tag-title">모아보기</h4>
  217. <ul class="tag-list">
  218. <li class="active"><a href="detail.html">#콕콕연금뉴스</a></li>
  219. <li><a href="detail.html">#연금이랑 알아볼게</a></li>
  220. <li><a href="detail.html">#캠페인 영상</a></li>
  221. <li><a href="detail.html">#광고</a></li>
  222. <li><a href="detail.html">#연금연금</a></li>
  223. <li><a href="detail.html">#연금연금</a></li>
  224. <li><a href="detail.html">#연금연금</a></li>
  225. </ul>
  226. </div>
  227. <ul class="common-list clips">
  228. <li class="item">
  229. <figure class="thumbnail">
  230. <a class="thumbnail-link" href="detail.html">
  231. <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
  232. </a>
  233. </figure>
  234. <div class="item-content">
  235. <h4 class="item-title">
  236. <a href="detail.html">[콕콕 연금뉴스]</a>
  237. </h4>
  238. <p class="item-summary">
  239. <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
  240. </p>
  241. </div>
  242. </li>
  243. <li class="item">
  244. <figure class="thumbnail">
  245. <a class="thumbnail-link" href="detail.html">
  246. <img class="thumbnail-img" src="../assets/images/ex/clips-02.jpg" alt="">
  247. </a>
  248. </figure>
  249. <div class="item-content">
  250. <h4 class="item-title">
  251. <a href="detail.html">[콕콕 연금뉴스]</a>
  252. </h4>
  253. <p class="item-summary">
  254. <a href="detail.html">국민연금, 2024년 1분기 말<br>
  255. 기준 5.82%의 운용수익률..</a>
  256. </p>
  257. </div>
  258. </li>
  259. <li class="item">
  260. <figure class="thumbnail">
  261. <a class="thumbnail-link" href="detail.html">
  262. <img class="thumbnail-img" src="../assets/images/ex/clips-03.jpg" alt="">
  263. </a>
  264. </figure>
  265. <div class="item-content">
  266. <h4 class="item-title">
  267. <a href="detail.html">[콕콕 연금뉴스]</a>
  268. </h4>
  269. <p class="item-summary">
  270. <a href="detail.html">
  271. 국민연금 기준소득월액 <br>
  272. 변경!
  273. </a>
  274. </p>
  275. </div>
  276. </li>
  277. <li class="item">
  278. <figure class="thumbnail">
  279. <a class="thumbnail-link" href="detail.html">
  280. <img class="thumbnail-img" src="../assets/images/ex/clips-04.jpg" alt="">
  281. </a>
  282. </figure>
  283. <div class="item-content">
  284. <h4 class="item-title">
  285. <a href="detail.html">[콕콕 연금뉴스]</a>
  286. </h4>
  287. <p class="item-summary">
  288. <a href="detail.html">
  289. 실업크레딧을 통한 <br>가입기간 확대 지원
  290. </a>
  291. </p>
  292. </div>
  293. </li>
  294. <li class="item">
  295. <figure class="thumbnail">
  296. <a class="thumbnail-link" href="detail.html">
  297. <img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
  298. </a>
  299. </figure>
  300. <div class="item-content">
  301. <h4 class="item-title">
  302. <a href="detail.html">스톱모션으로 알아보는 <br>
  303. 국민연금 '크레딧 제도'</a>
  304. </h4>
  305. </div>
  306. </li>
  307. <li class="item">
  308. <figure class="thumbnail">
  309. <a class="thumbnail-link" href="detail.html">
  310. <img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
  311. </a>
  312. </figure>
  313. <div class="item-content">
  314. <h4 class="item-title">
  315. <a href="detail.html">
  316. ⭐미션! 2023 국민연금<br>
  317. 레벨업⭐
  318. </a>
  319. </h4>
  320. </div>
  321. </li>
  322. <li class="item">
  323. <figure class="thumbnail">
  324. <a class="thumbnail-link" href="detail.html">
  325. <img class="thumbnail-img" src="../assets/images/ex/clips-07.jpg" alt="">
  326. </a>
  327. </figure>
  328. <div class="item-content">
  329. <h4 class="item-title">
  330. <a href="detail.html">
  331. 국민연금에 대한 진실<br>
  332. 파헤치기!
  333. </a>
  334. </h4>
  335. </div>
  336. </li>
  337. <li class="item">
  338. <figure class="thumbnail">
  339. <a class="thumbnail-link" href="detail.html">
  340. <img class="thumbnail-img" src="../assets/images/ex/clips-08.jpg" alt="">
  341. </a>
  342. </figure>
  343. <div class="item-content">
  344. <h4 class="item-title">
  345. <a href="detail.html">
  346. [국민연금공단X큰별쌤..]
  347. </a>
  348. </h4>
  349. <p class="item-summary">
  350. <a href="detail.html">
  351. 조선시대에도 연금이 <br>
  352. 있었다?!
  353. </a>
  354. </p>
  355. </div>
  356. </li>
  357. <li class="item">
  358. <figure class="thumbnail">
  359. <a class="thumbnail-link" href="detail.html">
  360. <img class="thumbnail-img" src="../assets/images/ex/clips-09.jpg" alt="">
  361. </a>
  362. </figure>
  363. <div class="item-content">
  364. <h4 class="item-title">
  365. <a href="detail.html">
  366. [NPS 릴레이 브이로그(vlog)]
  367. </a>
  368. </h4>
  369. <p class="item-summary">
  370. <a href="detail.html">
  371. 인천국제공항에도 <br>
  372. 국민연금공단이!?
  373. </a>
  374. </p>
  375. </div>
  376. </li>
  377. <li class="item">
  378. <figure class="thumbnail">
  379. <a class="thumbnail-link" href="detail.html">
  380. <img class="thumbnail-img" src="../assets/images/ex/clips-10.jpg" alt="">
  381. </a>
  382. </figure>
  383. <div class="item-content">
  384. <h4 class="item-title">
  385. <a href="detail.html">
  386. 국민연금 직장인 브이로그.
  387. </a>
  388. </h4>
  389. <a href="detail.html" class="item-summary">
  390. 오늘도 뽀주임은 열일 중 <br>
  391. 다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
  392. </a>
  393. </div>
  394. </li>
  395. <li class="item">
  396. <figure class="thumbnail">
  397. <a class="thumbnail-link" href="detail.html">
  398. <img class="thumbnail-img" src="../assets/images/ex/clips-11.jpg" alt="">
  399. </a>
  400. </figure>
  401. <div class="item-content">
  402. <h4 class="item-title">
  403. <a href="detail.html">
  404. [NPS 릴레이 브이로그(Vlog)]
  405. </a>
  406. </h4>
  407. <a class="item-summary" href="detail.html">
  408. 국민연금공단
  409. 장애인지원센터는 무슨 일이?
  410. </a>
  411. </div>
  412. </li>
  413. <li class="item">
  414. <figure class="thumbnail">
  415. <a class="thumbnail-link" href="detail.html">
  416. <img class="thumbnail-img" src="../assets/images/ex/clips-12.jpg" alt="">
  417. </a>
  418. </figure>
  419. <div class="item-content">
  420. <h4 class="item-title">
  421. <a href="detail.html">
  422. [NPS 릴레이 브이로그(Vlog)]
  423. </a>
  424. </h4>
  425. <a class="item-summary" href="detail.html">
  426. 국민연금공단
  427. 장애인지원센터는 무슨 일
  428. </a>
  429. </div>
  430. </li>
  431. </ul>
  432. </div>
  433. <nav class="pagination">
  434. <ol>
  435. <li class="prev disabled">
  436. <span>&lt;&lt;</span>
  437. </li>
  438. <li class="active">
  439. <span>1</span>
  440. </li>
  441. <li><a href="">2</a></li>
  442. <li><a href="">3</a></li>
  443. <li><a href="">4</a></li>
  444. <li><a href="">5</a></li>
  445. <li><a href="">6</a></li>
  446. <li><a href="">7</a></li>
  447. <li><a href="">8</a></li>
  448. <li><a href="">9</a></li>
  449. <li><a href="">10</a></li>
  450. <li class="next">
  451. <a href="">&gt;&gt;</a>
  452. </li>
  453. </ol>
  454. </nav>
  455. </main>
  456. </div>
  457. </section>
  458. <!--E: 컨텐츠 영역-->
  459. <!--S: 푸터 영역-->
  460. <footer id="footer">
  461. <div class="logo-box">
  462. <svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
  463. <defs>
  464. <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">
  465. <stop offset="0" stop-color="#bfd72f"/>
  466. <stop offset=".1" stop-color="#aed331"/>
  467. <stop offset=".29" stop-color="#84ca38"/>
  468. <stop offset=".55" stop-color="#40bc42"/>
  469. <stop offset=".74" stop-color="#0ab14b"/>
  470. <stop offset="1" stop-color="#007f49"/>
  471. </linearGradient>
  472. <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">
  473. <stop offset="0" stop-color="#ffcb02"/>
  474. <stop offset=".09" stop-color="#fdc105"/>
  475. <stop offset=".49" stop-color="#f89a13"/>
  476. <stop offset=".8" stop-color="#f5811b"/>
  477. <stop offset="1" stop-color="#f4791f"/>
  478. </linearGradient>
  479. </defs>
  480. <g>
  481. <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;"/>
  482. <g>
  483. <rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
  484. <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;"/>
  485. <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;"/>
  486. </g>
  487. <g>
  488. <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;"/>
  489. <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;"/>
  490. </g>
  491. <g>
  492. <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;"/>
  493. <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;"/>
  494. </g>
  495. <g>
  496. <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;"/>
  497. <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;"/>
  498. </g>
  499. <g>
  500. <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;"/>
  501. <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;"/>
  502. </g>
  503. </g>
  504. <g>
  505. <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;"/>
  506. <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;"/>
  507. <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;"/>
  508. <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;"/>
  509. <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;"/>
  510. </g>
  511. </svg>
  512. </div>
  513. <div class="footer-info">
  514. <dl>
  515. <dt>우편번호</dt>
  516. <dd>54870</dd>
  517. </dl>
  518. <dl>
  519. <dt class="sr-only">주소</dt>
  520. <dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
  521. </dl>
  522. <dl>
  523. <dt>고객센터</dt>
  524. <dd>1355(유료)</dd>
  525. </dl>
  526. </div>
  527. <p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
  528. </footer>
  529. <!--E: 푸터 영역-->
  530. </body>
  531. </html>