board 상세 완료

dist/assets/css/style.css

@@ -2787,10 +2787,10 @@ html {
     padding: 0;
   }
   .breadcrumb ol li a, .breadcrumb ol li span {
-    font-size: 0.4583333333rem;
+    font-size: 0.625rem;
   }
   .breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
-    font-size: 0.4583333333rem;
+    font-size: 0.625rem;
     margin: 0 0.25rem;
   }
 }
@@ -3736,6 +3736,60 @@ html {
     line-height: 1.28em;
   }
 }
+.common-list.news.inner {
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 0.625rem 0;
+  padding-bottom: 1.875rem;
+}
+.common-list.news.inner .item {
+  width: 50%;
+  padding: 0.625rem 0.9375rem;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #c2c2c2;
+}
+.common-list.news.inner .item .thumbnail {
+  width: 6.25rem;
+  height: 6.25rem;
+  margin: 0 auto 0.625rem;
+  flex-shrink: 0;
+}
+.common-list.news.inner .item .item-content {
+  padding-left: 0.9375rem;
+}
+.common-list.news.inner .item .item-content .item-title {
+  font-size: 0.9375rem;
+  white-space: initial;
+}
+@media screen and (max-width: 768px) {
+  .common-list.news.inner .item {
+    width: 100%;
+    padding: 0.25rem 0.3125rem;
+    -webkit-display: flex;
+    display: -ms-flex;
+    display: flex;
+    flex-direction: row;
+  }
+  .common-list.news.inner .item .thumbnail {
+    width: 2.5rem;
+    height: 1.6666666667rem;
+    margin: 0;
+    flex-shrink: 0;
+  }
+  .common-list.news.inner .item .item-content {
+    padding-left: 0.625rem;
+  }
+  .common-list.news.inner .item .item-content .item-title {
+    font-size: 0.4375rem;
+    white-space: initial;
+    margin-bottom: 0;
+  }
+}
 .common-list.toons {
   display: flex;
   flex-wrap: wrap;
@@ -3768,6 +3822,46 @@ html {
     margin-bottom: 0.25rem;
   }
 }
