메인 완료

dist/index.html

@@ -4,7 +4,7 @@
     <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/earlyaccess/notosanskr.css">
+    <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>
@@ -18,17 +18,490 @@
 <!--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">
 
+
+<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">
+                <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>
+                <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">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">01</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">28</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                해변에서 휴양을 즐기는 국민연금공단
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">20</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">16</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">01</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">28</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                해변에서 휴양을 즐기는 국민연금공단
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">20</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">16</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!
+                            </p>
+                        </a>
+                    </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>
 </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>

src/html/include/footer.html

@@ -2,5 +2,73 @@
 <!--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: 푸터 영역-->

src/html/include/header.html

@@ -6,8 +6,150 @@
 <!--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">
+

src/html/include/meta.html

@@ -4,7 +4,7 @@
     <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>@@pageTitle</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
+    <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="@@ROOT/assets/css/style.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="@@ROOT/assets/js/common.min.js"></script>

src/html/include/tail.html

@@ -1,2 +1,3 @@
+
 </body>
 </html>

src/html/index.html

@@ -1,5 +1,266 @@
 @@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">
+                <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>
+                <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">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">01</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">28</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                해변에서 휴양을 즐기는 국민연금공단
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">20</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">16</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">01</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 기금운용본부 자산운용전문가 모집!
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">28</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                해변에서 휴양을 즐기는 국민연금공단
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">20</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트
+                            </p>
+                        </a>
+                    </li>
+                    <li class="swiper-slide">
+                        <a href="#">
+                            <span class="date">2024.07 <span class="big">16</span></span>
+                            <p class="notice-text">
+                                <span class="label">공지사항</span>
+                                바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!
+                            </p>
+                        </a>
+                    </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")

src/js/common.js

@@ -0,0 +1,7 @@
+$(function() {
+    $('[data-button="toggle-menu"]').click(function(e) {
+        e.preventDefault();
+
+        $('#mobile-left-menu').toggleClass('opened');
+    })
+})

src/scss/_variables.scss

@@ -9,19 +9,24 @@ $link-color : $body-color;          // 링크 텍스트 색상
 $link-hover-color : $color-primary; // 링크 오버시 텍스트 색상
 
 // 폰트 관련
-$font-family-base : 'Noto Sans KR',sans-serif;     // 기본글자에 사용 되는 폰트
+$font-family-base :"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;
 $font-family-heading : $font-family-base;          // 헤딩태그에 사용 되는 폰트
 $font-size-base   : 16px;
-$font-weight-base : 400;
+$font-weight-base : 500;
+$font-weight-semi-bold: 600;
 $font-weight-bold : 700;
+$font-weight-extra-bold : 800;
+$font-weight-black : 900;
+
 $line-height-base : 1.5em;
 
+
 // 애니메이션
 $default-animation : ease;
 
 // 반응형 포인트
-$break-lg : 1200px;
-$break-md : 992px;
+$break-lg : 1920px;
+$break-md : 1600px;
 $break-sm : 768px;
 
 // 테이블 관련

src/scss/boot/_function.scss

@@ -12,8 +12,8 @@
   @return $number;
 }
 
