@@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
@@include("./include/header.html")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container" id="main">
<h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
<div class="main-top">
<div class="line-01">
<nav id="nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "main", "subActive": ""})
<ul class="family-list">
<li class="item tv"><a href="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</a></li>
</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="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</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>
</ul>
</div>
</div>
<div class="right-slide">
<div class="swiper-container">
<div class="title-box">
<h2 class="slide-title">국민연금 Shorts</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" 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>
<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,
grid: {
rows: 4,
},
pagination: {
el: ".left-slide .swiper-pagination",
},
autoplay: {
delay: 2000,
reverseDirection: true,
disableOnInteraction: false,
},
navigation: {
nextEl:".left-slide .btn-right",
prevEl: ".left-slide .btn-left",
}
})
var shortList = new Swiper ('.right-slide .swiper-container', {
slidesPerView: 2,
grid: {
rows: 1,
},
pagination: {
el: ".right-slide .swiper-pagination",
},
autoplay: {
delay: 2000,
reverseDirection: true,
disableOnInteraction: false,
},
navigation: {
nextEl:".right-slide .btn-right",
prevEl: ".right-slide .btn-left",
}
})
</script>
@@include("./include/footer.html")
@@include("./include/tail.html")