모바일 레이아웃 변경

dist/assets/css/style.css

@@ -629,11 +629,42 @@ html {
   #nav {
     width: 100%;
   }
-  #nav .search-box,
   #nav .menu-list,
   #nav .family-list {
     display: none;
   }
+  #nav .search-box {
+    display: none;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    height: auto;
+    background-color: transparent;
+    top: 3.6458333333rem;
+  }
+  #nav .search-box.open {
+    display: block;
+    z-index: 98;
+  }
+  #nav .search-box .link {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  #nav .search-box .search-form {
+    margin-top: 0;
+  }
+  #nav .search-box .search-form .input {
+    border-radius: 0;
+    border: 0;
+    border-top: 0.0625rem solid #02256c;
+    border-bottom: 0.0625rem solid #02256c;
+  }
+  #nav .search-box:before {
+    background-image: none;
+    width: 0;
+    height: 0;
+  }
 }
 
 #contents {
@@ -667,6 +698,7 @@ html {
   align-items: center;
   justify-content: center;
   margin-top: 0.3125rem;
+  line-height: 1.5;
 }
 #footer .footer-info dl {
   -webkit-display: flex;
@@ -764,55 +796,72 @@ html {
   width: 10.5625rem;
   height: 8.4375rem;
   background-color: #fff;
-  padding: 4.125rem 0.75rem 1.25rem 0.75rem;
+  padding: 1.875rem 0.75rem 1.25rem 0.75rem;
   border-radius: 0.9375rem;
   position: relative;
   box-sizing: border-box;
 }