-@function VW($pxSize:16px) {
-  $vwSize: strip-unit($pxSize) / 1080 * 100;
+@function VW($pxSize, $baseContainerWidth: 800px) {
+  $vwSize: (strip-unit($pxSize) / strip-unit($baseContainerWidth)) * 100;
   @return #{$vwSize}vw;
 }
 

src/scss/boot/_reset.scss

@@ -8,7 +8,7 @@
 }
 
 html {
-  font-family: sans-serif; // 2
+  font-family: $font-family-base; // 2
   line-height: 1.15; // 3
   -webkit-text-size-adjust: 100%; // 4
   -ms-text-size-adjust: 100%; // 4

src/scss/common/_layout.scss

@@ -1,3 +1,505 @@
 /***************************************************************************************
  * 레이아웃
  ****************************************************************************************/
+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: 16px;
+  }
+
+  @include display-xs(){
+    font-size: calc((48vw / 720) * 100);
+    body {
+      background-color:#f1f1f1;
+    }
+  }
+}
+
+#header {
+  width:100%;
+  background-color:#fff;
+  .logo-box {
+    width:100%;
+    height:REM(30px);
+    @include display-flex();
+    justify-content: space-between;
+    align-items: center;
+    #logo {
+      width:REM(115px);
+      height:REM(18px);
+    }
+    .link {
+      width:REM(61px);
+      height:REM(18px);
+      border:REM(1px) solid #DADADAFF;
+      font-size:REM(7px);
+      border-radius:REM(18px);
+      @include display-flex();
+      align-items: center;
+      justify-content: center;
+      line-height:1;
+    }
+  }
+  @include display-xs(){
+    display: none;
+  }
+}
+
+.mobile-header {
+  display:none;
+
+  @include display-xs {
+    display:flex;
+    width:100%;
+    height:REM(212px / 3);
+    align-items: center;
+    padding:0 REM(48px / 3);
+
+  }
+
+  .mobile-logo {
+    width:REM(332px / 3);
+    height:REM(89px / 3);
+    background-size:100% 100%;
+    background-repeat: no-repeat;
+    background-image:url(../images/common/on-air.png);
+    margin-left:auto;
+    margin-right:auto;
+    text-indent: -9999px;
+  }
+
+  .m-button {
+    display:block;
+    background-size:auto 100%;
+    background-repeat: no-repeat;
+    width:REM(56px / 3);
+    height:REM(44px / 3);
+    background-position:center;
+    border: 0 none;
+    background-color:transparent;
+    text-indent: -9999px;
+
+    &.toggle-menu {
+      background-image:url(../images/common/btn-menu.png);
+    }
+    &.toggle-search {
+      background-image:url(../images/common/btn-search.png);
+    }
+    &.close-menu {
+      background-image:url(../images/common/btn-menu-close.png);
+    }
+  }
+
+}
+
+#mobile-left-menu {
+  display:none;
+  width:100%;
+  height:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  -webkit-transform: translateZ(0);
+  background:#f8f8f8;
+
+  &.opened {
+    @include display-xs {
+      display:block;
+      z-index:99;
+    }
+  }
+
+}
+
+body:has(#mobile-left-menu.opened) {
+  @include display-xs {
+    overflow-y:hidden;
+    max-height:100%;
+  }
+}
+
+.container {
+  width:100%;
+  max-width:REM(960px);
+  margin: 0 auto;
+  padding:0 REM(80px);
+}
+
+@include display-xs(){
+
+  .container {
+    width: 100%;
+    padding:0;
+  }
+}
+
+.mobile-nav {
+  padding:0;
+  margin:0;
+  > ul {
+    list-style:none;
+    padding:0;
+    margin:0;
+    background-color:#fff;
+
+    > li {
+      > a {
+        background-color:#02205b;
+        padding:0 REM(60px / 3);
+        display:flex;
+        align-items: center;
+        height:REM(104px / 3);
+        font-size:REM(36px/ 3);
+        color:#fff;
+        font-weight:500;
+        border-bottom: REM(1px/ 3) solid #1d3667;
+        &:after {
+          content: '';
+          display:block;
+          width:REM(25px / 3);
+          height:REM(14px / 3);
+          margin-left:auto;
+          background-size:100%;
+          background-image:url(../images/common/chevron-down.png);
+          background-repeat: no-repeat;
+          transform: rotate(180deg);
+        }
+        &.active{
+          &:after {
+            background-image:url(../images/common/chevron-down.png);
+            transform: rotate(0deg);
+          }
+        }
+      }
+
+      > ul {
+        display:none;
+        flex-wrap:wrap;
+        &.open {
+          @include display-flex();
+        }
+        > li {
+          width:50%;
+          border-right:1px solid #cccccc;
+          border-bottom:1px solid #cccccc;
+
+          > a {
+            display:flex;
+            height:REM(81px / 3);
+            justify-content: center;
+            align-items: center;
+            font-size:REM(32px /  3);
+            font-weight:500;
+            color:#111111;
+          }
+
+          &:nth-child(2n) {
+            border-right:0;
+          }
+        }
+      }
+    }
+  }
+  .btn-more{
+    color:#868686;
+    font-size:REM(27.44px / 3);
+    border:REM(1px) solid #868686;
+    width: REM(220px / 3);
+    height: REM(53px / 3);
+    border-radius: REM(53px / 3);
+    @include display-flex();
+    align-items: center;
+    justify-content: center;
+    margin:REM(45px / 3) auto;
+  }
+}
+
+
+#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;
+    background-color:#fff;
+    border:REM(1px) solid #C8C8C8FF;
+    width: REM(169px);
+    height: REM(158px);
+    border-radius: REM(15px);
+    padding:REM(30px) REM(23px) 0 REM(23px);
+    &:before{
+      content:"국민연금공단 SNS 바로가기";
+      font-size:REM(13.5px);
+      font-weight:$font-weight-bold;
+      position:absolute;
+      width:100%;
+      text-align: center;
+      left:0;
+      top:REM(11px);
+      line-height:1;
+    }
+    .item{
+      a {
+        @include display-flex();
+        align-items: center;
+        position:relative;
+        padding-left:REM(48px);
+        font-size:REM(13px);
+        height:REM(38px);
+        line-height:1;
+        &:before{
+          content:"";
+          display: block;
+          width:REM(35px);
+          height:REM(35px);
+          border-radius: REM(10px);
+          background-color:#02256CFF;
+          position:absolute;
+          left:0;
+          top:50%;
+          transform: translate(0, -50%);
+        }
+        &:after{
+          content:"";
+          position:absolute;
+          left:0;
+          top:50%;
+          transform: translate(0, -50%);
+          background-size: cover;
+        }
+      }
+      &.tv {
+        > a {
+          &:after{
+            width:REM(21px);
+            height:REM(15px);
+            margin-left:REM(8px);
+            @include background-image('../images/common/tv.png')
+          }
+        }
+      }
+      &.instagram {
+        > a {
+          &:after{
+            width:REM(19px);
+            height:REM(19px);
+            margin-left:REM(8.5px);
+            @include background-image('../images/common/instagram.png')
+          }
+        }
+      }
+      &.blog {
+        > a {
+          &:after{
+            width:REM(21px);
+            height:REM(17px);
+            margin-left:REM(8px);
+            @include background-image('../images/common/blog.png')
+          }
+        }
+      }
+    }
+  }
+  @include display-xs(){
+    width:100%;
+    .search-box,
+    .menu-list,
+    .family-list{
+     display: none;
+    }
+
+  }
+
+}
+
+#contents {
+  background-color:#f1f1f1;
+  padding:REM(27px) 0 REM(20px) 0;
+  @include display-xs(){
+    padding:0 REM(33px / 3);
+  }
+}
+
+#footer{
+  background-color:#959595;
+  padding:REM(25px) 0 REM(35px) 0;
+  .logo-box{
+    display: block;
+    width:REM(125px);
+    height:REM(20px);
+    margin:0 auto;
+    #logo {
+      width:REM(125px);
+      height:REM(20px);
+    }
+  }
+  .footer-info {
+    @include display-flex();
+    align-items: center;
+    justify-content: center;
+    margin-top:REM(5px);
+    dl {
+      @include display-flex();
+      align-items: center;
+      & + dl {
+        margin-left:REM(5px);
+      }
+      dt {
+        font-weight:$font-weight-base;
+        font-size:REM(8px);
+        color:#fff;
+      }
+      dd {
+        font-weight:$font-weight-base;
+        font-size:REM(8px);
+        color:#fff;
+        > br{
+          display: none;
+        }
+      }
+    }
+  }
+  .copyright{
+    text-align: center;
+    font-weight:$font-weight-base;
+    font-size:REM(8px);
+    margin-top:REM(15px);
+    color:#fff;
+    width: 100%;
+    line-height:1;
+  }
+
+  @include display-xs(){
+    padding:REM(44px / 3) REM(33px / 3) REM(60px / 3) REM(33px / 3);
+    @include display-flex();
+    flex-direction: column;
+
+    .footer-info {
+      order:1;
+      flex-wrap: wrap;
+      dl {
+        order: 3;
+        &:first-child {
+          order: 1;
+        }
+        &:last-child{
+          order: 2;
+        }
+        & + dl {
+          margin-left:REM(9px / 3);
+        }
+        dt {
+          font-size:REM(26px / 3);
+          display: inline-flex;
+        }
+        dd {
+          font-size:REM(26px / 3);
+          display: inline-flex;
+          text-align: center;
+          line-height:1.35;
+          > br{
+            display: block;
+          }
+        }
+      }
+    }
+    .logo-box{
+      order:2;
+      width:REM(309px / 3);
+      height:REM(49px / 3);
+      margin:REM(35px / 3) auto;
+      @include background-image('../images/common/footer-logo.png');
+      background-size: cover;
+      #logo {
+        display: none;
+      }
+    }
+    .copyright{
+      order: 3;
+      font-size:REM(26px / 3);
+    }
+  }
+}

