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.
677 lines
38 KiB
677 lines
38 KiB
<!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?v=240805">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.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">
|
|
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
|
|
<svg id="logo" viewBox="0 0 309.14 49.01">
|
|
<defs>
|
|
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
|
|
<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>
|
|
<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" id="toggle-search">검색 메뉴 토글</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="./news/news.html">새소식</a></li>
|
|
<li><a href="">ESG</a></li>
|
|
<li><a href="">이벤트</a></li>
|
|
<li><a href="">대학생 홍보대사</a></li>
|
|
<li><a href="./toons/toons.html">국민연금 인스타툰</a></li>
|
|
<li><a href="">국민연금 수기</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="./clips/clips.html">동영상</a></li>
|
|
<li><a href="./shorts/shorts.html">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');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toggleButton = document.getElementById('toggle-search');
|
|
const form = document.querySelector('.search-box');
|
|
|
|
toggleButton.addEventListener('click', function() {
|
|
form.classList.toggle('open');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!--S: 컨텐츠 영역-->
|
|
<section id="contents">
|
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<div class="container" id="main">
|
|
<h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
|
|
<div class="main-top">
|
|
<div class="line-01">
|
|
<nav id="nav">
|
|
<div class="search-box">
|
|
<a href="./index.html" class="link">국민연금 ON AIR</a>
|
|
<form class="search-form">
|
|
<input type="text" class="input"/>
|
|
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
|
|
</form>
|
|
</div>
|
|
<ul class="menu-list">
|
|
<li class="item ">
|
|
<a href="./news/news.html" class="link">국민연금 소식</a>
|
|
<ul class="submenu">
|
|
<li class=""><a href="./news/news.html">새소식</a></li>
|
|
<li><a href="#">ESG</a></li>
|
|
<li><a href="#">이벤트</a></li>
|
|
<li><a href="#">대학생 홍보대사</a></li>
|
|
<li class=""><a href="./toons/toons.html">국민연금 인스타툰</a></li>
|
|
</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/clips.html" class="link">영상갤러리</a>
|
|
<ul class="submenu">
|
|
<li class=""><a href="./clips/clips.html">동영상</a></li>
|
|
<li class=""><a href="./shorts/shorts.html">Shorts</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ul class="family-list">
|
|
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
|
|
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
|
|
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="line-02">
|
|
<div class="box top" style="background-image:url('assets/images/ex/ex1.png')">
|
|
<a href="#" class="box-link">
|
|
<h2 class="sr-only">국민연금공단 채용 A to Z (feat.대학생 홍보대사팀)</h2>
|
|
</a>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="left">
|
|
<a href="#" class="link">
|
|
<h2 class="title">연금기금 <br>운용현황</h2>
|
|
<dl class="date">
|
|
<dt class="sr-only">기준일</dt>
|
|
<dd>2024.06 기준</dd>
|
|
</dl>
|
|
<ul class="info">
|
|
<li>국민연금기금 1,103.5조원</li>
|
|
<li>누적 운용수익금 639.7조원</li>
|
|
<li>누적수익률 5.92%</li>
|
|
</ul>
|
|
</a>
|
|
</div>
|
|
<div class="right">
|
|
<div class="box top" style="background-image:url('assets/images/ex/ex2.png')">
|
|
<a href="#" class="box-link">
|
|
<h2 class="sr-only">노후긴급자금 대부(실버론)을 이용해보세요!</h2>
|
|
</a>
|
|
</div>
|
|
<div class="box bottom" style="background-image:url('assets/images/ex/ex3.png')">
|
|
<a href="#" class="box-link">
|
|
<h2 class="sr-only">바이바이 플라스틱</h2>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="line-03">
|
|
<div class="box top" style="background-image:url('assets/images/ex/ex4.png')">
|
|
<a href="#" class="box-link">
|
|
<h2 class="sr-only">바이바이 플라스틱</h2>
|
|
</a>
|
|
</div>
|
|
<div class="bottom">
|
|
<a href="#" class="link">
|
|
<h2 class="title">숫자로 보는 국민연금</h2>
|
|
<p class="sub-text">
|
|
7월 11일 세계 인구의 날을 맞이하여 알아보는 숫자로 보는 국민연금 날을 맞이하여 알아보는 숫자로 보는 국민연금
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-center">
|
|
<div class="box line-banner" style="background-image:url('assets/images/ex/ex5.png')">
|
|
<a href="#" class="box-link">
|
|
<p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<ul class="family-list mobile">
|
|
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
|
|
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
|
|
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
|
|
</ul>
|
|
<div class="main-bottom">
|
|
<div class="left-slide">
|
|
<div class="swiper-container">
|
|
<div class="title-box">
|
|
<h2 class="slide-title">최신 글 모아보기</h2>
|
|
<div class="control-box">
|
|
<div class="swiper-pagination"></div>
|
|
|
|
<button type="button" title="이전" class="btn btn-left">
|
|
<span class="material-symbols-outlined icon">chevron_left</span>
|
|
</button>
|
|
<button type="button" title="다음" class="btn btn-right">
|
|
<span class="material-symbols-outlined icon">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="swiper-wrapper recent-list">
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">01</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">28</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">20</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">16</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">01</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">28</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">20</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">16</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다! 국민연금공단이 함께 합니다!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">01</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">28</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">20</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">16</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">01</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">28</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">20</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<div class="link">
|
|
<dl>
|
|
<dt class="sr-only">등록일</dt>
|
|
<dd class="date">2024.07 <span class="big">16</span></dd>
|
|
</dl>
|
|
<div class="notice-text">
|
|
<h5 class="label"><a href="#">공지사항</a></h5>
|
|
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="right-slide">
|
|
<div class="swiper-container">
|
|
<div class="title-box">
|
|
<h2 class="slide-title">
|
|
<span class="title title-1">영상갤러리</span>
|
|
<span class="title title-2" style="display: none;">국민연금 Shorts</span>
|
|
</h2>
|
|
<div class="control-box">
|
|
<div class="swiper-pagination"></div>
|
|
|
|
<button type="button" title="이전" class="btn btn-left">
|
|
<span class="material-symbols-outlined icon">chevron_left</span>
|
|
</button>
|
|
<button type="button" title="다음" class="btn btn-right">
|
|
<span class="material-symbols-outlined icon">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ul class="swiper-wrapper short-list">
|
|
<li class="swiper-slide box full" style="background-image:url('assets/images/ex/ex8.png')">
|
|
<a href="#" class="box-link">
|
|
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
|
|
</a>
|
|
</li>
|
|
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')">
|
|
<a href="#" class="box-link">
|
|
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
|
|
</a>
|
|
</li>
|
|
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')">
|
|
<a href="#" class="box-link">
|
|
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<button type="button" class="btn-more">+ 쇼츠 더보기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var recentNotice = new Swiper ('.left-slide .swiper-container', {
|
|
slidesPerView: 1,
|
|
loop: true,
|
|
loopFillGroupWithBlank: true,
|
|
initial:0,
|
|
grid: {
|
|
rows: 4
|
|
},
|
|
pagination: {
|
|
el: ".left-slide .swiper-pagination",
|
|
renderBullet: function (index, className) {
|
|
return '<span class="' + className + '">' + (index + 1) + "</span>";
|
|
},
|
|
},
|
|
autoplay: {
|
|
delay: 3000,
|
|
reverseDirection: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl:".left-slide .btn-right",
|
|
prevEl: ".left-slide .btn-left",
|
|
}
|
|
})
|
|
|
|
var shortList = new Swiper ('.right-slide .swiper-container', {
|
|
slidesPerView: "auto",
|
|
slidesPerGroupSkip: 1,
|
|
initial:0,
|
|
rewind: true,
|
|
pagination: {
|
|
el: ".right-slide .swiper-pagination",
|
|
},
|
|
autoplay: {
|
|
delay: 3000,
|
|
reverseDirection: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl:".right-slide .btn-right",
|
|
prevEl: ".right-slide .btn-left",
|
|
},
|
|
on: {
|
|
init : function (){
|
|
$('.right-slide .slide-title .title-1').show();
|
|
},
|
|
slideChange: function () {
|
|
console.log(this.realIndex);
|
|
var current = this.realIndex;
|
|
$('.right-slide .slide-title .title').hide(); // 모든 타이틀을 숨김
|
|
$('.right-slide .slide-title .title-' + (current + 1)).show(); // 현재 인덱스에 해당하는 타이틀을 표시
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
</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>
|