+.common-list.toons.inner .item {
+  width: 50%;
+  padding: 0.625rem 0.9375rem;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+.common-list.toons.inner .item .thumbnail {
+  width: 6.25rem;
+  height: 6.25rem;
+  margin: 0 auto 0.625rem;
+  flex-shrink: 0;
+}
+.common-list.toons.inner .item .item-content {
+  padding-left: 0.9375rem;
+}
+.common-list.toons.inner .item .item-content .item-title {
+  font-size: 0.9375rem;
+  white-space: initial;
+}
+@media screen and (max-width: 768px) {
+  .common-list.toons.inner .item {
+    width: 100%;
+    padding: 0.25rem 0.3125rem;
+  }
+  .common-list.toons.inner .item .thumbnail {
+    width: 3.125rem;
+    height: 3.125rem;
+    margin: 0;
+    flex-shrink: 0;
+  }
+  .common-list.toons.inner .item .item-content {
+    padding-left: 0.625rem;
+  }
+  .common-list.toons.inner .item .item-content .item-title {
+    font-size: 0.4375rem;
+    white-space: initial;
+  }
+}
 .common-list.shorts {
   margin: 0 -0.25rem;
   display: flex;
@@ -3815,6 +3909,56 @@ html {
     word-break: keep-all;
   }
 }
+.common-list.shorts.inner {
+  margin-top: 0;
+}
+.common-list.shorts.inner .item {
+  width: 50%;
+  padding: 0.625rem 0.9375rem;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+.common-list.shorts.inner .item .thumbnail {
+  width: 5.25rem;
+  height: 7.875rem;
+  margin: 0;
+  flex-shrink: 0;
+}
+.common-list.shorts.inner .item .item-content {
+  padding-left: 0.9375rem;
+}
+.common-list.shorts.inner .item .item-content .item-title {
+  font-size: 0.9375rem;
+  white-space: initial;
+  margin-bottom: 0;
+}
+.common-list.shorts.inner .item .item-content .item-title br {
+  display: none;
+}
+@media screen and (max-width: 768px) {
+  .common-list.shorts.inner .item {
+    width: 100%;
+    padding: 0.25rem 0.3125rem;
+  }
+  .common-list.shorts.inner .item .thumbnail {
+    width: 1.75rem;
+    height: 2.625rem;
+    margin: 0;
+    flex-shrink: 0;
+  }
+  .common-list.shorts.inner .item .item-content {
+    padding-left: 0.625rem;
+  }
+  .common-list.shorts.inner .item .item-content .item-title {
+    font-size: 0.4375rem;
+    white-space: initial;
+  }
+  .common-list.shorts.inner .item .item-content .item-summary {
+    font-size: 0.375rem;
+  }
+}
 .common-list.clips {
   display: flex;
   flex-wrap: wrap;
@@ -3866,6 +4010,61 @@ html {
     display: none;
   }
 }
+.common-list.clips.inner {
+  margin-top: 0;
+}
+.common-list.clips.inner .item {
+  width: 50%;
+  padding: 0.625rem 0.9375rem;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+.common-list.clips.inner .item .thumbnail {
+  width: 7.5rem;
+  height: 5rem;
+  margin: 0;
+  flex-shrink: 0;
+}
+.common-list.clips.inner .item .item-content {
+  padding-left: 0.9375rem;
+}
+.common-list.clips.inner .item .item-content .item-title {
+  font-size: 0.9375rem;
+  white-space: initial;
+}
+.common-list.clips.inner .item .item-content .item-title br {
+  display: none;
+}
+.common-list.clips.inner .item .item-content .item-summary {
+  font-size: 0.75rem;
+}
+.common-list.clips.inner .item .item-content .item-summary br {
+  display: none;
+}
+@media screen and (max-width: 768px) {
+  .common-list.clips.inner .item {
+    width: 100%;
+    padding: 0.25rem 0.3125rem;
+  }
+  .common-list.clips.inner .item .thumbnail {
+    width: 3.75rem;
+    height: 2.5rem;
+    margin: 0;
+    flex-shrink: 0;
+  }
+  .common-list.clips.inner .item .item-content {
+    padding-left: 0.625rem;
+  }
+  .common-list.clips.inner .item .item-content .item-title {
+    font-size: 0.4375rem;
+    white-space: initial;
+  }
+  .common-list.clips.inner .item .item-content .item-summary {
+    font-size: 0.375rem;
+  }
+}
 
 .tag-container {
   width: 100%;
@@ -3943,3 +4142,414 @@ html {
     padding: 0 0.5625rem;
   }
 }
+
+#board .page-contents {
+  padding: 1.875rem;
+  background-color: #fff;
+  margin-bottom: 1.875rem;
+  border-radius: 1.25rem;
+}
+#board .page-contents .contents-header {
+  width: 100%;
+  padding-bottom: 0.9375rem;
+  border-bottom: 0.0625rem solid #02256c;
+}
+#board .page-contents .contents-header .contents-title {
+  font-size: 1.875rem;
+  margin-bottom: 0.625rem;
+}
+#board .page-contents .contents-header .page-header-info {
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+#board .page-contents .contents-header .page-header-info .date {
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+#board .page-contents .contents-header .page-header-info .date > dd {
+  color: #898989;
+  font-size: 0.9375rem;
+}
+#board .page-contents .list-detail-sns {
+  margin-left: auto;
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+}
+#board .page-contents .list-detail-sns > a {
+  width: 1.875rem;
+  height: 1.875rem;
+  margin: 0 0.1875rem;
+  background-size: cover;
+  text-indent: -99999px;
+  overflow: hidden;
+  display: block;
+}
+#board .page-contents .list-detail-sns > a.sns-facebook {
+  background-color: transparent;
+  background-image: url("../images/common/detail-sns01.png");
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+}
+#board .page-contents .list-detail-sns > a.sns-twitter {
+  background-color: transparent;
+  background-image: url("../images/common/detail-sns02.png");
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+}
+#board .page-contents .list-detail-sns > a.sns-kakaotalk {
+  background-color: transparent;
+  background-image: url("../images/common/detail-sns03.png");
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+}
+#board .page-contents .list-detail-sns > a.url-copy {
+  background-color: transparent;
+  background-image: url("../images/common/detail-sns04.png");
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: center;
+}
+#board .page-contents .detail-contents {
+  width: 100%;
+  padding: 0.625rem;
+}
+#board .page-contents .detail-contents p {
+  width: 100%;
+  box-sizing: border-box;
+}
+#board .page-contents .detail-contents img {
+  max-width: 100%;
+  height: auto !important;
+}
+#board .page-contents .hash-tag {
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 1.875rem;
+}
+#board .page-contents .hash-tag > li {
+  padding: 0 0.625rem 0 1.25rem;
+  height: 2.125rem;
+  line-height: 2rem;
+  border: 0.0625rem solid #e1e1e1;
+  margin: 0 0.3125rem 0.3125rem 0;
+  font-weight: 300;
+  font-size: 0.9375rem;
+  position: relative;
+  color: #666;
+}
+#board .page-contents .hash-tag > li:before {
+  content: "#";
+  position: absolute;
+  left: 0.5rem;
+  top: 0;
+}
+#board .page-contents .page-list {
+  margin-top: 0.625rem;
+  padding-top: 0.625rem;
+  border-top: 0.0625rem solid #999;
+}
+#board .page-contents .page-list .title {
+  font-size: 1.5rem;
+  margin-bottom: 0.625rem;
+}
+#board .page-contents .video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  margin-top: 0.625rem;
+}
+#board .page-contents .video-container.shorts {
+  width: 56.25%;
+  padding-bottom: 100%;
+  margin: 0.625rem auto 0 auto;
+}
+#board .page-contents .video-container iframe,
+#board .page-contents .video-container object,
+#board .page-contents .video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+#board .page-contents .btn-list-prev {
+  width: 11.25rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  background-color: #02256c;
+  border: none;
+  color: #fff;
+  display: block;
+  font-size: 1rem;
+  margin: 1.875rem auto 0 auto;
+  text-align: center;
+}
+@media screen and (max-width: 768px) {
+  #board .page-contents {
+    padding: 0.625rem;
+    border-radius: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+  #board .page-contents .contents-header {
+    padding-bottom: 0.625rem;
+  }
+  #board .page-contents .contents-header .contents-title {
+    font-size: 0.75rem;
+    margin-bottom: 0.3125rem;
+  }
+  #board .page-contents .contents-header .page-header-info .date > dd {
+    font-size: 0.4166666667rem;
+  }
+  #board .page-contents .list-detail-sns > a {
+    width: 0.9375rem;
+    height: 0.9375rem;
+    margin: 0 0.1875rem;
+  }
+  #board .page-contents .detail-contents {
+    padding: 0.625rem;
+  }
+  #board .page-contents .detail-contents *:not(.video-container.shorts) {
+    font-size: 0.5rem !important;
+    margin-left: 0 !important;
+    text-indent: 0 !important;
+    word-break: initial !important;
+  }
+  #board .page-contents .hash-tag {
+    -webkit-display: flex;
+    display: -ms-flex;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 0.625rem;
+  }
+  #board .page-contents .hash-tag > li {
+    padding: 0 0.2083333333rem 0 0.625rem;
+    height: 1.25rem;
+    line-height: 1.2083333333rem;
+    border: 0.0625rem solid #e1e1e1;
+    margin: 0 0.1041666667rem 0.1041666667rem 0;
+    font-size: 0.5rem;
+  }
+  #board .page-contents .hash-tag > li:before {
+    left: 0.1875rem;
+  }
+  #board .page-contents .page-list {
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+    border-top: 0.0625rem solid #999;
+  }
+  #board .page-contents .page-list .title {
+    font-size: 0.625rem;
+    margin-bottom: 0.625rem;
+  }
+  #board .page-contents .video-container {
+    margin-top: 0.625rem;
+  }
+  #board .page-contents .video-container.shorts {
+    width: 9.1666666667rem;
+    height: 17.9166666667rem;
+    padding-bottom: 0;
+    margin: 0.625rem auto 0 auto;
+  }
+  #board .page-contents .btn-list-prev {
+    width: 6.25rem;
+    height: 1.25rem;
+    line-height: 1.25rem;
+    font-size: 0.5625rem;
+    margin: 1.25rem auto 0 auto;
+    text-align: center;
+  }
+}
+#board .form-content-wrap {
+  width: 100%;
+  border: 0.0625rem solid #b3b3ca;
+  margin-top: 1.5625rem;
+  padding: 1.25rem 0.625rem;
+}
+#board .form-content-wrap .form-title {
+  width: 100%;
+  padding: 0 0 0.9375rem 0;
+  font-size: 1.125rem;
+  line-height: 1.3;
+  border-bottom: 0.0625rem solid #d7d7d7;
+  word-break: break-all;
+  text-align: center;
+}
+#board .form-content-wrap .form-box {
+  margin-top: 0.9375rem;
+}
+#board .form-content-wrap .form-box .question-title {
+  font-size: 0.875rem;
+  padding: 0.625rem 0;
+}
+#board .form-content-wrap .form-box .form-radio-box {
+  -webkit-display: flex;
+  display: -ms-flex;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 1.875rem;
+}
+#board .form-content-wrap .form-box .form-radio-box.other {
+  padding: 0;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item {
+  display: inline-block;
+  white-space: nowrap;
+  position: relative;
+  font-size: 0.8125rem;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked,
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label,
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label {
+  position: relative;
+  padding-left: 1.75rem;
+  cursor: pointer;
+  line-height: 1.25rem;
+  display: inline-block;
+  color: #666;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before,
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 0.0625rem solid #ddd;
+  border-radius: 100%;
+  background: #fff;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after,
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #02256c;
+  position: absolute;
+  top: 0.15625rem;
+  left: 0.15625rem;
+  border-radius: 100%;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+#board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+#board .form-content-wrap .form-box .form-radio-box textarea {
+  width: 100%;
+  min-height: 1.875rem;
+  border: 0.0625rem solid #ebebeb;
+  font-size: 0.8125rem;
+  padding: 0.3125rem;
+}
+#board .form-content-wrap .form-box .textarea-num {
+  width: 100%;
+  text-align: right;
+  color: #444;
+  font-size: 0.75rem;
+}
+#board .form-content-wrap .form-box .textarea-num span#byteInfo {
+  color: #ff6706;
+}
+#board .form-content-wrap .form-btn {
+  width: 6.25rem;
+  height: 1.875rem;
+  background-color: #02256c;
+  border: none;
+  color: #fff;
+  display: block;
+  font-size: 0.75rem;
+  margin: 0.9375rem auto 0 auto;
+  line-height: 1;
+}
+@media screen and (max-width: 768px) {
+  #board .form-content-wrap {
+    margin-top: 0.5208333333rem;
+    padding: 0.625rem 0.25rem;
+  }
+  #board .form-content-wrap .form-title {
+    padding: 0 0 0.3125rem 0;
+    font-size: 0.625rem;
+  }
+  #board .form-content-wrap .form-box {
+    margin-top: 0.625rem;
+  }
+  #board .form-content-wrap .form-box .question-title {
+    font-size: 0.5625rem;
+    padding: 0.2083333333rem 0;
+  }
+  #board .form-content-wrap .form-box .form-radio-box {
+    padding: 0;
+  }
+  #board .form-content-wrap .form-box .form-radio-box.other {
+    padding: 0;
+  }
+  #board .form-content-wrap .form-box .form-radio-box .radio-item {
+    font-size: 0.4375rem;
+  }
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label,
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label {
+    padding-left: 0.7916666667rem;
+    line-height: 0.625rem;
+  }
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:before,
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:before {
+    width: 0.6666666667rem;
+    height: 0.6666666667rem;
+    border: 0.0625rem solid #ddd;
+  }
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:checked + label:after,
+  #board .form-content-wrap .form-box .form-radio-box .radio-item [type=radio]:not(:checked) + label:after {
+    width: 0.5rem;
+    height: 0.5rem;
+    top: 0.0833333333rem;
+    left: 0.0833333333rem;
+  }
+  #board .form-content-wrap .form-box .form-radio-box textarea {
+    width: 100%;
+    min-height: 2.5rem;
+    border: 0.0625rem solid #ebebeb;
+    font-size: 0.5625rem;
+    padding: 0.1875rem;
+  }
+  #board .form-content-wrap .form-box .textarea-num {
+    width: 100%;
+    font-size: 0.4375rem;
+  }
+  #board .form-content-wrap .form-box .textarea-num span#byteInfo {
+    color: #ff6706;
+  }
+  #board .form-content-wrap .form-btn {
+    width: 3.75rem;
+    height: 0.9375rem;
+    display: block;
+    font-size: 0.4375rem;
+    margin: 0.3125rem auto 0 auto;
+    line-height: 1;
+  }
+}

dist/assets/js/common.min.js