src/scss/pages/main.scss

@@ -1,3 +1,651 @@
 /**********************************************************************************************************************
  * 메인페이지
  ***********************************************************************************************************************/
+#main{
+  width:100%;
+  .box {
+    position: relative;
+    overflow: hidden;
+    .box-link{
+      width:100%;
+      height:100%;
+      position:absolute;
+      left:0;
+      top:0;
+    }
+  }
+
+  .main-top {
+    @include display-flex();
+    align-items: stretch;
+    justify-content: space-between;
+    @include display-xs(){
+      flex-direction: column;
+    }
+    .line-01 {
+      width:REM(169px);
+      @include display-xs(){
+        display: none;
+      }
+    }
+    .line-02 {
+      width:REM(416px);
+      @include display-flex();
+      flex-direction: column;
+      .top{
+        border:REM(1px) solid #26356BFF;
+        border-radius: REM(15px);
+        width:REM(417px);
+        height:REM(234px);
+        overflow: hidden;
+        background-size: cover;
+        position:relative;
+      }
+      .bottom {
+        margin-top:REM(12px);
+        @include display-flex();
+        justify-content: space-between;
+        align-items: stretch;
+        .left {
+          position: relative;
+          border-radius: REM(15px);
+          width: REM(229px);
+          height: REM(229px);
+          background-color:#33CC99FF;
+          overflow:hidden;
+          .link {
+            width: 100%;
+            height:100%;
+            padding:REM(15px);
+            @include display-flex();
+            align-items: flex-start;
+            flex-direction: column;
+            .title {
+              font-size:REM(36.83px);
+              font-weight:$font-weight-extra-bold;
+              line-height:1.15;
+              color:#fff;
+              font-family: $font-family-base;
+              padding-bottom:REM(28px);
+              position:relative;
+              &:before{
+                content:"";
+                width:REM(66px);
+                height:REM(5px);
+                background-color:#fff;
+                position:absolute;
+                left:0;
+                bottom:REM(12px);
+              }
+            }
+            .date{
+              display: block;
+              margin-bottom:REM(12px);
+              > dd {
+                font-size:REM(18.25px);
+                color:#fff;
+              }
+            }
+            .info {
+              padding:0;
+              li {
+                font-size:REM(15.23px);
+                color:#fff;
+                margin-bottom:REM(5px);
+                line-height: 1;
+              }
+            }
+          }
+        }
+        .right{
+          .box {
+            border:REM(1px) solid #C8C8C8FF;
+            border-radius: REM(15px);
+            position:relative;
+            background-size:cover;
+            overflow:hidden;
+            &.top{
+              width: REM(179px);
+              height: REM(107px);
+              overflow: hidden;
+            }
+            &.bottom{
+              width: REM(179px);
+              height: REM(111px);
+              overflow: hidden;
+            }
+          }
+        }
+      }
+      @include display-xs(){
+        width:100%;
+        position:relative;
+        .top {
+          width:100%;
+          height:REM(368px  / 3);
+          border-radius: REM(20px / 3);
+        }
+        .bottom {
+          flex-direction: row-reverse;
+          margin-top:REM(20px / 3);
+          .left {
+            border-radius: REM(20px / 3);
+            width: REM(310px / 3);
+            height: REM(367px / 3);
+            .link {
+              padding:REM(20px / 3);
+              @include display-flex();
+              align-items: flex-start;
+              flex-direction: column;
+              .title {
+                font-size:REM(53px / 3);
+                font-family: $font-family-base;
+                padding-bottom:REM(50px / 3);
+                position:relative;
+                &:before{
+                  width:REM(98px / 3);
+                  height:REM(10px / 3);
+                  background-color:#fff;
+                  bottom:REM(24px / 3);
+                }
+              }
+              .date{
+                margin-bottom:REM(15px / 3);
+                > dd {
+                  font-size:REM(27px / 3);
+                }
+              }
+              .info {
+                li {
+                  font-size:REM(22px / 3);
+                  margin-bottom:REM(10px / 3);
+                }
+              }
+            }
+          }
+          .right{
+            .box {
+              border-radius: REM(20px / 3);
+              &.top{
+                width: REM(335px / 3);
+                height: REM(235px / 3);
+                overflow: hidden;
+                position:absolute;
+                right:0;
+                top:REM(775px / 3);
+              }
+              &.bottom{
+                width: REM(318px / 3);
+                height: REM(367px / 3);
+                overflow: hidden;
+                margin-top:0;
+              }
+            }
+          }
+        }
+      }
+    }
+    .line-03 {
+      width:REM(191px);
+      @include display-flex();
+      flex-direction: column;
+      .top {
+        border:REM(1px) solid #C8C8C8FF;
+        border-radius: REM(15px);
+        width: REM(191px);
+        height: REM(351px);
+        overflow: hidden;
+        background-size: cover;
+        background-position: center center;
+      }
+      .bottom {
+        border-radius: REM(15px);
+        width: REM(192px);
+        height: REM(112px);
+        background-color:#FFB400FF;
+        margin-top:REM(12px);
+        .link {
+          @include display-flex();
+          flex-direction: column;
+          padding:REM(10px) REM(10px);
+        }
+        .title{
+          font-size:REM(20px);
+          font-weight:$font-weight-extra-bold;
+          line-height:1.15;
+          color:#fff;
+          font-family: $font-family-base;
+          padding-bottom:REM(28px);
+          position:relative;
+
+          &:before{
+            content:"";
+            width:REM(66px);
+            height:REM(5px);
+            background-color:#fff;
+            position:absolute;
+            left:0;
+            bottom:REM(12px);
+          }
+        }
+        .sub-text{
+          font-size:REM(18.36px);
+          line-height: REM(21px);
+          width:100%;
+          height: REM(42px);
+          min-height:REM(42px);
+          color:#fff;
+          word-wrap: break-word;
+          word-break: keep-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          min-width: 0;
+        }
+      }
+      @include display-xs(){
+        width:100%;
+        margin-top:REM(20px / 3);
+        flex-direction: row;
+        justify-content: space-between;
+        .top {
+          border-radius: REM(20px / 3);
+          width: REM(300px / 3);
+          height: REM(530px / 3);
+        }
+        .bottom {
+          border-radius: REM(20px / 3);
+          width: REM(335px / 3);
+          height: REM(276px / 3);
+          margin-top:REM(20px / 3);
+          align-self: flex-end;
+          box-sizing: border-box;
+          .link {
+            padding:REM(20px / 3);
+          }
+          .title{
+            font-size:REM(51px  / 3);
+            padding-bottom:REM(56px / 3);
+            word-wrap: break-word;
+            word-break: keep-all;
+
+            &:before{
+              content:"";
+              width:REM(107px / 3);
+              height:REM(7px / 3);
+              background-color:#fff;
+              position:absolute;
+              left:0;
+              bottom:REM(24px / 3);
+            }
+          }
+          .sub-text{
+            font-size:REM(22px / 3);
+            line-height: REM(30px / 3);
+            height: REM(60px / 3);
+            min-height:REM(60px / 3);
+            color:#fff;
+          }
+        }
+      }
+    }
+  }
+  .main-center {
+    margin:REM(15px) 0 REM(50px) 0;
+    .line-banner{
+      border:REM(1px) solid #C8C8C8FF;
+      width:100%;
+      height:REM(71px);
+      border-radius: REM(12px);
+      background-position: center center;
+      overflow: hidden;
+      background-size: cover;
+
+    }
+    @include display-xs(){
+      margin:REM(20px / 3) 0;
+      .line-banner{
+        width:100%;
+        height:REM(65px / 3);
+        border-radius: REM(20px / 3);
+      }
+    }
+  }
+  .family-list.mobile {
+    display: none;
+    @include display-xs(){
+      @include display-flex();
+      justify-content: center;
+      width:100%;
+      height:REM(120px / 3);
+      border-radius: REM(20px / 3);
+      padding-top:REM(60px / 3);
+      position:relative;
+      background-color:#fff;
+      border:REM(1px) solid #cccccc;
+      margin-bottom:REM(80px / 3);
+      &:before{
+        content:"국민연금공단 SNS 바로가기";
+        font-size:REM(26px / 3);
+        font-weight:$font-weight-bold;
+        position:absolute;
+        width:100%;
+        text-align: center;
+        left:0;
+        top:REM(15px / 3);
+        line-height:1;
+      }
+      .item{
+        a {
+          @include display-flex();
+          align-items: center;
+          justify-content: space-between;
+          position:relative;
+          padding-left:REM(45px / 3);
+          font-size:REM(18.5px / 3);
+          height:REM(40px / 3);
+          line-height:1;
+          &:before{
+            content:"";
+            display: block;
+            width:REM(40px  / 3);
+            height:REM(40px / 3);
+            border-radius: REM(10px / 3);
+            background-color:#02256CFF;
+            position:absolute;
+            left:0;
+            top:50%;
+            transform: translate(0, -50%);
+          }
+          &:after{
+            content:"";
+            position:absolute;
+            left:0;
+            top:50%;
+            transform: translate(0, -50%);
+            background-size: cover;
+          }
+        }
+        &.tv {
+          > a {
+            &:after{
+              width:REM(22px / 3);
+              height:REM(15px / 3);
+              margin-left:REM(8px / 3);
+              @include background-image('../images/common/tv.png')
+            }
+          }
+        }
+        &.instagram {
+          margin-left:REM(50px / 3);
+          > a {
+            &:after{
+              width:REM(19px / 3);
+              height:REM(19px / 3);
+              margin-left:REM(9px / 3);
+              @include background-image('../images/common/instagram.png')
+            }
+          }
+        }
+        &.blog {
+          margin-left:REM(50px / 3);
+          > a {
+            &:after{
+              width:REM(21px / 3);
+              height:REM(17px / 3);
+              margin-left:REM(8px / 3);
+              @include background-image('../images/common/blog.png')
+            }
+          }
+        }
+      }
+    }
+  }
+  .main-bottom {
+    @include display-flex();
+    justify-content: space-between;
+    position:relative;
+    z-index:1;
+    @include display-xs(){
+      flex-direction: column;
+    }
+    .title-box {
+      @include display-flex();
+      align-items: center;
+      justify-content: space-between;
+      border-bottom:REM(1px) solid #02205b;
+      padding-bottom:REM(10px);
+      margin-bottom:REM(10px);
+      @include display-xs(){
+        justify-content: flex-end;
+        padding-bottom:REM(20px / 3);
+        margin-bottom:REM(20px / 3);
+      }
+    }
+    .slide-title {
+      font-size:REM(23.57px);
+      line-height:1;
+      color:#02205b;
+      @include display-xs(){
+        display: none;
+      }
+    }
+    .control-box {
+      @include display-flex();
+      align-items: center;
+      justify-content: space-between;
+      .btn {
+        background-color:#fff;
+        width:REM(24px);
+        height:REM(24px);
+        border-radius: REM(24px);
+        border:none;
+        @include display-flex();
+        align-items: center;
+        justify-content: center;
+        margin-left:REM(15px);
+        line-height:1;
+        &.btn-right{
+          margin-left:REM(5px);
+        }
+        .icon {
+          font-size:REM(24px);
+        }
+      }
+      .swiper-pagination {
+        position:relative;
+        left:0;
+        transform: translate(0);
+        height:REM(24px);
+        bottom: 0;
+        @include display-flex();
+        align-items: center;
+        overflow: initial;
+      }
+      .swiper-pagination-bullet{
+        background-color:#8b93ae;
+        width:REM(7px);
+        height:REM(7px);
+        &.swiper-pagination-bullet-active {
+          width:REM(18px);
+          border-radius: REM(9px);
+          background-color:#02205b;
+        }
+      }
+      @include display-xs(){
+        .btn {
+          width:REM(42px / 3);
+          height:REM(42px / 3);
+          border-radius: REM(42px / 3);
+          margin-left:REM(26px / 3);
+          &.btn-right{
+            margin-left:REM(15px / 3);
+          }
+          .icon {
+            font-size:REM(38px / 3);
+          }
+        }
+        .swiper-pagination {
+          height:REM(42px / 3);
+        }
+        .swiper-pagination-bullet{
+          width:REM(12px / 3);
+          height:REM(12px / 3);
+          &.swiper-pagination-bullet-active {
+            width:REM(28px / 3);
+            border-radius: REM(14px / 3);
+          }
+        }
+      }
+    }
+    .left-slide{
+      width:REM(416px);
+      .swiper-container {
+        width:REM(416px);
+        height:REM(375px);
+        overflow:hidden;
+      }
+      .recent-list {
+        .swiper-slide {
+          padding:REM(12px) 0;
+          height: REM(78px) !important;
+          border-bottom:REM(1px) solid #26356b;
+          box-sizing: border-box;
+          a {
+            @include display-flex();
+            width: 100%;
+            position:relative;
+            min-width: 0;
+            &:after{
+              content:"\e5e1";
+              font-family: 'Material Symbols Outlined';
+              font-weight: normal;
+              font-style: normal;
+              line-height: 1;
+              letter-spacing: normal;
+              text-transform: none;
+              display: inline-block;
+              white-space: nowrap;
+              word-wrap: normal;
+              direction: ltr;
+              -webkit-font-feature-settings: 'liga';
+              -webkit-font-smoothing: antialiased;
+              font-size:REM(30px);
+              position:absolute;
+              right:0;
+              font-weight:200;
+              top:50%;
+              transform: translate(0,-50%);
+            }
+          }
+          .date{
+            font-size:REM(12.75px);
+            font-weight:$font-weight-semi-bold;
+            line-height:1;
+            color:#02205b;
+            .big{
+              display: block;
+              font-size:REM(34.38px);
+              font-weight:$font-weight-bold;
+            }
+          }
+          .notice-text {
+            font-size:REM(15.75px);
+            margin-left:REM(15px);
+            @include display-flex();
+            justify-content: space-evenly;
+            flex-direction: column;
+            color:#02205b;
+            .label{
+              display: block;
+              font-size:REM(12.75px);
+              line-height:1;
+              color:#02205b;
+            }
+          }
+        }
+      }
+
+      @include display-xs(){
+        width:100%;
+        .swiper-container {
+          width:100%;
+          height:REM(624px / 3);
+          overflow:hidden;
+        }
+        .recent-list {
+          .swiper-slide {
+            padding:REM(25px / 3) 0;
+            height: REM(126px / 3) !important;
+            a {
+              @include display-flex();
+              width: 100%;
+              position:relative;
+              &:after{
+                font-size:REM(60px / 3);
+              }
+            }
+            .date{
+              font-size:REM(21.73px / 3);
+              .big{
+                font-size:REM(54.32px / 3);
+              }
+            }
+            .notice-text {
+              font-size:REM(24.83px / 3);
+              margin-left:REM(35px / 3);
+              .label{
+                font-size:REM(24.83px / 3);
+              }
+            }
+          }
+        }
+      }
+    }
+    .right-slide{
+      width:REM(360px);
+      overflow: hidden;
+      .swiper-slide {
+        width:REM(175px) !important;
+        height:REM(315px);
+        border-radius: REM(15px);
+        border:none;
+        background-size: cover;
+        overflow: hidden;
+        &.swiper-slide{
+          margin-right:REM(8px);
+        }
+      }
+      .btn-more{
+        display: none;
+      }
+      @include display-xs(){
+        width:100%;
+        .title-box {
+          display: none;
+        }
+        .swiper-slide {
+          width:REM(317px / 3) !important;
+          height:REM(584px / 3);
+          border-radius: REM(20px / 3);
+          &.swiper-slide{
+            margin-right:REM(13px / 3);
+          }
+        }
+        .btn-more {
+          display: block;
+          font-size:REM(31.7px / 3);
+          border:REM(1px) solid #7D7D7DFF;
+          color:#7D7D7DFF;
+          width: 100%;
+          height: REM(79px / 3);
+          margin:REM(37px / 3) 0 REM(57px / 3) 0;
+
+        }
+      }
+    }
+
+  }
+}

