@@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
@@include("./include/header.html")
<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">
                @@include("./include/search_box.html")
                @@include("./include/left_menu.html", {"active": "main", "subActive": ""})
                <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>
@@include("./include/footer.html")
@@include("./include/tail.html")