@@ -1,2 +1,2 @@
-$(function(){$('[data-button="toggle-menu"]').click(function(e){e.preventDefault(),$("#mobile-left-menu").toggleClass("opened")})});
+$(function(){$('[data-button="toggle-menu"]').click(function(e){e.preventDefault(),$("#mobile-left-menu").toggleClass("opened")}),$('[data-button="share-sns"]').click(function(e){e.preventDefault(),console.log(1);var t=$(this).attr("data-type"),o=$(this).attr("data-image"),a=$(this).attr("data-title"),n=$(this).attr("data-url");if(n&&t&&a){if("kakaotalk"===t)return Kakao.init("3bec2345a029972a68f8279879478ba7"),void Kakao.Link.createDefaultButton({container:"#npsShKakaoTalk",objectType:"feed",content:{title:a,description:"출처 : 국민연금 온에어",imageUrl:o,imageWidth:620,imageHeight:350,link:{mobileWebUrl:document.URL,webUrl:document.URL}},buttons:[{title:"콘텐츠 보기",link:{mobileWebUrl:document.URL,webUrl:document.URL}}]});if("url"!==t){switch(t){case"twitter":n="//twitter.com/intent/tweet?text="+encodeURIComponent(a)+"&url="+encodeURIComponent(n);break;case"telegram":n="https://telegram.me/share/url?url="+encodeURIComponent(n);break;case"facebook":n="//www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(n)+"&t="+a;break;case"kakaostory":n="https://story.kakao.com/share?url="+encodeURIComponent(n);break;case"naverblog":n="http://share.naver.com/web/shareView.nhn?url="+encodeURIComponent(n)+"&title="+encodeURIComponent(a);break;case"naverband":n="http://www.band.us/plugin/share?body="+encodeURIComponent(a)+"%0A"+encodeURIComponent(n);break;case"google":n="//plus.google.com/share?url="+n;break;case"pinterest":n="//www.pinterest.com/pin/create/button/?url="+n+"&media="+o+"&description="+encodeURIComponent(a)}window.open(n,"","width=600,height=300,top=100,left=100,scrollbars=yes")}else{var r=$("<input>").attr("data-temp","clipboard");$("body").append(r),r.val(n).select(),$("#textbox-url").select();try{document.execCommand("copy");alert("클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요."),r.remove()}catch(e){alert("이 브라우저는 지원하지 않습니다."),r.remove()}}}})});
 //# sourceMappingURL=common.min.js.map

dist/clips.html → dist/clips/clips.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>영상갤러리 - 동영상</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
+    <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="./assets/js/common.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script src="..//assets/js/common.min.js"></script>
 </head>
 <body>
 <!--S: 숨김 메뉴-->
@@ -94,11 +95,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +124,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -180,8 +181,8 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><a href="../index.html">홈</a></li>
+            <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>동영상</span></li>
         </ol>
     </nav>
@@ -199,13 +200,13 @@
 </div>
         <ul class="menu-list">
     <li class="item ">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class=""><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -215,10 +216,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last   first active  ">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class="active"><a href="./clips.html">동영상</a></li>
-            <li class=""><a href="./shorts.html">Shorts</a></li>
+            <li class="active"><a href="../clips/clips.html">동영상</a></li>
+            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>
@@ -235,13 +236,13 @@
             <div class="tag-container">
                 <h4 class="tag-title">모아보기</h4>
                 <ul class="tag-list">
-                    <li class="active"><a href="">#콕콕연금뉴스</a></li>
-                    <li><a href="">#연금이랑 알아볼게</a></li>
-                    <li><a href="">#캠페인 영상</a></li>
-                    <li><a href="">#광고</a></li>
-                    <li><a href="">#연금연금</a></li>
-                    <li><a href="">#연금연금</a></li>
-                    <li><a href="">#연금연금</a></li>
+                    <li class="active"><a href="detail.html">#콕콕연금뉴스</a></li>
+                    <li><a href="detail.html">#연금이랑 알아볼게</a></li>
+                    <li><a href="detail.html">#캠페인 영상</a></li>
+                    <li><a href="detail.html">#광고</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
                 </ul>
             </div>
 
@@ -250,17 +251,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
+                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
                         </p>
                     </div>
 
@@ -269,17 +270,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-02.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">국민연금, 2024년 1분기 말<br>
+                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
                                기준 5.82%의 운용수익률..</a>
                         </p>
                     </div>
@@ -289,17 +290,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-03.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금 기준소득월액 <br>
                                 변경!
                             </a>
@@ -311,17 +312,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-04.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 실업크레딧을 통한 <br>가입기간 확대 지원
                             </a>
                         </p>
@@ -332,14 +333,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">스톱모션으로 알아보는 <br>
+                            <a href="detail.html">스톱모션으로 알아보는 <br>
                                 국민연금 '크레딧 제도'</a>
                         </h4>
                     </div>
@@ -349,14 +350,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 ⭐미션! 2023 국민연금<br>
                                 레벨업⭐
                             </a>
@@ -368,14 +369,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-07.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-07.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금에 대한 진실<br>
                                 파헤치기!
                             </a>
@@ -387,19 +388,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-08.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-08.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [국민연금공단X큰별쌤..]
                             </a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 조선시대에도 연금이 <br>
                                 있었다?!
                             </a>
@@ -411,19 +412,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-09.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-09.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(vlog)]
                             </a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 인천국제공항에도 <br>
                                 국민연금공단이!?
                             </a>
@@ -435,19 +436,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-10.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-10.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금 직장인 브이로그.
                             </a>
                         </h4>
 
-                            <a href="" class="item-summary">
+                            <a href="detail.html" class="item-summary">
                                 오늘도 뽀주임은 열일 중 <br>
                                 다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
                             </a>
@@ -460,18 +461,18 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-11.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-11.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="">
+                        <a class="item-summary" href="detail.html">
                                 국민연금공단
                                 장애인지원센터는 무슨 일이?
                         </a>
@@ -482,18 +483,18 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-12.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-12.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="">
+                        <a class="item-summary" href="detail.html">
                             국민연금공단
                             장애인지원센터는 무슨 일
                         </a>

dist/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
     <script src="./assets/js/common.min.js"></script>
 </head>
 <body>
@@ -94,11 +95,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +124,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -192,13 +193,13 @@
 </div>
                 <ul class="menu-list">
     <li class="item ">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class=""><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -208,10 +209,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  ">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class=""><a href="./clips.html">동영상</a></li>
-            <li class=""><a href="./shorts.html">Shorts</a></li>
+            <li class=""><a href="../clips/clips.html">동영상</a></li>
+            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>

dist/news.html → dist/news/news.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>국민염금 소식 - 새 소식</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
+    <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="./assets/js/common.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script src="..//assets/js/common.min.js"></script>
 </head>
 <body>
 <!--S: 숨김 메뉴-->
@@ -94,11 +95,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +124,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -180,8 +181,8 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><a href="../index.html">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>새소식</span></li>
         </ol>
     </nav>
@@ -199,13 +200,13 @@
 </div>
         <ul class="menu-list">
     <li class="item  first active  ">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class="active"><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class="active"><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -215,10 +216,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  ">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class=""><a href="./clips.html">동영상</a></li>
-            <li class=""><a href="./shorts.html">Shorts</a></li>
+            <li class=""><a href="../clips/clips.html">동영상</a></li>
+            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>
@@ -236,14 +237,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-01.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
+                            <a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
                         </h4>
                         <p class="item-summary">
                             (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
@@ -261,14 +262,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-02.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
+                            <a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
                         </h4>
                         <p class="item-summary">
                             배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
@@ -286,14 +287,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-03.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
+                            <a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
                         </h4>
                         <p class="item-summary">
                             "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
@@ -311,14 +312,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-04.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
+                            <a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
                         </h4>
                         <p class="item-summary">
                             배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
@@ -336,14 +337,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-05.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
+                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
                         </h4>
                         <p class="item-summary">
                             가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
@@ -358,8 +359,6 @@
 
                 </li>
 
-
-
             </ul>
         </div>
 

dist/shorts.html → dist/shorts/shorts.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>영상갤러리 - Shorts</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
+    <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="./assets/js/common.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script src="..//assets/js/common.min.js"></script>
 </head>
 <body>
 <!--S: 숨김 메뉴-->
@@ -94,11 +95,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +124,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -180,8 +181,8 @@
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><a href="detail.html">홈</a></li>
+            <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
     </nav>
@@ -199,13 +200,13 @@
 </div>
         <ul class="menu-list">
     <li class="item ">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class=""><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class=""><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -215,10 +216,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last   first active  ">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class=""><a href="./clips.html">동영상</a></li>
-            <li class="active"><a href="./shorts.html">Shorts</a></li>
+            <li class=""><a href="../clips/clips.html">동영상</a></li>
+            <li class="active"><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>
@@ -235,26 +236,26 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-01.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
+                            <a href="detail.html">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
                         </h4>
                     </div>
                 </li>
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-02.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금은 도대체 왜?
+                            <a href="detail.html">국민연금은 도대체 왜?
                                 국가에서 운영하는거죠?</a>
                         </h4>
                     </div>
@@ -262,13 +263,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-03.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금공단 쉽게
+                            <a href="detail.html">국민연금공단 쉽게
                                 취업하는 꿀팁?! </a>
                         </h4>
                     </div>
@@ -276,13 +277,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-04.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 🏠 Home🏠 댄스챌린지</a>
                         </h4>
                     </div>
@@ -290,13 +291,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">199X년생부터 국민연금
+                            <a href="detail.html">199X년생부터 국민연금
                                 을 하나도 못 받는다고?!</a>
                         </h4>
                     </div>
@@ -304,13 +305,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">유럽 vs 우리나라
+                            <a href="detail.html">유럽 vs 우리나라
                                 국민연금 급여 차이는?</a>
                         </h4>
                     </div>
@@ -318,13 +319,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-07.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-07.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 기금수익률을
+                            <a href="detail.html">국민연금 기금수익률을
                                 더 높일 수 있는 방법은? </a>
                         </h4>
                     </div>
@@ -332,13 +333,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-08.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-08.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 기금투자
+                            <a href="detail.html">국민연금 기금투자
                                 믿을 수 있나요? </a>
                         </h4>
                     </div>
@@ -346,13 +347,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-09.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-09.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 💝사랑스러워 💝챌린지 </a>
                         </h4>
                     </div>
@@ -360,13 +361,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-10.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-10.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금! 부부 모두
+                            <a href="detail.html">국민연금! 부부 모두
                                 가입하면? #Shorts
                             </a>
                         </h4>
@@ -375,13 +376,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-11.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-11.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 🥰날 바라바라봐🥰 챌린지
                             </a>
                         </h4>
@@ -390,13 +391,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-12.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-12.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 걱정🥰...은
+                            <a href="detail.html">국민연금 걱정🥰...은
                                 No!2023년 말 기준
                             </a>
                         </h4>

dist/toons/detail.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <title>국민염금 소식 - 국민연금 인스타 툰 상세</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script src="..//assets/js/common.min.js"></script>
+</head>
+<body>
+<!--S: 숨김 메뉴-->
+<ul class="sr-only sr-only-focusable">
+    <li><a href="#contents">컨텐츠 바로가기</a></li>
+    <li><a href="#nav">메뉴 바로가기</a></li>
+</ul>
+<!--E: 숨김 메뉴-->
+
+<!--S: 헤더 영역-->
+<header id="header">
+    <div class="container">
+        <div class="logo-box">
+            <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" id="toggle-search">검색 메뉴 토글</button>
+</header>
+
+<aside id="mobile-left-menu">
+    <header class="mobile-header">
+        <span class="m-button"></span>
+        <a href="/" class="mobile-logo">국민연금 ON AIR</a>
+        <button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
+    </header>
+    <nav class="mobile-nav">
+        <ul>
+            <li>
+                <a href="" class="depth-1 active">국민연금 소식</a>
+                <ul class="sub-menu open">
+                    <li><a href="../news/news.html">새소식</a></li>
+                    <li><a href="">ESG</a></li>
+                    <li><a href="">이벤트</a></li>
+                    <li><a href="">대학생 홍보대사</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="">국민연금 수기</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 제도</a>
+                <ul class="sub-menu">
+                    <li><a href="">제도 정보</a></li>
+                    <li><a href="">NPS 팩트체크</a></li>
+                    <li><a href="">연금 개혁</a></li>
+                    <li><a href="">국민연금 용어사전</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">국민연금 기금</a>
+                <ul class="sub-menu">
+                    <li><a href="">기금운용 현황</a></li>
+                    <li><a href="">기금운용 이슈</a></li>
+                    <li><a href="">전문가 시선</a></li>
+                </ul>
+            </li>
+            <li>
+                <a href="" class="depth-1">영상갤러리</a>
+                <ul class="sub-menu">
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
+                </ul>
+            </li>
+        </ul>
+        <a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
+    </nav>
+</aside>
+
+<script>
+    const mainMenuLinks = document.querySelectorAll('.depth-1');
+
+    mainMenuLinks.forEach(link => {
+        link.addEventListener('click', function(event) {
+            event.preventDefault(); // Prevent the default link behavior
+
+            // Close all other sub-menus
+            mainMenuLinks.forEach(otherLink => {
+                if (otherLink !== link) {
+                    const otherSubMenu = otherLink.nextElementSibling;
+                    otherSubMenu.classList.remove('open');
+                    otherLink.classList.remove('active');
+                }
+            });
+
+            // Toggle the clicked sub-menu
+            const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
+
+            if (!subMenu.classList.contains('open')) {
+                subMenu.classList.add('open');
+                this.classList.add('active');
+            } else {
+                subMenu.classList.remove('open');
+                this.classList.remove('active');
+            }
+        });
+    });
+
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const toggleButton = document.getElementById('toggle-search');
+        const form = document.querySelector('.search-box');
+
+        toggleButton.addEventListener('click', function() {
+            form.classList.toggle('open');
+        });
+    });
+</script>
+
+<!--S: 컨텐츠 영역-->
+<section id="contents">
+
+
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
+            <li><span>국민연금 인스타 툰</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="board">
+
+    <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>
+    </form>
+</div>
+        <ul class="menu-list">
+    <li class="item  first active  ">
+        <a href="../news/news.html" class="link">국민연금 소식</a>
+        <ul class="submenu">
+            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class="active"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
+        </ul>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 제도</a>
+    </li>
+    <li class="item">
+        <a href="#" class="link">국민연금 기금</a>
+    </li>
+    <li class="item last  ">
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
+        <ul class="submenu">
+            <li class=""><a href="../clips/clips.html">동영상</a></li>
+            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
+        </ul>
+    </li>
+</ul>
+    </aside>
+
+    <main class="page-contents">
+        <div class="contents-header">
+            <header class="page-header">
+                <h2 class="contents-title">신입사원의 귀여운 실수?</h2>
+            </header>
+            <div class="page-header-info">
+                <dl class="date">
+                    <dt class="sr-only">게시글 날짜</dt>
+                    <dd>24-08-02</dd>
+                </dl>
+                <div class="list-detail-sns">
+                    <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
+                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
+                    <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
+                    <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
+                </div>
+            </div>
+        </div>
+        <div class="detail-contents">
+            <p>
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4lMjhHOCVEQkklOUIlRkQlM0YlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-1.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4rRiUzQyVEQU0lOTQlRkQxJThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-2.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4OG0rTSUzRiVEQk8lOUMlRjklMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-3.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmklMkJINiVEOSU0MCU5OCVGODglOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-4.JPG" ><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RGslMjlGJTNCJUQ3QSU5RiVGNyUyNiVDOSVCQyVGNA==" title="연대리(2024.8월) #1-5.JPG" ><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmguTCUzQSVEQk8lOTUlRkMlMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-6.JPG" sqeid="QE_172250019336033366"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Q24lMjhGJTNCJURDTCU5RCVGQSUzQSU4RCVBNiVFMyU5NA==" title="연대리(2024.8월) #1-7.JPG" sqeid="QE_17225001958714117"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmolMjhGJTNFJUQ2TSU5OSVGOTklOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-8.JPG" sqeid="QE_172250019868746529"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmYrTCUzRiVEOE4lOTklRkE4JThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-9.JPG" sqeid="QE_172250020124052912"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm0lMkJJOCVEN0ElOUYlRjklM0MlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-10.JPG" sqeid="QE_172250020476850890"><br style="clear:both;">&nbsp;
+            </p>
+            <ul class="hash-tag">
+                <li>국민연금</li>
+                <li>국민연금공단</li>
+                <li>사연툰</li>
+                <li>일상툰</li>
+                <li>연대리툰</li>
+            </ul>
+        </div>
+        <div class="page-list">
+            <h3 class="title">더 많은 [국민연금 인스타툰] 보기</h3>
+            <ul class="common-list toons inner">
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+
+        <div class="form-content-wrap">
+            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+            <!-- 폼 1 시작  -->
+            <div class="form">
+                <!-- 만족도 시작 -->
+                <div class="form-content-box">
+                    <div class="form-box">
+                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                        <div class="form-radio-box">
+                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
+                        </div>
+                    </div>
+
+                    <div class="form-box">
+                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                        <div class="form-radio-box">
+                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
+                        </div>
+                    </div>
+                </div>
+                <button class="form-btn">확인</button>
+                <!-- 만족도 끝 -->
+            </div>
+            <!-- 폼 1 끝  -->
+
+
+            <!-- 폼 2 시작  -->
+            <div class="form-02 cf">
+                <!-- 만족도 시작 -->
+                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+                    <div class="form-box">
+                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                        <div class="form-radio-box other">
+                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                        </div>
+                        <div class="textarea-num">
+                            <span id="byteInfo">0</span>
+                            / 400
+                            <span>byte</span>
+                        </div>
+                    </div>
+
+                </div>
+                <!-- 만족도 끝 -->
+
+                <button class="form-btn">확인</button>
+            </div>
+            <!-- 폼 2 끝  -->
+
+        </div>
+        <a href="toons.html" class="btn-list-prev">목록으로</a>
+    </main>
+</div>
+
+</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>

dist/toons.html → dist/toons/toons.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>국민염금 소식 - 국민연금 인스타 툰</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-    <link rel="stylesheet" href="./assets/css/style.min.css?v=240805">
+    <link rel="stylesheet" href="..//assets/css/style.min.css?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="./assets/js/common.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
+    <script src="..//assets/js/common.min.js"></script>
 </head>
 <body>
 <!--S: 숨김 메뉴-->
@@ -94,11 +95,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/toons.html">국민연금 인스타툰</a></li>
                     <li><a href="">국민연금 수기</a></li>
                 </ul>
             </li>
@@ -123,8 +124,8 @@
             <li>
                 <a href="" class="depth-1">영상갤러리</a>
                 <ul class="sub-menu">
-                    <li><a href="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>
@@ -177,11 +178,12 @@
 
 
 
+
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><a href="">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
     </nav>
@@ -199,13 +201,13 @@
 </div>
         <ul class="menu-list">
     <li class="item  first active  ">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class=""><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class="active"><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class=""><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class="active"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -215,10 +217,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  ">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class=""><a href="./clips.html">동영상</a></li>
-            <li class=""><a href="./shorts.html">Shorts</a></li>
+            <li class=""><a href="../clips/clips.html">동영상</a></li>
+            <li class=""><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>
@@ -234,13 +236,13 @@
             <ul class="common-list toons">
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -252,13 +254,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -270,13 +272,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -288,13 +290,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -306,13 +308,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -324,13 +326,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>

src/html/clips.html → src/html/clips/clips.html

@@ -1,11 +1,11 @@
-@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - 동영상"})
-@@include("./include/header.html")
+@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - 동영상", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../"})
 
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><a href="../index.html">홈</a></li>
+            <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>동영상</span></li>
         </ol>
     </nav>
@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("./include/search_box.html")
-        @@include("./include/left_menu.html", {"active": "clips", "subActive": "clips"})
+        @@include("../../html/include/search_box.html")
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
     </aside>
 
     <main class="page-contents">
@@ -29,13 +29,13 @@
             <div class="tag-container">
                 <h4 class="tag-title">모아보기</h4>
                 <ul class="tag-list">
-                    <li class="active"><a href="">#콕콕연금뉴스</a></li>
-                    <li><a href="">#연금이랑 알아볼게</a></li>
-                    <li><a href="">#캠페인 영상</a></li>
-                    <li><a href="">#광고</a></li>
-                    <li><a href="">#연금연금</a></li>
-                    <li><a href="">#연금연금</a></li>
-                    <li><a href="">#연금연금</a></li>
+                    <li class="active"><a href="detail.html">#콕콕연금뉴스</a></li>
+                    <li><a href="detail.html">#연금이랑 알아볼게</a></li>
+                    <li><a href="detail.html">#캠페인 영상</a></li>
+                    <li><a href="detail.html">#광고</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
+                    <li><a href="detail.html">#연금연금</a></li>
                 </ul>
             </div>
 
@@ -44,17 +44,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-01.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
+                            <a href="detail.html">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
                         </p>
                     </div>
 
@@ -63,17 +63,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-02.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">국민연금, 2024년 1분기 말<br>
+                            <a href="detail.html">국민연금, 2024년 1분기 말<br>
                                기준 5.82%의 운용수익률..</a>
                         </p>
                     </div>
@@ -83,17 +83,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-03.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금 기준소득월액 <br>
                                 변경!
                             </a>
@@ -105,17 +105,17 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-04.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[콕콕 연금뉴스]</a>
+                            <a href="detail.html">[콕콕 연금뉴스]</a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 실업크레딧을 통한 <br>가입기간 확대 지원
                             </a>
                         </p>
@@ -126,14 +126,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-05.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">스톱모션으로 알아보는 <br>
+                            <a href="detail.html">스톱모션으로 알아보는 <br>
                                 국민연금 '크레딧 제도'</a>
                         </h4>
                     </div>
@@ -143,14 +143,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-06.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 ⭐미션! 2023 국민연금<br>
                                 레벨업⭐
                             </a>
@@ -162,14 +162,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-07.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-07.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금에 대한 진실<br>
                                 파헤치기!
                             </a>
@@ -181,19 +181,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-08.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-08.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [국민연금공단X큰별쌤..]
                             </a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 조선시대에도 연금이 <br>
                                 있었다?!
                             </a>
@@ -205,19 +205,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-09.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-09.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(vlog)]
                             </a>
                         </h4>
                         <p class="item-summary">
-                            <a href="">
+                            <a href="detail.html">
                                 인천국제공항에도 <br>
                                 국민연금공단이!?
                             </a>
@@ -229,19 +229,19 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-10.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-10.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 국민연금 직장인 브이로그.
                             </a>
                         </h4>
 
-                            <a href="" class="item-summary">
+                            <a href="detail.html" class="item-summary">
                                 오늘도 뽀주임은 열일 중 <br>
                                 다시 돌아온 뽀주임의 다시 돌아온 뽀주임의
                             </a>
@@ -254,18 +254,18 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-11.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-11.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="">
+                        <a class="item-summary" href="detail.html">
                                 국민연금공단
                                 장애인지원센터는 무슨 일이?
                         </a>
@@ -276,18 +276,18 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/clips-12.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/clips-12.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">
+                            <a href="detail.html">
                                 [NPS 릴레이 브이로그(Vlog)]
                             </a>
                         </h4>
-                        <a class="item-summary" href="">
+                        <a class="item-summary" href="detail.html">
                             국민연금공단
                             장애인지원센터는 무슨 일
                         </a>
@@ -299,10 +299,10 @@
 
         </div>
 
-        @@include("./include/pagination.html")
+        @@include("../../html/include/pagination.html")
 
     </main>
 </div>
 
-@@include("./include/footer.html")
-@@include("./include/tail.html")
+@@include("../../html/include/footer.html")
+@@include("../../html/include/tail.html")

src/html/include/header.html

@@ -82,11 +82,11 @@
             <li>
                 <a href="" class="depth-1 active">국민연금 소식</a>
                 <ul class="sub-menu open">
-                    <li><a href="./news.html">새소식</a></li>
+                    <li><a href="../news/news.html">새소식</a></li>
                     <li><a href="">ESG</a></li>
                     <li><a href="">이벤트</a></li>
                     <li><a href="">대학생 홍보대사</a></li>
-                    <li><a href="./toons.html">국민연금 인스타툰</a></li>
+                    <li><a href="../toons/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="./clips.html">동영상</a></li>
-                    <li><a href="./shorts.html">Shorts</a></li>
+                    <li><a href="../clips/clips.html">동영상</a></li>
+                    <li><a href="../shorts/shorts.html">Shorts</a></li>
                 </ul>
             </li>
         </ul>

src/html/include/left_menu.html

@@ -1,12 +1,12 @@
 <ul class="menu-list">
     <li class="item @@if ( active === 'news' ) { first active  }">
-        <a href="./news.html" class="link">국민연금 소식</a>
+        <a href="../news/news.html" class="link">국민연금 소식</a>
         <ul class="submenu">
-            <li class="@@if(subActive === 'news') {active}"><a href="./news.html">새소식</a></li>
-            <li><a href="./news.html">ESG</a></li>
-            <li><a href="./toons.html">이벤트</a></li>
-            <li><a href="./toons.html">대학생 홍보대사</a></li>
-            <li class="@@if(subActive === 'toons') {active}"><a href="./toons.html">국민연금 인스타툰</a></li>
+            <li class="@@if(subActive === 'news') {active}"><a href="../news/news.html">새소식</a></li>
+            <li><a href="#">ESG</a></li>
+            <li><a href="#">이벤트</a></li>
+            <li><a href="#">대학생 홍보대사</a></li>
+            <li class="@@if(subActive === 'toons') {active}"><a href="../toons/toons.html">국민연금 인스타툰</a></li>
         </ul>
     </li>
     <li class="item">
@@ -16,10 +16,10 @@
         <a href="#" class="link">국민연금 기금</a>
     </li>
     <li class="item last  @@if ( active === 'clips' ) { first active  }">
-        <a href="./clips.html" class="link">영상갤러리</a>
+        <a href="../clips/clips.html" class="link">영상갤러리</a>
         <ul class="submenu">
-            <li class="@@if(subActive === 'clips') {active}"><a href="./clips.html">동영상</a></li>
-            <li class="@@if(subActive === 'shorts') {active}"><a href="./shorts.html">Shorts</a></li>
+            <li class="@@if(subActive === 'clips') {active}"><a href="../clips/clips.html">동영상</a></li>
+            <li class="@@if(subActive === 'shorts') {active}"><a href="../shorts/shorts.html">Shorts</a></li>
         </ul>
     </li>
 </ul>

src/html/include/meta.html

@@ -7,6 +7,7 @@
     <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?v=240805">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
     <script src="@@ROOT/assets/js/common.min.js"></script>
 </head>
 <body>

src/html/news.html → src/html/news/news.html

@@ -1,11 +1,11 @@
-@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식"})
-@@include("./include/header.html")
+@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식" , "ROOT":"../"})
+@@include("../../html/include/header.html", {"ROOT":"../"})
 
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><a href="../index.html">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>새소식</span></li>
         </ol>
     </nav>
@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("./include/search_box.html")
-        @@include("./include/left_menu.html", {"active": "news", "subActive": "news"})
+        @@include("../../html/include/search_box.html")
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news"})
     </aside>
 
     <main class="page-contents">
@@ -30,14 +30,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-01.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
+                            <a href="detail.html">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
                         </h4>
                         <p class="item-summary">
                             (지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
@@ -55,14 +55,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-02.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
+                            <a href="detail.html">[7월 달력이미지무료배포]해변에서 휴양을 즐기는 국민연금공단</a>
                         </h4>
                         <p class="item-summary">
                             배경화면 다운로드, 달력 배경화면, 7월 달력 이미지, PC배경화면, 스마트폰 배경화면 무더운 여름, 바다로 피서를 떠난 국민연금 3인방수영도 하고 수박도 먹으며 즐거운 시간을 보내고 있네요!국민연금공단 3인방과 함께 7월도 행복하게 보내세요
@@ -80,14 +80,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-03.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
+                            <a href="detail.html">제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!</a>
                         </h4>
                         <p class="item-summary">
                             "제16기 국민연금 대학생 홍보대사팀을 추가 모집합니다!"    국민연금 대학생 홍보대사팀 ‘영금이’란?국민연금 대학생 홍보대사팀 ‘영금이’는 연금이와 Young의 합성어로, 다소 어렵고 생소한 국민연금제도를 대학생들의 통통 튀는 아이디어로 보다 쉽게
@@ -105,14 +105,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-04.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
+                            <a href="detail.html">[6월 달력 이미지 무료배포] 캠핑을 떠난 국민연금공단 3인방</a>
                         </h4>
                         <p class="item-summary">
                             배경화면 다운로드, 달력 배경화면, 6월 달력 이미지, PC배경화면, 스마트폰 배경화면6월을 맞이해 연대리, 금주임, 연부장이 캠핑을 떠났답니다.국민연금공단 3인방의 즐거운 추억이 담긴 6월 달력, 지금 만나보세요....
@@ -130,14 +130,14 @@
                 <li class="item">
 
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/news-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img"  src="../assets/images/ex/news-05.jpg" alt="">
                         </a>
                     </figure>
 
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
+                            <a href="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
                         </h4>
                         <p class="item-summary">
                             가족과 함께하는 행복한 5월입니다.5월을 기념해 놀이공원 나들이를 즐기는 3인방!화면 가득 펼쳐진 동심의 세계를 5월 달력에서 만나보세요!(고화질 이미지는 아래의 첨부파일로 다운하실 수 있습니다.)PC와 모바일 버전이 모두 제작되었으니...
@@ -152,14 +152,12 @@
 
                 </li>
 
-
-
             </ul>
         </div>
 
-        @@include("./include/pagination.html")
+        @@include("../../html/include/pagination.html")
     </main>
 </div>
 
-@@include("./include/footer.html")
-@@include("./include/tail.html")
+@@include("../../html/include/footer.html")
+@@include("../../html/include/tail.html")

src/html/shorts.html → src/html/shorts/shorts.html

@@ -1,11 +1,11 @@
-@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - Shorts"})
-@@include("./include/header.html")
+@@include("../../html/include/meta.html", {"pageTitle" : "영상갤러리 - Shorts", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../"})
 
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./clips.html">영상갤러리</a></li>
+            <li><a href="detail.html">홈</a></li>
+            <li><a href="../clips/clips.html">영상갤러리</a></li>
             <li><span>Shorts</span></li>
         </ol>
     </nav>
@@ -14,8 +14,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("./include/search_box.html")
-        @@include("./include/left_menu.html", {"active": "clips", "subActive": "shorts"})
+        @@include("../../html/include/search_box.html")
+        @@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
     </aside>
 
     <main class="page-contents">
@@ -29,26 +29,26 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-01.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
+                            <a href="detail.html">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
                         </h4>
                     </div>
                 </li>
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-02.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금은 도대체 왜?
+                            <a href="detail.html">국민연금은 도대체 왜?
                                 국가에서 운영하는거죠?</a>
                         </h4>
                     </div>
@@ -56,13 +56,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-03.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금공단 쉽게
+                            <a href="detail.html">국민연금공단 쉽게
                                 취업하는 꿀팁?! </a>
                         </h4>
                     </div>
@@ -70,13 +70,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-04.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 🏠 Home🏠 댄스챌린지</a>
                         </h4>
                     </div>
@@ -84,13 +84,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-05.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">199X년생부터 국민연금
+                            <a href="detail.html">199X년생부터 국민연금
                                 을 하나도 못 받는다고?!</a>
                         </h4>
                     </div>
@@ -98,13 +98,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-06.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">유럽 vs 우리나라
+                            <a href="detail.html">유럽 vs 우리나라
                                 국민연금 급여 차이는?</a>
                         </h4>
                     </div>
@@ -112,13 +112,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-07.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-07.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 기금수익률을
+                            <a href="detail.html">국민연금 기금수익률을
                                 더 높일 수 있는 방법은? </a>
                         </h4>
                     </div>
@@ -126,13 +126,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-08.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-08.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 기금투자
+                            <a href="detail.html">국민연금 기금투자
                                 믿을 수 있나요? </a>
                         </h4>
                     </div>
@@ -140,13 +140,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-09.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-09.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 💝사랑스러워 💝챌린지 </a>
                         </h4>
                     </div>
@@ -154,13 +154,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-10.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-10.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금! 부부 모두
+                            <a href="detail.html">국민연금! 부부 모두
                                 가입하면? #Shorts
                             </a>
                         </h4>
@@ -169,13 +169,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-11.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-11.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 3인방의
+                            <a href="detail.html">국민연금 3인방의
                                 🥰날 바라바라봐🥰 챌린지
                             </a>
                         </h4>
@@ -184,13 +184,13 @@
 
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/shorts-12.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/shorts-12.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 걱정🥰...은
+                            <a href="detail.html">국민연금 걱정🥰...은
                                 No!2023년 말 기준
                             </a>
                         </h4>
@@ -201,10 +201,10 @@
             </ul>
         </div>
 
-        @@include("./include/pagination.html")
+        @@include("../../html/include/pagination.html")
 
     </main>
 </div>
 
-@@include("./include/footer.html")
-@@include("./include/tail.html")
+@@include("../../html/include/footer.html")
+@@include("../../html/include/tail.html")

src/html/toons/detail.html

@@ -0,0 +1,204 @@
+@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰 상세", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../"})
+
+
+<div class="container">
+    <nav class="breadcrumb">
+        <ol>
+            <li><a href="">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
+            <li><span>국민연금 인스타 툰</span></li>
+        </ol>
+    </nav>
+</div>
+
+<div class="sub-main container" id="board">
+
+    <aside class="left-nav">
+        @@include("../../html/include/search_box.html")
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
+    </aside>
+
+    <main class="page-contents">
+        <div class="contents-header">
+            <header class="page-header">
+                <h2 class="contents-title">신입사원의 귀여운 실수?</h2>
+            </header>
+            <div class="page-header-info">
+                <dl class="date">
+                    <dt class="sr-only">게시글 날짜</dt>
+                    <dd>24-08-02</dd>
+                </dl>
+                <div class="list-detail-sns">
+                    <a href="javascript:;" data-button="share-sns" data-type="facebook" data-url="http://www.naver.com" class="sns-facebook" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" target="_self">페이스북</a>
+                    <a href="javascript:;" data-button="share-sns" data-type="twitter" data-url="http://www.naver.com" class="sns-twitter" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." data-image="" data-description="&nbsp;" target="_self">트위터</a>
+                    <a href="javascript:;" id="npsShKakaoTalk" data-button="share-sns" data-type="kakaotalk" data-url="http://www.naver.com" class="sns-kakaotalk" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단" data-image="" data-description="&nbsp;" target="_self">카카오톡</a>
+                    <a href="javascript:;" data-button="share-sns" data-type="url" data-url="http://www.naver.com" data-title="[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단." class="url-copy" target="_self">URL 복사</a>
+                </div>
+            </div>
+        </div>
+        <div class="detail-contents">
+            <p>
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4lMjhHOCVEQkklOUIlRkQlM0YlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-1.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm4rRiUzQyVEQU0lOTQlRkQxJThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-2.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4OG0rTSUzRiVEQk8lOUMlRjklMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-3.JPG"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmklMkJINiVEOSU0MCU5OCVGODglOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-4.JPG" ><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RGslMjlGJTNCJUQ3QSU5RiVGNyUyNiVDOSVCQyVGNA==" title="연대리(2024.8월) #1-5.JPG" ><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmguTCUzQSVEQk8lOTUlRkMlMjYlQzklQkMlRjQ=" title="연대리(2024.8월) #1-6.JPG" sqeid="QE_172250019336033366"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Q24lMjhGJTNCJURDTCU5RCVGQSUzQSU4RCVBNiVFMyU5NA==" title="연대리(2024.8월) #1-7.JPG" sqeid="QE_17225001958714117"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmolMjhGJTNFJUQ2TSU5OSVGOTklOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-8.JPG" sqeid="QE_172250019868746529"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4RmYrTCUzRiVEOE4lOTklRkE4JThEJUE2JUUzJTk0" title="연대리(2024.8월) #1-9.JPG" sqeid="QE_172250020124052912"><br style="clear:both;">
+                <img src="https://www.npsonair.kr/photo/file_img_view.php?strContent=JUJGJTBFJUY1JTkzSSU3QyU4MyUwNCVFNCVFRSVDNCVBRSUwQWdvdiVDNyUwRiUzRU8lRDclQTlNJTBCJTQwLSU4M1Z6JUZBOCVCOUFjJUY3JUQwJTAwJUZGNSVCMyUyOSVBQiU3RSVEMUIlRUZPZSVFOCVGNCVERSVCQiVEQiVCQyVCQSVBRSVDMCVENCUwNSVENyVGOSVEMyVDMiVBNyU4Rm0lMkJJOCVEN0ElOUYlRjklM0MlOEQlQTYlRTMlOTQ=" title="연대리(2024.8월) #1-10.JPG" sqeid="QE_172250020476850890"><br style="clear:both;">&nbsp;
+            </p>
+            <ul class="hash-tag">
+                <li>국민연금</li>
+                <li>국민연금공단</li>
+                <li>사연툰</li>
+                <li>일상툰</li>
+                <li>연대리툰</li>
+            </ul>
+        </div>
+        <div class="page-list">
+            <h3 class="title">더 많은 [국민연금 인스타툰] 보기</h3>
+            <ul class="common-list toons inner">
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+                <li class="item">
+                    <figure class="thumbnail">
+                        <a class="thumbnail-link" href="">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
+                        </a>
+                    </figure>
+                    <div class="item-content">
+                        <h4 class="item-title">
+                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                        </h4>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+
+        <div class="form-content-wrap">
+            <h5 class="form-title">콘텐츠 품질 향상을 위해<br> 이해도와 만족도 조사를 실시하고 있습니다.</h5>
+
+            <!-- 폼 1 시작  -->
+            <div class="form">
+                <!-- 만족도 시작 -->
+                <div class="form-content-box">
+                    <div class="form-box">
+                        <h6 class="question-title">현재 콘텐츠의 내용과 설명에 대해 만족하십니까?</h6>
+                        <div class="form-radio-box">
+                            <div class="radio-item"><input type="radio" id="radio01-01" name="radio01" value="5"><label for="radio01-01">매우만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-02" name="radio01" value="4"><label for="radio01-02">만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-03" name="radio01" value="3"><label for="radio01-03">보통</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-04" name="radio01" value="2"><label for="radio01-04">불만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio01-05" name="radio01" value="1"><label for="radio01-05">매우불만족</label></div>
+                        </div>
+                    </div>
+
+                    <div class="form-box">
+                        <h6 class="question-title">이 페이지에서 제공하는 콘텐츠가 얼마나 이해되십니까?</h6>
+                        <div class="form-radio-box">
+                            <div class="radio-item"><input type="radio" id="radio02-01" name="radio02" value="5"><label for="radio02-01">매우만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-02" name="radio02" value="4"><label for="radio02-02">만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-03" name="radio02" value="3"><label for="radio02-03">보통</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-04" name="radio02" value="2"><label for="radio02-04">불만족</label></div>
+                            <div class="radio-item"><input type="radio" id="radio02-05" name="radio02" value="1"><label for="radio02-05">매우불만족</label></div>
+                        </div>
+                    </div>
+                </div>
+                <button class="form-btn">확인</button>
+                <!-- 만족도 끝 -->
+            </div>
+            <!-- 폼 1 끝  -->
+
+
+            <!-- 폼 2 시작  -->
+            <div class="form-02 cf">
+                <!-- 만족도 시작 -->
+                <div class="form-content-box cf" style="border:0; padding-bottom:0;">
+                    <div class="form-box">
+                        <h5 class="question-title">콘텐츠에 대한 자유로운 의견을 남겨주세요.</h5>
+                        <div class="form-radio-box other">
+                            <textarea placeholder="보내주신 의견은 검토하여 콘텐츠 제작에 반영할 예정입니다.(200자 이내) " name="strSurveyText" id="strSurveyText" onkeyup="fncChkByte(this,400)"></textarea>
+                        </div>
+                        <div class="textarea-num">
+                            <span id="byteInfo">0</span>
+                            / 400
+                            <span>byte</span>
+                        </div>
+                    </div>
+
+                </div>
+                <!-- 만족도 끝 -->
+
+                <button class="form-btn">확인</button>
+            </div>
+            <!-- 폼 2 끝  -->
+
+        </div>
+        <a href="toons.html" class="btn-list-prev">목록으로</a>
+    </main>
+</div>
+
+@@include("../../html/include/footer.html")
+@@include("../../html/include/tail.html")

src/html/toons.html → src/html/toons/toons.html

@@ -1,11 +1,12 @@
-@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰"})
-@@include("./include/header.html")
+@@include("../../html/include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰", "ROOT":"../"})
+@@include("../../html/include/header.html",{"ROOT":"../"})
+
 
 <div class="container">
     <nav class="breadcrumb">
         <ol>
-            <li><a href="./">홈</a></li>
-            <li><a href="./news.html">국민연금 소식</a></li>
+            <li><a href="">홈</a></li>
+            <li><a href="../news/news.html">국민연금 소식</a></li>
             <li><span>국민연금 인스타 툰</span></li>
         </ol>
     </nav>
@@ -14,8 +15,8 @@
 <div class="sub-main container" id="main">
 
     <aside class="left-nav">
-        @@include("./include/search_box.html")
-        @@include("./include/left_menu.html", {"active": "news", "subActive": "toons"})
+        @@include("../../html/include/search_box.html")
+        @@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
     </aside>
 
     <main class="page-contents">
@@ -28,13 +29,13 @@
             <ul class="common-list toons">
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-01.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-01.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -46,13 +47,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-02.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-02.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -64,13 +65,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-03.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-03.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -82,13 +83,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-04.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-04.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -100,13 +101,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-05.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-05.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -118,13 +119,13 @@
                 </li>
                 <li class="item">
                     <figure class="thumbnail">
-                        <a class="thumbnail-link" href="">
-                            <img class="thumbnail-img" src="./assets/images/ex/toon-06.jpg" alt="">
+                        <a class="thumbnail-link" href="detail.html">
+                            <img class="thumbnail-img" src="../assets/images/ex/toon-06.jpg" alt="">
                         </a>
                     </figure>
                     <div class="item-content">
                         <h4 class="item-title">
-                            <a href="">국민연금 인스타툰 알려드립니다.</a>
+                            <a href="detail.html">국민연금 인스타툰 알려드립니다.</a>
                         </h4>
                         <div class="item-info">
                             <dl>
@@ -138,10 +139,10 @@
             </ul>
         </div>
 
-        @@include("./include/pagination.html")
+        @@include("../../html/include/pagination.html")
 
     </main>
 </div>
 
-@@include("./include/footer.html")
-@@include("./include/tail.html")
+@@include("../../html/include/footer.html")
+@@include("../../html/include/tail.html")

src/js/common.js

@@ -4,4 +4,108 @@ $(function() {
 
         $('#mobile-left-menu').toggleClass('opened');
     })
+
+    $('[data-button="share-sns"]').click(function(e) {
+        e.preventDefault();
+        console.log(1);
+
+        var code = $(this).attr('data-type')
+        var snsimages = $(this).attr('data-image')
+        var snsTitle =  $(this).attr('data-title')
+        var url = $(this).attr('data-url')
+
+        if(! url || !code || !snsTitle)
+            return;
+
+        if(code === "kakaotalk") {
+            Kakao.init('3bec2345a029972a68f8279879478ba7');
+
+            Kakao.Link.createDefaultButton({
+                container: '#npsShKakaoTalk',
+                objectType: 'feed',
+                content: {
+                    title: snsTitle,
+                    description: '출처 : 국민연금 온에어',
+                    imageUrl: snsimages,
+                    imageWidth: 620,
+                    imageHeight: 350,
+                    link: {
+                        mobileWebUrl: document.URL,
+                        webUrl: document.URL
+                    }
+                },
+                buttons: [
+                    {
+                        title: '콘텐츠 보기',
+                        link: {
+                            mobileWebUrl: document.URL,
+                            webUrl: document.URL
+                        }
+                    }
+                ]
+            });
+            return;
+        }
+        else if (code === 'url') {
+            var $div = $('<input>').attr('data-temp','clipboard')
+            $('body').append($div);
+            $div.val(url).select();
+
+            $('#textbox-url').select();
+            try {
+                var successful = document.execCommand('copy');
+                alert('클립보드에 주소가 복사되었습니다. Ctrl + V 로 붙여넣기 하세요.');
+                $div.remove();
+            } catch (err) {
+                alert('이 브라우저는 지원하지 않습니다.');
+                $div.remove();
+            }
+            return;
+        }
+
+        switch(code) {
+            case "twitter":
+                //트위터
+                url = '//twitter.com/intent/tweet?text='+encodeURIComponent(snsTitle)+'&url='+encodeURIComponent(url);
+                break;
+
+            case "telegram":
+                //텔레그램
+                url = 'https://telegram.me/share/url?url='+encodeURIComponent(url);
+                break;
+
+            case "facebook":
+                //페이스북
+                url = '//www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(url)+'&t='+snsTitle;
+                break;
+
+            case "kakaostory":
+                //카카오스토리
+                url = 'https://story.kakao.com/share?url='+encodeURIComponent(url);
+                break;
+
+            case "naverblog":
+                //네이버
+                url = 'http://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(url)+'&title='+encodeURIComponent(snsTitle);
+                break;
+
+            case "naverband":
+                //밴드
+                url = 'http://www.band.us/plugin/share?body='+encodeURIComponent(snsTitle)+'%0A'+encodeURIComponent(url);
+                break;
+
+            case "google":
+                //구글
+                url = '//plus.google.com/share?url='+url;
+                break;
+
+            case "pinterest":
+                //pinterest
+                url = '//www.pinterest.com/pin/create/button/?url='+url+'&media='+snsimages+'&description='+encodeURIComponent(snsTitle);
+                break;
+        }
+
+        window.open(url,'','width=600,height=300,top=100,left=100,scrollbars=yes');
+
+    })
 })