src/scss/plugins/fontawesome-5.15.2/_animated.scss

@@ -1,20 +0,0 @@
-// Animated Icons
-// --------------------------
-
-.#{$fa-css-prefix}-spin {
-  animation: fa-spin 2s infinite linear;
-}
-
-.#{$fa-css-prefix}-pulse {
-  animation: fa-spin 1s infinite steps(8);
-}
-
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/scss/plugins/fontawesome-5.15.2/_bordered-pulled.scss

@@ -1,20 +0,0 @@
-// Bordered & Pulled
-// -------------------------
-
-.#{$fa-css-prefix}-border {
-  border: solid .08em $fa-border-color;
-  border-radius: .1em;
-  padding: .2em .25em .15em;
-}
-
-.#{$fa-css-prefix}-pull-left { float: left; }
-.#{$fa-css-prefix}-pull-right { float: right; }
-
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fab {
-  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
-}

src/scss/plugins/fontawesome-5.15.2/_core.scss

@@ -1,21 +0,0 @@
-// Base Class Definition
-// -------------------------
-
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fad,
-.fab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  text-rendering: auto;
-  line-height: 1;
-}
-
-%fa-icon {
-  @include fa-icon;
-}

src/scss/plugins/fontawesome-5.15.2/_fixed-width.scss