-.search-box:before {
-  content: "";
+.search-box .link {
   background-color: transparent;
   background-image: url("../images/common/on-air.png");
   background-repeat: no-repeat;
   background-position-x: center;
   background-position-y: center;
-  background-size: cover;
+  background-size: 8.875rem 2.375rem;
   width: 8.875rem;
   height: 2.375rem;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, 0);
-  top: 1.6875rem;
+  display: block;
+  text-indent: -9999px;
+  overflow: hidden;
 }
 .search-box .search-form {
   width: 100%;
   position: relative;
   margin-top: 1.25rem;
+  overflow: hidden;
+  line-height: 1;
 }
 .search-box .search-form .input {
   width: 100%;
   height: 1.6875rem;
   border-radius: 2.4375rem;
   border: 0.0625rem solid #26356b;
-  padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
+  padding: 0.3125rem 1.5rem 0.3125rem 0.75rem;
   box-sizing: border-box;
+  font-size: 0.845rem;
+  line-height: 1;
 }
 .search-box .search-form .search-btn {
   width: 1rem;
-  height: 1.0625rem;
+  height: 1.6875rem;
   position: absolute;
   right: 0.3125rem;
-  top: 50%;
-  transform: translate(0, -50%);
+  top: 0;
   border: none;
-  background-color: #fff;
+  background-color: transparent;
   padding: 0;
-  line-height: 1;
+  cursor: pointer;
+  line-height: 1.6875rem;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-box .search-form .search-btn:focus {
+  outline: none;
 }
 .search-box .search-form .search-btn .icon {
   font-size: 1rem;
   color: #26356b;
 }
+@media screen and (max-width: 768px) {
+  .search-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
 
 /**
  * 좌측 메뉴
@@ -895,6 +944,43 @@ html {
   flex-shrink: 0;
   margin-right: 1rem;
 }
+@media screen and (max-width: 768px) {
+  .sub-main .left-nav {
+    margin-right: 0;
+    width: 0;
+    flex-shrink: initial;
+  }
+  .sub-main .left-nav .search-box {
+    display: none;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    height: auto;
+    background-color: transparent;
+    top: 3.6458333333rem;
+  }
+  .sub-main .left-nav .search-box.open {
+    display: block;
+    z-index: 98;
+  }
+  .sub-main .left-nav .search-box .link {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+  .sub-main .left-nav .search-box .search-form {
+    margin-top: 0;
+  }
+  .sub-main .left-nav .search-box .search-form .input {
+    border-radius: 0;
+    border: 0;
+    border-top: 0.0625rem solid #02256c;
+    border-bottom: 0.0625rem solid #02256c;
+  }
+  .sub-main .left-nav .menu-list {
+    display: none;
+  }
+}
 .sub-main .page-contents {
   flex: 1;
   min-width: 0;
@@ -2696,6 +2782,18 @@ html {
   font-weight: 600;
   margin: 0 0.1875rem;
 }
+@media screen and (max-width: 768px) {
+  .breadcrumb {
+    padding: 0;
+  }
+  .breadcrumb ol li a, .breadcrumb ol li span {
+    font-size: 0.4583333333rem;
+  }
+  .breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
+    font-size: 0.4583333333rem;
+    margin: 0 0.25rem;
+  }
+}
 
 .contents-box {
   background: #fff;
@@ -2716,6 +2814,20 @@ html {
   font-weight: 600;
   line-height: 1em;
 }
+@media screen and (max-width: 768px) {
+  .contents-box {
+    border-radius: 0.625rem;
+    padding: 0.6666666667rem 0.9375rem;
+    margin: 0 0 1.25rem 0;
+  }
+  .contents-box .contents-header {
+    border-bottom: 2px solid #02256c;
+    padding: 0.625rem 0;
+  }
+  .contents-box .contents-header .contents-title {
+    font-size: 0.8125rem;
+  }
+}
 
 .pagination {
   display: block;
@@ -2727,6 +2839,13 @@ html {
   justify-content: center;
   align-items: center;
 }
+@media screen and (max-width: 768px) {
+  .pagination ol {
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 0.9375rem;
+  }
+}
 .pagination ol li a, .pagination ol li span {
   display: flex;
   width: 1.75rem;
@@ -2739,6 +2858,13 @@ html {
   transition: color 0.3s ease, background-color 0.3s ease;
   cursor: pointer;
 }
+@media screen and (max-width: 768px) {
+  .pagination ol li a, .pagination ol li span {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 0.625rem;
+  }
+}
 .pagination ol li.active a, .pagination ol li.active span, .pagination ol li:not(.disabled):not(.active):hover a, .pagination ol li:not(.disabled):not(.active):hover span {
   background-color: #02256c;
   color: #fff;
@@ -2787,7 +2913,8 @@ html {
   width: 10.5625rem;
 }
 @media screen and (max-width: 768px) {
-  #main .main-top .line-01 {
+  #main .main-top .line-01 #nav .menu-list,
+  #main .main-top .line-01 #nav .family-list {
     display: none;
   }
 }
@@ -3491,6 +3618,17 @@ html {
   -o-object-fit: cover;
   object-fit: cover;
 }
+@media screen and (max-width: 768px) {
+  .common-list .thumbnail .thumbnail-link {
+    width: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+  .common-list .thumbnail .thumbnail-link .thumbnail-img {
+    -o-object-fit: initial;
+    object-fit: initial;
+  }
+}
 .common-list .item-content .item-title {
   color: #02256c;
   font-size: 1rem;
@@ -3508,6 +3646,15 @@ html {
 .common-list .item-content .item-title a:hover {
   text-decoration: underline;
 }
+@media screen and (max-width: 768px) {
+  .common-list .item-content .item-title {
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
+    white-space: initial;
+    word-wrap: break-word;
+    word-break: keep-all;
+  }
+}
 .common-list .item-content .item-summary {
   font-size: 0.8125rem;
   color: #252525;
@@ -3546,6 +3693,12 @@ html {
   color: #959595;
   font-weight: 500;
 }
+@media screen and (max-width: 768px) {
+  .common-list .item-content .item-info dl dd {
+    font-size: 0.5833333333rem;
+    line-height: 1;
+  }
+}
 .common-list.news .item {
   display: flex;
   padding: 1.25rem 0;
@@ -3567,6 +3720,22 @@ html {
   -webkit-line-clamp: 4;
   line-height: 1.28em;
 }
+@media screen and (max-width: 768px) {
+  .common-list.news .item {
+    flex-direction: column;
+    padding: 0.4166666667rem 0;
+  }
+  .common-list.news .item .thumbnail {
+    width: 100%;
+    margin-right: 0;
+  }
+  .common-list.news .item .item-content .item-summary {
+    font-size: 0.5833333333rem;
+    height: 5.12em;
+    -webkit-line-clamp: 4;
+    line-height: 1.28em;
+  }
+}
 .common-list.toons {
   display: flex;
   flex-wrap: wrap;
@@ -3583,6 +3752,22 @@ html {
 .common-list.toons .item .item-content .item-title {
   font-size: 1.25rem;
 }
+@media screen and (max-width: 768px) {
+  .common-list.toons .item {
+    width: 100%;
+    padding: 0.3125rem 0.4166666667rem;
+    border-bottom: 1px solid #c2c2c2;
+    margin-bottom: 0.625rem;
+  }
+  .common-list.toons .item .thumbnail {
+    width: 100%;
+    height: auto;
+  }
+  .common-list.toons .item .item-content .item-title {
+    font-size: 0.6875rem;
+    margin-bottom: 0.25rem;
+  }
+}
 .common-list.shorts {
   margin: 0 -0.25rem;
   display: flex;
@@ -3609,6 +3794,27 @@ html {
   white-space: normal;
   word-break: break-all;
 }
+@media screen and (max-width: 768px) {
+  .common-list.shorts {
+    margin: 0;
+  }
+  .common-list.shorts .item {
+    width: 100%;
+    padding: 0.4166666667rem 0;
+    border-bottom: 1px solid #c2c2c2;
+    margin-bottom: 0.625rem;
+  }
+  .common-list.shorts .item .thumbnail {
+    width: 100%;
+    height: auto;
+  }
+  .common-list.shorts .item .item-content .item-title {
+    font-size: 0.6875rem;
+    margin-bottom: 0.25rem;
+    white-space: initial;
+    word-break: keep-all;
+  }
+}
 .common-list.clips {
   display: flex;
   flex-wrap: wrap;
@@ -3634,6 +3840,32 @@ html {
   -webkit-line-clamp: 2;
   line-height: 1.28em;
 }
+@media screen and (max-width: 768px) {
+  .common-list.clips {
+    margin: 0 0 0.625rem 0;
+  }
+  .common-list.clips .item {
+    width: 100%;
+    padding: 0.3125rem 0.4166666667rem;
+    border-bottom: 1px solid #c2c2c2;
+  }
+  .common-list.clips .item .item-title {
+    margin-bottom: 0.25rem;
+  }
+  .common-list.clips .item .item-title a > br {
+    display: none;
+  }
+  .common-list.clips .item .thumbnail {
+    width: 100%;
+    height: auto;
+  }
+  .common-list.clips .item .item-summary {
+    font-size: 0.625rem;
+  }
+  .common-list.clips .item .item-summary a > br {
+    display: none;
+  }
+}
 
 .tag-container {
   width: 100%;
@@ -3681,3 +3913,33 @@ html {
   background-color: #02256c;
   color: #fff;
 }
+@media screen and (max-width: 768px) {
+  .tag-container {
+    padding: 0.4166666667rem;
+    margin: 0.25rem 0 0.5208333333rem;
+    border-radius: 0.3125rem;
+    flex-direction: column;
+  }
+  .tag-container .tag-title {
+    padding-left: 0;
+    font-size: 0.8125rem;
+  }
+  .tag-container .tag-list {
+    margin: -0.0625rem;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .tag-container .tag-list li {
+    padding: 0.125rem;
+  }
+  .tag-container .tag-list li a {
+    height: 0.9375rem;
+    border-radius: 0.4166666667rem;
+    background-color: #ffffff;
+    color: #464646;
+    font-size: 0.5625rem;
+    padding: 0 0.5625rem;
+  }
+}

dist/clips.html

@@ -80,7 +80,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -94,11 +94,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +123,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -160,6 +160,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->
@@ -181,6 +191,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

dist/index.html

@@ -80,7 +80,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -94,11 +94,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +123,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -160,6 +160,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->
@@ -174,6 +184,7 @@
         <div class="line-01">
             <nav id="nav">
                 <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

dist/news.html

@@ -80,7 +80,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -94,11 +94,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +123,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -160,6 +160,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->
@@ -181,6 +191,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

dist/shorts.html

@@ -80,7 +80,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -94,11 +94,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +123,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -160,6 +160,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->
@@ -181,6 +191,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

dist/toons.html

@@ -80,7 +80,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -94,11 +94,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +123,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -160,6 +160,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->
@@ -181,6 +191,7 @@
 
     <aside class="left-nav">
         <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

src/html/include/header.html

@@ -68,7 +68,7 @@
 <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>
+    <button class="m-button toggle-search" type="button" id="toggle-search">검색 메뉴 토글</button>
 </header>
 
 <aside id="mobile-left-menu">
@@ -82,11 +82,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="">새소식</a></li>
+                    <li><a href="./news.html">새소식</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="./toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -111,8 +111,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="">동영상</a></li>
-                    <li><a href="">Shorts</a></li>
+                    <li><a href="./clips.html">동영상</a></li>
+                    <li><a href="./shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -148,6 +148,16 @@
             }
         });
     });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
 </script>
 
 <!--S: 컨텐츠 영역-->

src/html/include/search_box.html

@@ -1,4 +1,5 @@
 <div class="search-box">
+    <a href="#" class="link">국민연금 ON AIR</a>
     <form class="search-form">
         <input type="text" class="input"/>
         <button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>

src/scss/common/_layout.scss

@@ -304,14 +304,45 @@ body:has(#mobile-left-menu.opened) {
       }
     }
   }
+
   @include display-xs(){
     width:100%;
-    .search-box,
     .menu-list,
     .family-list{
      display: none;
     }
-
+    .search-box {
+      display: none;
+      width:100%;
+      border:0;
+      padding:0;
+      height:auto;
+      background-color:transparent;
+      top:REM(175px / 3);
+      &.open {
+        display: block;
+        z-index: 98;
+      }
+      .link {
+        display: none;
+        width:0;
+        height:0;
+      }
+      .search-form {
+        margin-top:0;
+        .input {
+          border-radius: 0;
+          border:0;
+          border-top:REM(3px / 3) solid #02256c;
+          border-bottom:REM(3px / 3) solid #02256c;
+        }
+      }
+      &:before{
+        background-image: none;
+        width:0;
+        height:0;
+      }
+    }
   }
 
 }
@@ -342,6 +373,7 @@ body:has(#mobile-left-menu.opened) {
     align-items: center;
     justify-content: center;
     margin-top:REM(5px);
+    line-height:1.5;
     dl {
       @include display-flex();
       align-items: center;
@@ -432,50 +464,63 @@ body:has(#mobile-left-menu.opened) {
   width: REM(169px);
   height:REM(135px);
   background-color:#fff;
-  padding:REM(66px) REM(12px) REM(20px) REM(12px);
+  padding:REM(30px) REM(12px) REM(20px) REM(12px);
   border-radius: REM(15px);
   position:relative;
   box-sizing: border-box;
-  &:before{
-    content:"";
+  .link {
     @include background-image('../images/common/on-air.png');
-    background-size: cover;
+    background-size: REM(142px) REM(38px);
     width:REM(142px);
     height:REM(38px);
-    position:absolute;
-    left:50%;
-    transform: translate(-50%, 0);
-    top:REM(27px);
+    display: block;
+    text-indent:-9999px;
+    overflow:hidden;
   }
   .search-form {
     width:100%;
     position:relative;
     margin-top:REM(20px);
+    overflow: hidden;
+    line-height:1;
     .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) ;
+      padding:REM(5px) REM(24px) REM(5px) REM(12px) ;
       box-sizing: border-box;
+      font-size:REM(13.52px);
+      line-height:1;
     }
     .search-btn {
       width:REM(16px);
-      height:REM(17px);
+      height:REM(27px);
       position:absolute;
       right:REM(5px);
-      top:50%;
-      transform:translate(0, -50%);
+      top:0;
       border:none;
-      background-color:#fff;
+      background-color:transparent;
       padding:0;
-      line-height:1;
+      cursor: pointer;
+      line-height:REM(27px);
+      @include display-flex();
+      align-items: center;
+      justify-content: center;
+      &:focus {
+        outline: none;
+      }
       .icon {
         font-size:REM(16px);
         color:#26356BFF;
       }
     }
   }
+  @include display-xs(){
+    position:absolute;
+    left:0;
+    top:0;
+  }
 }
 
 
@@ -590,6 +635,41 @@ body:has(#mobile-left-menu.opened) {
     width:REM(170px);
     flex-shrink: 0;
     margin-right:REM(16px);
+    @include display-xs(){
+      margin-right: 0;
+      width:0;
+      flex-shrink: initial;
+      .search-box {
+        display: none;
+        width:100%;
+        border:0;
+        padding:0;
+        height:auto;
+        background-color:transparent;
+        top:REM(175px / 3);
+        &.open {
+          display: block;
+          z-index: 98;
+        }
+        .link {
+          display: none;
+          width:0;
+          height:0;
+        }
+        .search-form {
+          margin-top:0;
+          .input {
+            border-radius: 0;
+            border:0;
+            border-top:REM(3px / 3) solid #02256c;
+            border-bottom:REM(3px / 3) solid #02256c;
+          }
+        }
+      }
+      .menu-list {
+        display: none;
+      }
+    }
   }
 
   .page-contents {

src/scss/components/_breadcrumbs.scss

@@ -29,4 +29,25 @@
       }
     }
   }
+
+  @include display-xs(){
+    padding : 0;
+    ol {
+      li {
+        a,span {
+
+          font-size:REM(22px / 3);
+        }
+
+        & + li {
+          a, span {
+            &:before {
+              font-size:REM(22px / 3);
+              margin:0 REM(12px / 3);
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/scss/components/_contents_box.scss

@@ -18,4 +18,19 @@
       line-height:1em;
     }
   }
+
+  @include display-xs(){
+    border-radius:REM(30px / 3);
+    padding:REM(32px / 3) REM(45px / 3);
+    margin:0 0 REM(60px /3) 0;
+
+    .contents-header {
+      border-bottom:2px solid #02256c;
+      padding:REM(10px) 0;
+
+      .contents-title {
+        font-size:REM(39px / 3);
+      }
+    }
+  }
 }

src/scss/components/_pagination.scss

@@ -7,6 +7,11 @@
     display:flex;
     justify-content: center;
     align-items: center;
+    @include display-xs(){
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-bottom:REM(45px / 3);
+    }
 
     li {
       a, span {
@@ -20,6 +25,11 @@
         background-color:transparent;
         transition: color .3s ease, background-color .3s ease;
         cursor:pointer;
+        @include display-xs(){
+          width:REM(60px / 3);
+          height:REM(60px / 3);
+          font-size:REM(30px / 3);
+        }
       }
 
       &.active,

src/scss/pages/_lists.scss

@@ -19,6 +19,15 @@
         height:100%;
         display:block;
         object-fit: cover;
+
+      }
+
+      @include display-xs(){
+        width: 100%;
+        height: fit-content;
+        .thumbnail-img {
+          object-fit: initial;
+        }
       }
     }
   }
@@ -42,6 +51,14 @@
           text-decoration: underline;
         }
       }
+
+      @include display-xs(){
+        font-size:REM(36px / 3);
+        margin-bottom:REM(12px / 3);
+        white-space: initial;
+        word-wrap: break-word;
+        word-break: keep-all;
+      }
     }
 
 
@@ -86,6 +103,10 @@
           font-size:REM(14px);
           color:#959595;
           font-weight:500;
+          @include display-xs(){
+            font-size:REM(28px / 3);
+            line-height:1;
+          }
         }
       }
     }
@@ -117,6 +138,23 @@
           line-height:1.28em;
         }
       }
+
+      @include display-xs(){
+        flex-direction: column;
+        padding:REM(20px / 3) 0;
+        .thumbnail {
+          width: 100%;
+          margin-right:0;
+        }
+        .item-content {
+          .item-summary {
+            font-size:REM(28px / 3);
+            height: 1.28em * 4;
+            -webkit-line-clamp: 4;
+            line-height:1.28em;
+          }
+        }
+      }
     }
   }
 
@@ -139,6 +177,24 @@
           font-size:REM(20px);
         }
       }
+
+      @include display-xs(){
+        width:100%;
+        padding:REM(15px / 3) REM(20px / 3);
+        border-bottom: 1px solid #c2c2c2;
+        margin-bottom:REM(30px / 3);
+        .thumbnail{
+          width:100%;
+          height:auto;
+        }
+
+        .item-content {
+          .item-title{
+            font-size:REM(33px / 3);
+            margin-bottom:REM(12px / 3);
+          }
+        }
+      }
     }
   }
 
@@ -172,6 +228,28 @@
         }
       }
     }
+
+    @include display-xs(){
+      margin:0;
+      .item {
+        width:100%;
+        padding:REM(20px / 3) 0;
+        border-bottom: 1px solid #c2c2c2;
+        margin-bottom:REM(30px / 3);
+        .thumbnail {
+          width:100%;
+          height:auto;
+        }
+        .item-content {
+          .item-title{
+            font-size:REM(33px / 3);
+            margin-bottom:REM(12px / 3);
+            white-space:initial;
+            word-break: keep-all;
+          }
+        }
+      }
+    }
   }
 
   &.clips {
@@ -202,6 +280,34 @@
         line-height:1.28em;
       }
     }
+    @include display-xs(){
+      margin:0 0 REM(30px / 3) 0;
+      .item {
+        width:100%;
+        padding:REM(15px / 3) REM(20px / 3);
+        border-bottom: 1px solid #c2c2c2;
+        .item-title{
+          margin-bottom:REM(12px / 3);
+          a {
+            > br {
+              display: none;
+            }
+          }
+        }
+        .thumbnail{
+          width:100%;
+          height:auto;
+        }
+        .item-summary {
+          font-size:REM(30px / 3);
+          a {
+            > br {
+              display: none;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -257,4 +363,35 @@
       }
     }
   }
+
+  @include display-xs(){
+    padding:REM(20px / 3);
+    margin:REM(12px / 3) 0 REM(25px / 3);
+    border-radius:REM(15px / 3);
+    flex-direction: column;
+    .tag-title {
+      padding-left:0;
+      font-size:REM(39px / 3);
+    }
+    .tag-list {
+      margin:REM(-3px / 3);
+      flex:1;
+      min-width:0;
+      display:flex;
+      flex-wrap:wrap;
+
+      li {
+        padding:REM(6px / 3);
+
+        a {
+          height:REM(45px / 3);
+          border-radius:REM(20px / 3);
+          background-color:#ffffff;
+          color:#464646;
+          font-size:REM(27px / 3);
+          padding:0 REM(27px / 3);
+        }
+      }
+    }
+  }
 }

src/scss/pages/main.scss

@@ -25,7 +25,12 @@
     .line-01 {
       width:REM(169px);
       @include display-xs(){
-        display: none;
+        #nav {
+          .menu-list,
+          .family-list {
+            display: none;
+          }
+        }
       }
     }
     .line-02 {