src/scss/components/_breadcrumbs.scss

@@ -36,13 +36,13 @@
       li {
         a,span {
 
-          font-size:REM(22px / 3);
+          font-size:REM(30px / 3);
         }
 
         & + li {
           a, span {
             &:before {
-              font-size:REM(22px / 3);
+              font-size:REM(30px / 3);
               margin:0 REM(12px / 3);
             }
           }

src/scss/pages/_lists.scss

@@ -156,6 +156,55 @@
         }
       }
     }
+    &.inner{
+      @include display-flex();
+      flex-wrap: wrap;
+      margin:0 0 REM(30px / 3) 0;
+      padding-bottom:REM(30px);
+      .item {
+        width:50%;
+        padding:REM(10px) REM(15px);
+        @include display-flex();
+        align-items: center;
+        border-bottom: 1px solid #c2c2c2;
+
+        .thumbnail {
+          width:REM(100px);
+          height:REM(100px);
+          margin:0 auto REM(10px);
+          flex-shrink:0;
+        }
+
+        .item-content {
+          padding-left:REM(15px);
+          .item-title {
+            font-size:REM(15px);
+            white-space: initial;
+          }
+        }
+
+        @include display-xs(){
+          width:100%;
+          padding:REM(12px / 3) REM(15px/ 3);
+          @include display-flex();
+          flex-direction: row;
+          .thumbnail {
+            width:REM(120px / 3);
+            height:REM(80px / 3);
+            margin:0;
+            flex-shrink:0;
+          }
+          .item-content {
+            padding-left:REM(30px / 3);
+            .item-title {
+              font-size:REM(21px / 3);
+              white-space: initial;
+              margin-bottom:0;
+            }
+          }
+        }
+      }
+    }
   }
 
   &.toons {
@@ -196,6 +245,47 @@
         }
       }
     }