@@ -1,6 +0,0 @@
-// Fixed Width Icons
-// -------------------------
-.#{$fa-css-prefix}-fw {
-  text-align: center;
-  width: $fa-fw-width;
-}

src/scss/plugins/fontawesome-5.15.2/_larger.scss

@@ -1,23 +0,0 @@
-// Icon Sizes
-// -------------------------
-
-// makes the font 33% larger relative to the icon container
-.#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -.0667em;
-}
-
-.#{$fa-css-prefix}-xs {
-  font-size: .75em;
-}
-
-.#{$fa-css-prefix}-sm {
-  font-size: .875em;
-}
-
-@for $i from 1 through 10 {
-  .#{$fa-css-prefix}-#{$i}x {
-    font-size: $i * 1em;
-  }
-}

src/scss/plugins/fontawesome-5.15.2/_list.scss

@@ -1,18 +0,0 @@
-// List Icons
-// -------------------------
-
-.#{$fa-css-prefix}-ul {
-  list-style-type: none;
-  margin-left: $fa-li-width * 5/4;
-  padding-left: 0;
-
-  > li { position: relative; }
-}
-
-.#{$fa-css-prefix}-li {
-  left: -$fa-li-width;
-  position: absolute;
-  text-align: center;
-  width: $fa-li-width;
-  line-height: inherit;
-}