+    &.inner{
+      .item {
+        width:50%;
+        padding:REM(10px) REM(15px);
+        @include display-flex();
+        align-items: center;
+
+        .thumbnail {
+          width:REM(100px);
+          height:REM(100px);
+          margin:0 auto REM(10px);
+          flex-shrink:0;
+        }
+
+        .item-content {
+          padding-left:REM(15px);
+          .item-title {
+            font-size:REM(15px);
+            white-space: initial;
+          }
+        }
+
+        @include display-xs(){
+          width:100%;
+          padding:REM(12px / 3) REM(15px/ 3);
+          .thumbnail {
+            width:REM(150px / 3);
+            height:REM(150px / 3);
+            margin:0;
+            flex-shrink:0;
+          }
+          .item-content {
+            padding-left:REM(30px / 3);
+            .item-title {
+              font-size:REM(21px / 3);
+              white-space: initial;
+            }
+          }
+        }
+      }
+    }
   }
 
   &.shorts {
@@ -250,6 +340,56 @@
         }
       }
     }
+
+    &.inner{
+      margin-top:0;
+      .item {
+        width:50%;
+        padding:REM(10px) REM(15px);
+        @include display-flex();
+        align-items: center;
+
+        .thumbnail {
+          width:REM(84px);
+          height:REM(126px);
+          margin:0;
+          flex-shrink:0;
+        }
+
+        .item-content {
+          padding-left:REM(15px);
+          .item-title {
+            font-size:REM(15px);
+            white-space: initial;
+            margin-bottom:0;
+            br {
+              display: none;
+            }
+          }
+        }
+
+        @include display-xs(){
+          width:100%;
+          padding:REM(12px / 3) REM(15px/ 3);
+          .thumbnail {
+            width:REM(84px / 3);
+            height:REM(126px / 3);
+            margin:0;
+            flex-shrink:0;
+          }
+          .item-content {
+            padding-left:REM(30px / 3);
+            .item-title {
+              font-size:REM(21px / 3);
+              white-space: initial;
+            }
+            .item-summary {
+              font-size:REM(18px / 3);
+            }
+          }
+        }
+      }
+    }
   }
 
   &.clips {
@@ -308,6 +448,61 @@
         }
       }
     }