src/scss/plugins/fontawesome-5.15.2/_mixins.scss

@@ -1,56 +0,0 @@
-// Mixins
-// --------------------------
-
-@mixin fa-icon {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  line-height: 1;
-}
-
-@mixin fa-icon-rotate($degrees, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-  transform: rotate($degrees);
-}
-
-@mixin fa-icon-flip($horiz, $vert, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-  transform: scale($horiz, $vert);
-}
-
-
-// Only display content to screen readers. A la Bootstrap 4.
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-
-@mixin sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable {
-  &:active,
-  &:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-  }
-}

src/scss/plugins/fontawesome-5.15.2/_rotated-flipped.scss

@@ -1,24 +0,0 @@
-// Rotated & Flipped Icons
-// -------------------------
-
-.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
-.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
-.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
-
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
-.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
-
-// Hook for IE8-9
-// -------------------------
-
-:root {
-  .#{$fa-css-prefix}-rotate-90,
-  .#{$fa-css-prefix}-rotate-180,
-  .#{$fa-css-prefix}-rotate-270,
-  .#{$fa-css-prefix}-flip-horizontal,
-  .#{$fa-css-prefix}-flip-vertical,
-  .#{$fa-css-prefix}-flip-both {
-    filter: none;
-  }
-}

src/scss/plugins/fontawesome-5.15.2/_screen-reader.scss

@@ -1,5 +0,0 @@
-// Screen Readers
-// -------------------------
-
-.sr-only { @include sr-only; }
-.sr-only-focusable { @include sr-only-focusable; }

src/scss/plugins/fontawesome-5.15.2/_stacked.scss

@@ -1,31 +0,0 @@
-// Stacked Icons
-// -------------------------
-
-.#{$fa-css-prefix}-stack {
-  display: inline-block;
-  height: 2em;
-  line-height: 2em;
-  position: relative;
-  vertical-align: middle;
-  width: ($fa-fw-width*2);
-}
-
-.#{$fa-css-prefix}-stack-1x,
-.#{$fa-css-prefix}-stack-2x {
-  left: 0;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-}
-
-.#{$fa-css-prefix}-stack-1x {
-  line-height: inherit;
-}
-
-.#{$fa-css-prefix}-stack-2x {
-  font-size: 2em;
-}
-
-.#{$fa-css-prefix}-inverse {
-  color: $fa-inverse;
-}

src/scss/plugins/fontawesome-5.15.2/brands.scss

@@ -1,23 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-brands-400.eot');
-  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
-}
-
-.fab {
-  font-family: 'Font Awesome 5 Brands';
-  font-weight: 400;
-}

src/scss/plugins/fontawesome-5.15.2/fontawesome.scss