+
+    &.inner{
+      margin-top:0;
+      .item {
+        width:50%;
+        padding:REM(10px) REM(15px);
+        @include display-flex();
+        align-items: center;
+
+        .thumbnail {
+          width:REM(120px);
+          height:REM(80px);
+          margin:0;
+          flex-shrink:0;
+        }
+
+        .item-content {
+          padding-left:REM(15px);
+          .item-title {
+            font-size:REM(15px);
+            white-space: initial;
+            br {
+              display: none;
+            }
+          }
+          .item-summary {
+            font-size:REM(12px);
+            br {
+              display: none;
+            }
+          }
+        }
+
+        @include display-xs(){
+          width:100%;
+          padding:REM(12px / 3) REM(15px/ 3);
+          .thumbnail {
+            width:REM(180px / 3);
+            height:REM(120px / 3);
+            margin:0;
+            flex-shrink:0;
+          }
+          .item-content {
+            padding-left:REM(30px / 3);
+            .item-title {
+              font-size:REM(21px / 3);
+              white-space: initial;
+            }
+            .item-summary {
+              font-size:REM(18px / 3);
+            }
+          }
+        }
+      }
+    }
   }
 }
 

src/scss/style.scss

@@ -21,5 +21,6 @@
 @import "plugins/custom";
 
 // 레이아웃 및 각 페이지 SCSS 파일
-@import 'pages/main';
+@import "pages/main";
 @import "pages/lists";
+@import "pages/board-detail";