@@ -1,16 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'larger';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';

src/scss/plugins/fontawesome-5.15.2/light.scss

@@ -1,23 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-light-300.eot');
-  src: url('#{$fa-font-path}/fa-light-300.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-light-300.woff') format('woff'),
-  url('#{$fa-font-path}/fa-light-300.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg');
-}
-
-.fal {
-  font-family: 'Font Awesome 5 Pro';
-  font-weight: 300;
-}

src/scss/plugins/fontawesome-5.15.2/regular.scss

@@ -1,23 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-regular-400.eot');
-  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
-}
-
-.far {
-  font-family: 'Font Awesome 5 Pro';
-  font-weight: 400;
-}

src/scss/plugins/fontawesome-5.15.2/solid.scss

@@ -1,24 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-
-@font-face {
-  font-family: 'Font Awesome 5 Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-solid-900.eot');
-  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
-  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
-}
-
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Pro';
-  font-weight: 900;
-}

src/scss/plugins/fontawesome-5.15.2/v4-shims.scss

@@ -1,6 +0,0 @@
-/*!
- * Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- */
-@import 'variables';
-@import 'shims';

src/scss/style.scss

@@ -5,13 +5,6 @@
 @import "variables";
 @import "boot/reset";
 
-// FontAwesome
-@import "plugins/fontawesome-5.15.2/fontawesome";
-@import "plugins/fontawesome-5.15.2/regular";
-@import "plugins/fontawesome-5.15.2/light";
-@import "plugins/fontawesome-5.15.2/solid";
-@import "plugins/fontawesome-5.15.2/brands";
-
 // 애니메이션,레이아웃,유틸리티,컴포넌트
 @import "common/animation";
 @import "common/layout";