wheeparam
/
npsonair
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

board 상세 완료

master
lee_whee 4 months ago
parent
300722e926
commit
a2c9eda959
32 changed files with 1766 additions and 437 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      dist/assets/css/style.css
  2. 2
      dist/assets/css/style.min.css
  3. 2
      dist/assets/css/style.min.css.map
  4. BIN
      dist/assets/images/common/blog.png
  5. BIN
      dist/assets/images/common/instagram.png
  6. BIN
      dist/assets/images/common/tv.png
  7. BIN
      dist/assets/images/ex/ex8.png
  8. 129
      dist/clips/clips.html
  9. 168
      dist/clips/detail.html
  10. 181
      dist/index.html
  11. 149
      dist/news/detail.html
  12. 130
      dist/news/news.html
  13. 162
      dist/shorts/detail.html
  14. 131
      dist/shorts/shorts.html
  15. 159
      dist/toons/detail.html
  16. 132
      dist/toons/toons.html
  17. 6
      src/html/clips/clips.html
  18. 43
      src/html/clips/detail.html
  19. 10
      src/html/include/header.html
  20. 12
      src/html/include/left_menu.html
  21. 2
      src/html/include/search_box.html
  22. 118
      src/html/include/sub-sns.html
  23. 157
      src/html/index.html
  24. 24
      src/html/news/detail.html
  25. 5
      src/html/news/news.html
  26. 37
      src/html/shorts/detail.html
  27. 8
      src/html/shorts/shorts.html
  28. 34
      src/html/toons/detail.html
  29. 7
      src/html/toons/toons.html
  30. 111
      src/scss/common/_layout.scss
  31. 32
      src/scss/pages/_lists.scss
  32. 48
      src/scss/pages/main.scss

186
dist/assets/css/style.css
View File

@ -597,8 +597,8 @@ html {
}
#nav .family-list .item.tv > a:after {
width: 1.3125rem;
height: 0.9375rem;
margin-left: 0.5rem;
height: 1.3125rem;
left: 0.4375rem;
background-color: transparent;
background-image: url("../images/common/tv.png");
background-repeat: no-repeat;
@ -606,9 +606,9 @@ html {
background-position-y: center;
}
#nav .family-list .item.instagram > a:after {
width: 1.1875rem;
height: 1.1875rem;
margin-left: 0.53125rem;
width: 1.3125rem;
height: 1.3125rem;
left: 0.4375rem;
background-color: transparent;
background-image: url("../images/common/instagram.png");
background-repeat: no-repeat;
@ -617,8 +617,8 @@ html {
}
#nav .family-list .item.blog > a:after {
width: 1.3125rem;
height: 1.0625rem;
margin-left: 0.5rem;
height: 1.3125rem;
left: 0.4375rem;
background-color: transparent;
background-image: url("../images/common/blog.png");
background-repeat: no-repeat;
@ -711,12 +711,12 @@ html {
}
#footer .footer-info dl dt {
font-weight: 500;
font-size: 0.5rem;
font-size: 0.625rem;
color: #fff;
}
#footer .footer-info dl dd {
font-weight: 500;
font-size: 0.5rem;
font-size: 0.625rem;
color: #fff;
}
#footer .footer-info dl dd > br {
@ -800,6 +800,7 @@ html {
border-radius: 0.9375rem;
position: relative;
box-sizing: border-box;
border: 0.0625rem solid #c8c8c8;
}
.search-box .link {
background-color: transparent;
@ -869,15 +870,15 @@ html {
.menu-list {
border-radius: 0.9375rem;
width: 10.5625rem;
min-height: 9.875rem;
margin-top: 0.75rem;
border: 0.0625rem solid #c8c8c8;
}
.menu-list .item {
position: relative;
}
.menu-list .item .link {
display: block;
padding: 0.75rem 0;
padding: 0.78125rem 0;
font-size: 0.845rem;
text-align: center;
line-height: 1;
@ -984,6 +985,93 @@ html {
.sub-main .page-contents {
flex: 1;
min-width: 0;
position: relative;
}
.sns-sub {
display: none;
position: relative;
top: inherit;
left: inherit;
right: inherit;
text-align: center;
padding: 0.625rem 0.9375rem;
max-width: 10.4166666667rem;
width: 100%;
margin: 0.625rem auto 0 auto;
}
@media screen and (max-width: 768px) {
.sns-sub {
display: block;
}
}
.sns-sub:before {
content: "";
position: absolute;
width: 200%;
height: 100%;
background-color: #fff;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.sns-sub li {
display: inline-block;
margin: 0.1041666667rem;
}
.sns-sub li a {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #bcc0c9;
display: block;
position: relative;
transition: 0.2s;
}
.sns-sub li a svg {
position: absolute;
top: 50%;
left: 50%;
width: 0.8333333333rem;
height: 0.8333333333rem;
transform: translate(-50%, -50%);
fill: #fff;
}
.page-contents.detail .sns-sub:before {
background-color: transparent;
}
.move-top {
position: absolute;
bottom: 0.625rem;
right: -6.25rem;
z-index: 1;
width: 2.75rem;
height: 2.75rem;
font-size: 0;
background: rgb(255, 255, 255);
transition: 0.2s;
box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.15);
border-radius: 50%;
}
@media screen and (max-width: 768px) {
.move-top {
display: none;
}
}
.move-top svg {
position: absolute;
top: 50%;
left: 50%;
width: 1.25rem;
height: 1.25rem;
transform: translate(-50%, -50%);
fill: #666A70;
transition: 0.2s;
}
.move-top :hover svg {
transform: translate(-50%, -70%);
}
/***************************************************************************************
@ -2949,6 +3037,7 @@ html {
height: 14.3125rem;
background-color: #33cc99;
overflow: hidden;
border: 0.0625rem solid #c8c8c8;
}
#main .main-top .line-02 .bottom .left .link {
width: 100%;
@ -3030,6 +3119,7 @@ html {
border-radius: 0.4166666667rem;
width: 6.4583333333rem;
height: 7.6458333333rem;
border: 0.0625rem solid #c8c8c8;
}
#main .main-top .line-02 .bottom .left .link {
padding: 0.4166666667rem;
@ -3097,6 +3187,7 @@ html {
}
#main .main-top .line-03 .bottom {
border-radius: 0.9375rem;
border: 0.0625rem solid #c8c8c8;
width: 12rem;
height: 7rem;
background-color: #ffb400;
@ -3110,7 +3201,7 @@ html {
padding: 0.625rem 0.625rem;
}
#main .main-top .line-03 .bottom .title {
font-size: 1.1875rem;
font-size: 1.125rem;
font-weight: 800;
line-height: 1.15;
color: #fff;
@ -3275,8 +3366,8 @@ html {
}
#main .family-list.mobile .item.tv > a:after {
width: 0.4583333333rem;
height: 0.3125rem;
margin-left: 0.1666666667rem;
height: 0.4583333333rem;
margin-left: 0.1770833333rem;
background-color: transparent;
background-image: url("../images/common/tv.png");
background-repeat: no-repeat;
@ -3287,8 +3378,8 @@ html {
margin-left: 1.0416666667rem;
}
#main .family-list.mobile .item.instagram > a:after {
width: 0.3958333333rem;
height: 0.3958333333rem;
width: 0.4583333333rem;
height: 0.4583333333rem;
margin-left: 0.1875rem;
background-color: transparent;
background-image: url("../images/common/instagram.png");
@ -3300,9 +3391,9 @@ html {
margin-left: 1.0416666667rem;
}
#main .family-list.mobile .item.blog > a:after {
width: 0.4375rem;
height: 0.3541666667rem;
margin-left: 0.1666666667rem;
width: 0.4583333333rem;
height: 0.4583333333rem;
margin-left: 0.1770833333rem;
background-color: transparent;
background-image: url("../images/common/blog.png");
background-repeat: no-repeat;
@ -3370,6 +3461,7 @@ html {
justify-content: center;
margin-left: 0.9375rem;
line-height: 1;
padding: 0;
}
#main .main-bottom .control-box .btn.btn-right {
margin-left: 0.3125rem;
@ -3377,6 +3469,13 @@ html {
#main .main-bottom .control-box .btn .icon {
font-size: 1.5rem;
}
#main .main-bottom .control-box .btn:active, #main .main-bottom .control-box .btn:hover, #main .main-bottom .control-box .btn:focus, #main .main-bottom .control-box .btn:focus-visible, #main .main-bottom .control-box .btn:focus-within {
width: 100%;
outline: none;
background-color: #d5d8e1;
cursor: pointer;
overflow: hidden;
}
#main .main-bottom .control-box .swiper-pagination {
position: relative;
left: 0;
@ -3566,6 +3665,14 @@ html {
#main .main-bottom .right-slide .swiper-slide.swiper-slide {
margin-right: 0.5rem;
}
#main .main-bottom .right-slide .swiper-slide:last-child {
margin-right: 0;
}
#main .main-bottom .right-slide .swiper-slide.full {
width: 100% !important;
height: 12.1875rem;
border-radius: 1.25rem;
}
#main .main-bottom .right-slide .btn-more {
display: none;
}
@ -3584,6 +3691,14 @@ html {
#main .main-bottom .right-slide .swiper-slide.swiper-slide {
margin-right: 0.2708333333rem;
}
#main .main-bottom .right-slide .swiper-slide:last-child {
margin-right: 0;
}
#main .main-bottom .right-slide .swiper-slide.full {
width: 100% !important;
height: 8.125rem;
border-radius: 0.9375rem;
}
#main .main-bottom .right-slide .btn-more {
display: block;
font-size: 0.6604166667rem;
@ -3631,13 +3746,15 @@ html {
}
.common-list .item-content .item-title {
color: #02256c;
font-size: 1rem;
font-size: 0.875rem;
display: block;
width: 100%;
/*
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.025em;
*/
font-weight: 700;
}
.common-list .item-content .item-title a {
@ -3656,7 +3773,7 @@ html {
}
}
.common-list .item-content .item-summary {
font-size: 0.8125rem;
font-size: 0.75rem;
color: #252525;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -3664,7 +3781,7 @@ html {
letter-spacing: -0.025em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 0.3125rem 0;
margin: 0.3125rem 0 0.3125rem 0;
font-weight: 500;
height: 2.56em;
-webkit-line-clamp: 2;
@ -3689,7 +3806,7 @@ html {
margin: 0 0.625rem 0 0;
}
.common-list .item-content .item-info dl dd {
font-size: 0.875rem;
font-size: 0.75rem;
color: #959595;
font-weight: 500;
}
@ -3713,7 +3830,7 @@ html {
.common-list.news .item .item-content {
flex: 1;
min-width: 0;
padding: 0.5rem 0;
padding: 0 0 0.5rem 0;
}
.common-list.news .item .item-content .item-summary {
height: 5.12em;
@ -3763,7 +3880,7 @@ html {
padding-left: 0.9375rem;
}
.common-list.news.inner .item .item-content .item-title {
font-size: 0.9375rem;
font-size: 0.875rem;
white-space: initial;
}
@media screen and (max-width: 768px) {
@ -3803,9 +3920,6 @@ html {
height: 13.5rem;
margin: 0 auto 0.625rem;
}
.common-list.toons .item .item-content .item-title {
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.common-list.toons .item {
width: 100%;
@ -3817,10 +3931,6 @@ html {
width: 100%;
height: auto;
}
.common-list.toons .item .item-content .item-title {
font-size: 0.6875rem;
margin-bottom: 0.25rem;
}
}
.common-list.toons.inner .item {
width: 50%;
@ -3840,7 +3950,7 @@ html {
padding-left: 0.9375rem;
}
.common-list.toons.inner .item .item-content .item-title {
font-size: 0.9375rem;
font-size: 0.875rem;
white-space: initial;
}
@media screen and (max-width: 768px) {
@ -3876,18 +3986,22 @@ html {
height: 13.75rem;
margin: 0 0 0.5rem;
}
.common-list.shorts .item .item-content .item-title {
.common-list.shorts .item .item-content {
/*
.item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap:break-word;
overflow: hidden;
text-overflow: ellipsis;
height: 2.56em;
height: 1.28em * 2;
-webkit-line-clamp: 2;
line-height:1.28em;
white-space: normal;
word-break: break-all;
}
*/
}
@media screen and (max-width: 768px) {
.common-list.shorts {
margin: 0;
@ -4155,7 +4269,7 @@ html {
border-bottom: 0.0625rem solid #02256c;
}
#board .page-contents .contents-header .contents-title {
font-size: 1.875rem;
font-size: 1.5rem;
margin-bottom: 0.625rem;
}
#board .page-contents .contents-header .page-header-info {

2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File

2
dist/assets/css/style.min.css.map
File diff suppressed because it is too large
View File

BIN
dist/assets/images/common/blog.png
View File

Side by Side Swipe Overlay

Before

Width: 21  |  Height: 17  |  Size: 408 B

After

Width: 100  |  Height: 100  |  Size: 5.3 KiB

BIN
dist/assets/images/common/instagram.png
View File

Side by Side Swipe Overlay

Before

Width: 19  |  Height: 19  |  Size: 588 B

After

Width: 100  |  Height: 100  |  Size: 6.4 KiB

BIN
dist/assets/images/common/tv.png
View File

Side by Side Swipe Overlay

Before

Width: 21  |  Height: 15  |  Size: 351 B

After

Width: 100  |  Height: 100  |  Size: 4.8 KiB

BIN
dist/assets/images/ex/ex8.png
View File

Side by Side

After

Width: 358  |  Height: 193  |  Size: 152 KiB

129
dist/clips/clips.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -192,7 +194,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -529,7 +531,124 @@
</ol>
</nav>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

168
dist/clips/detail.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -193,7 +195,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -226,7 +228,7 @@
</ul>
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">기초연금제도 10주년 기념,국민참여 공모전 수상작을 소개합니다.</h2>
@ -345,42 +347,6 @@
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">스톱모션으로 알아보는 <br>
국민연금 '크레딧 제도'</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">
⭐미션! 2023 국민연금<br>
레벨업⭐
</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
@ -443,6 +409,124 @@
</div>
<a href="clips.html" class="btn-list-prev">목록으로</a>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

181
dist/index.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="./toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="./clips/clips.html">동영상</a></li>
<li><a href="./shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -177,15 +179,15 @@
<section id="contents">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="container" id="main">
<h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
<div class="main-top">
<div class="line-01">
<nav id="nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="./index.html" 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>
@ -193,13 +195,13 @@
</div>
<ul class="menu-list">
<li class="item ">
<a href="../news/news.html" class="link">국민연금 소식</a>
<a href="./news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="../news/news.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>
<li class=""><a href="./toons/toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
@ -209,17 +211,17 @@
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="../clips/clips.html" class="link">영상갤러리</a>
<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>
<li class=""><a href="./clips/clips.html">동영상</a></li>
<li class=""><a href="./shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
<ul class="family-list">
<li class="item tv"><a href="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</a></li>
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
</ul>
</nav>
</div>
@ -282,9 +284,9 @@
</div>
</div>
<ul class="family-list mobile">
<li class="item tv"><a href="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</a></li>
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
</ul>
<div class="main-bottom">
<div class="left-slide">
@ -293,6 +295,7 @@
<h2 class="slide-title">최신 글 모아보기</h2>
<div class="control-box">
<div class="swiper-pagination"></div>
<button type="button" title="이전" class="btn btn-left">
<span class="material-symbols-outlined icon">chevron_left</span>
</button>
@ -399,15 +402,115 @@
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">01</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">28</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">20</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">16</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">01</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">28</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">20</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">16</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="right-slide">
<div class="swiper-container">
<div class="title-box">
<h2 class="slide-title">국민연금 Shorts</h2>
<h2 class="slide-title">
<span class="title title-1">영상갤러리</span>
<span class="title title-2" style="display: none;">국민연금 Shorts</span>
</h2>
<div class="control-box">
<div class="swiper-pagination"></div>
<button type="button" title="이전" class="btn btn-left">
<span class="material-symbols-outlined icon">chevron_left</span>
</button>
@ -417,12 +520,7 @@
</div>
</div>
<ul class="swiper-wrapper short-list">
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')">
<a href="#" class="box-link">
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
</a>
</li>
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')">
<li class="swiper-slide box full" style="background-image:url('assets/images/ex/ex8.png')">
<a href="#" class="box-link">
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
</a>
@ -447,14 +545,20 @@
<script>
var recentNotice = new Swiper ('.left-slide .swiper-container', {
slidesPerView: 1,
loop: true,
loopFillGroupWithBlank: true,
initial:0,
grid: {
rows: 4,
rows: 4
},
pagination: {
el: ".left-slide .swiper-pagination",
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
autoplay: {
delay: 2000,
delay: 3000,
reverseDirection: true,
disableOnInteraction: false,
},
@ -465,21 +569,32 @@
})
var shortList = new Swiper ('.right-slide .swiper-container', {
slidesPerView: 2,
grid: {
rows: 1,
},
slidesPerView: "auto",
slidesPerGroupSkip: 1,
initial:0,
rewind: true,
pagination: {
el: ".right-slide .swiper-pagination",
},
autoplay: {
delay: 2000,
delay: 3000,
reverseDirection: true,
disableOnInteraction: false,
},
navigation: {
nextEl:".right-slide .btn-right",
prevEl: ".right-slide .btn-left",
},
on: {
init : function (){
$('.right-slide .slide-title .title-1').show();
},
slideChange: function () {
console.log(this.realIndex);
var current = this.realIndex;
$('.right-slide .slide-title .title').hide(); // 모든 타이틀을 숨김
$('.right-slide .slide-title .title-' + (current + 1)).show(); // 현재 인덱스에 해당하는 타이틀을 표시
},
}
})
</script>

149
dist/news/detail.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -193,7 +195,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -226,7 +228,7 @@
</ul>
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단</h2>
@ -1485,21 +1487,6 @@
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
@ -1561,7 +1548,125 @@
<!-- 폼 2 끝 -->
</div>
<a href="clips.html" class="btn-list-prev">목록으로</a>
<a href="news.html" class="btn-list-prev">목록으로</a>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

130
dist/news/news.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -192,7 +194,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -385,6 +387,124 @@
</ol>
</nav>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

162
dist/shorts/detail.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -182,7 +184,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
@ -193,7 +195,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -226,7 +228,7 @@
</ul>
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">국민연금, 내고 싶은 사람만 내면 안되나요?</h2>
@ -318,34 +320,6 @@
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">199X년생부터 국민연금
을 하나도 못 받는다고?!</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">유럽 vs 우리나라
국민연금 급여 차이는?</a>
</h4>
</div>
</li>
</ul>
</div>
@ -408,6 +382,124 @@
<!-- 폼 2 끝 -->
</div>
<a href="shorts.html" class="btn-list-prev">목록으로</a>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

131
dist/shorts/shorts.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -181,7 +183,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="detail.html">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
@ -192,7 +194,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -431,7 +433,124 @@
</ol>
</nav>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

159
dist/toons/detail.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -182,7 +184,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
@ -193,7 +195,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -226,7 +228,7 @@
</ul>
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">신입사원의 귀여운 실수?</h2>
@ -316,30 +318,6 @@
</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>
@ -404,6 +382,125 @@
</div>
<a href="toons.html" class="btn-list-prev">목록으로</a>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

132
dist/toons/toons.html
View File

@ -22,6 +22,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -72,6 +73,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -95,11 +97,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/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/toons.html">국민연금 인스타툰</a></li>
<li><a href="..//toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -124,8 +126,8 @@
<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>
<li><a href="..//clips/clips.html">동영상</a></li>
<li><a href="..//shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
@ -182,7 +184,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
@ -193,7 +195,7 @@
<aside class="left-nav">
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="../index.html" 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>
@ -369,6 +371,124 @@
</ol>
</nav>
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>
</main>
</div>

6
src/html/clips/clips.html
View File

@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips", "ROOT": ".."})
</aside>
<main class="page-contents">
@ -300,7 +300,7 @@
</div>
@@include("../../html/include/pagination.html")
@@include("../../html/include/sub-sns.html")
</main>
</div>

43
src/html/clips/detail.html
View File

@ -15,11 +15,11 @@
<div class="sub-main container" id="board">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "clips", "ROOT": ".."})
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">기초연금제도 10주년 기념,국민참여 공모전 수상작을 소개합니다.</h2>
@ -138,42 +138,6 @@
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">스톱모션으로 알아보는 <br>
국민연금 '크레딧 제도'</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">
⭐미션! 2023 국민연금<br>
레벨업⭐
</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
@ -236,6 +200,7 @@
</div>
<a href="clips.html" class="btn-list-prev">목록으로</a>
@@include("../../html/include/sub-sns.html")
</main>
</div>

10
src/html/include/header.html
View File

@ -9,6 +9,7 @@
<header id="header">
<div class="container">
<div class="logo-box">
<a class="display-flex align-center justify-center" href="https://www.nps.or.kr" target="_blank">
<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">
@ -59,6 +60,7 @@
<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>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
@ -82,11 +84,11 @@
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="../news/news.html">새소식</a></li>
<li><a href="@@ROOT/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="@@ROOT/toons/toons.html">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
@ -111,8 +113,8 @@
<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>
<li><a href="@@ROOT/clips/clips.html">동영상</a></li>
<li><a href="@@ROOT/shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>

12
src/html/include/left_menu.html
View File

@ -1,12 +1,12 @@
<ul class="menu-list">
<li class="item @@if ( active === 'news' ) { first active }">
<a href="../news/news.html" class="link">국민연금 소식</a>
<a href="@@ROOT/news/news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class="@@if(subActive === 'news') {active}"><a href="../news/news.html">새소식</a></li>
<li class="@@if(subActive === 'news') {active}"><a href="@@ROOT/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>
<li class="@@if(subActive === 'toons') {active}"><a href="@@ROOT/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/clips.html" class="link">영상갤러리</a>
<a href="@@ROOT/clips/clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<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>
<li class="@@if(subActive === 'clips') {active}"><a href="@@ROOT/clips/clips.html">동영상</a></li>
<li class="@@if(subActive === 'shorts') {active}"><a href="@@ROOT/shorts/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>

2
src/html/include/search_box.html
View File

@ -1,5 +1,5 @@
<div class="search-box">
<a href="#" class="link">국민연금 ON AIR</a>
<a href="@@ROOT/index.html" 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>

118
src/html/include/sub-sns.html
View File

@ -0,0 +1,118 @@
<ul class="sns-sub">
<li>
<a href="https://www.youtube.com/channel/UCqNLvq_8xZM0hhw-spFnLQg" class="sns_bg1" target="_blank" id="npsShYutube" title="유튜브">
<svg viewBox="0 0 20 20">
<path d="M16.1,4.8H3.9c-1.3,0-2.3,1-2.3,2.3v5.8c0,1.3,1,2.3,2.3,2.3h12.3c1.3,0,2.3-1,2.3-2.3V7.1C18.5,5.8,17.4,4.8,16.1,4.8z
M13.1,10.2l-4.7,2.7c-0.1,0.1-0.3,0-0.3-0.2V7.3c0-0.1,0.2-0.2,0.3-0.2l4.7,2.7C13.2,9.9,13.2,10.1,13.1,10.2z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/npstagram/" class="sns_bg2" target="_blank" id="npsShInstar" title="인스타그램">
<svg viewBox="0 0 20 20">
<path d="M13.4,2H6.6C4.1,2,2,4.1,2,6.6v6.8C2,15.9,4.1,18,6.6,18h6.8c2.6,0,4.6-2.1,4.6-4.6V6.6C18,4.1,15.9,2,13.4,2 M16.5,13.5
c0,1.7-1.4,3.1-3.1,3.1H6.5c-1.7,0-3.1-1.4-3.1-3.1V6.6c0-1.7,1.4-3.1,3.1-3.1h6.9c1.7,0,3.1,1.4,3.1,3.1V13.5z"></path>
<path d="M10,5.9c-2.3,0-4.2,1.9-4.2,4.2c0,2.3,1.9,4.2,4.2,4.2s4.2-1.9,4.2-4.2C14.2,7.7,12.3,5.9,10,5.9 M10,12.7
c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C12.7,11.5,11.5,12.7,10,12.7"></path>
<path d="M14.3,4.8c-0.5,0-1,0.4-1,1c0,0.5,0.4,1,1,1c0.5,0,1-0.4,1-1C15.3,5.2,14.8,4.8,14.3,4.8"></path>
</svg>
</a>
</li>
<li>
<a href="https://blog.naver.com/pro_nps" class="sns_bg3" target="_blank" id="npsShNaverBlog" title="네이버블로그">
<svg viewBox="0 0 20 20">
<path d="M15,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C15.7,8.8,15.4,8.5,15,8.5z"></path>
<path d="M11,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C11.7,8.8,11.4,8.5,11,8.5z"></path>
<path d="M5,8.5c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7C5.7,8.8,5.4,8.5,5,8.5z"></path>
<path d="M15.8,2.8H4.2C2.7,2.8,1.5,4,1.5,5.5v6.4c0,1.5,1.2,2.7,2.7,2.7h4l1.4,2.2c0,0,0,0,0,0.1c0.1,0.1,0.2,0.2,0.4,0.2
c0.2,0,0.3-0.1,0.4-0.2c0,0,0-0.1,0-0.1l1.4-2.2h4c1.5,0,2.7-1.2,2.7-2.7V5.5C18.5,4,17.3,2.8,15.8,2.8z M5.3,10.7
c-0.6,0-0.9-0.4-0.9-0.4v0.3H3.3V6.3h1v1.7c0.4-0.4,0.9-0.4,0.9-0.4c1.4,0,1.5,1.6,1.5,1.6C6.7,10.7,5.3,10.7,5.3,10.7z M8.5,10.6
h-1V8.1c0-0.9-0.5-0.9-0.5-0.9v-1c1.5,0,1.5,1.6,1.5,1.6V10.6z M11,10.7c-1.8,0-1.7-1.6-1.7-1.6c0-1.6,1.7-1.6,1.7-1.6
c1.8,0,1.8,1.6,1.8,1.6C12.8,10.7,11,10.7,11,10.7z M16.7,10.6c0,1.6-1.5,1.6-1.5,1.6h-0.4v-0.9H15c0.7,0,0.7-0.8,0.7-0.8v-0.2
c-0.3,0.4-0.9,0.4-0.9,0.4c-1.5,0-1.4-1.6-1.4-1.6c0-1.7,1.5-1.6,1.5-1.6c0.6,0,0.9,0.4,0.9,0.4V7.6h1V10.6z"></path>
</svg>
</a>
</li>
<li>
<a href="https://post.naver.com/pro_nps" class="sns_bg4" target="_blank" id="npsShNaverCafe" title="네이버포스트">
<svg viewBox="0 0 20 20">
<polygon points="5.1,12.6 14.9,12.6 12.7,15.1 7.2,15.1 "></polygon>
<polygon points="8.1,16 11.9,16 10.1,18.2 "></polygon>
<path d="M5.1,1.8v9.9h9.9V1.8H5.1z M12,8.5h-1.4L9.5,6.8v1.6H8V4.9h1.5l1.3,1.9V4.9H12V8.5z"></path>
</svg>
</a>
</li>
<li>
<a href="https://www.facebook.com/proNPS" class="sns_bg5" target="_blank" id="npsShFacebook" title="페이스북">
<svg viewBox="0 0 20 20">
<path d="M11.3,18.3v-7.6h2.5l0.4-2.9h-2.9V5.9c0-0.9,0.2-1.4,1.5-1.4l1.6,0V1.8c-0.3,0-1.2-0.1-2.3-0.1c-2.3,0-3.8,1.4-3.8,3.9v2.2
H5.7v2.9h2.5v7.6H11.3z"></path>
</svg>
</a>
</li>
<li style="display: none;">
<a href="https://content.v.daum.net/3194/home" class="sns_bg6" target="_blank" id="npsSh1boon" title="콘텐츠뷰">
<svg viewBox="0 0 20 20">
<path d="M6.8,0.7l2-0.4v17.1h-2V0.7z"></path>
<polygon points="9.5,11.2 14.1,5.2 15.6,6.4 11.8,11.1 16.3,16.5 14.8,17.7 "></polygon>
</svg>
</a>
</li>
<li>
<a href="http://pf.kakao.com/_Kqxoxfq" class="sns_bg7" target="_blank" id="npsShKakaoStroy" title="카카오톡채널">
<svg viewBox="0 0 20 20">
<path d="M10,2.8c-4,0-7.2,2.8-7.2,6.2c0,2.1,1.2,4,3.1,5.1c-0.1,0.5-0.5,2-0.7,2.8c0,0.2,0.2,0.3,0.3,0.2l2.7-2.1
c0.6,0.1,1.2,0.2,1.8,0.2c4,0,7.2-2.8,7.2-6.2C17.2,5.6,14,2.8,10,2.8z"></path>
</svg>
</a>
</li>
<!-- <li>
<a href="https://twitter.com/NPS_2010" class="sns_bg8" target="_blank" id="npsShtwiter" title="트위터">
<svg viewBox="0 0 20 20">
<path d="M7.4,15.8c5.4,0,8.3-4.5,8.3-8.3c0-0.1,0-0.3,0-0.4c0.6-0.4,1.1-0.9,1.5-1.5C16.6,5.8,16,6,15.5,6c0.6-0.4,1.1-0.9,1.3-1.6
c-0.6,0.3-1.2,0.6-1.9,0.7c-0.5-0.6-1.3-0.9-2.1-0.9c-1.6,0-2.9,1.3-2.9,2.9c0,0.2,0,0.5,0.1,0.7c-2.4-0.1-4.6-1.3-6-3.1
C3.6,5.2,3.5,5.7,3.5,6.2c0,1,0.5,1.9,1.3,2.4c-0.5,0-0.9-0.1-1.3-0.4c0,0,0,0,0,0c0,1.4,1,2.6,2.3,2.9c-0.2,0.1-0.5,0.1-0.8,0.1
c-0.2,0-0.4,0-0.6-0.1c0.4,1.2,1.5,2,2.7,2c-1,0.8-2.3,1.3-3.6,1.3c-0.2,0-0.5,0-0.7,0C4.2,15.3,5.7,15.8,7.4,15.8"/>
</svg>
</a>
</li> -->
<li>
<a href="https://tv.naver.com/npstv" class="sns_bg9" target="_blank" id="npsShNaverTv" title="네이버TV">
<svg viewBox="0 0 20 20">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.7296" y1="14.8178" x2="5.4671" y2="3.0398">
<stop offset="0" style="stop-color:#fff"></stop>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"></stop>
</linearGradient>
<path class="sns_n_play_col1" d="M5.6,17.3L5.6,17.3c-1.1,0-2-0.9-2-2V4.6c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v10.7
C7.6,16.4,6.7,17.3,5.6,17.3z"></path>
<path d="M3.9,3.6L3.9,3.6c0.6-1,1.8-1.3,2.7-0.7l8.8,5.4c0.9,0.6,1.2,1.8,0.6,2.7l0,0.1c-0.6,0.9-1.8,1.2-2.7,0.6
L4.6,6.3C3.6,5.8,3.4,4.6,3.9,3.6z"></path>
<path d="M3.9,16.3L3.9,16.3c0.6,1,1.8,1.3,2.7,0.7l8.6-5.2c0.9-0.6,1.2-1.7,0.6-2.7l-0.1-0.1c-0.6-0.9-1.7-1.2-2.7-0.6
l-8.6,5.2C3.6,14.2,3.4,15.4,3.9,16.3z"></path>
</svg>
</a>
</li>
<li>
<a href="https://tv.kakao.com/channel/3135613/video" class="sns_bg10" target="_blank" id="npsShKakaoTv" title="카카오TV">
<svg viewBox="0 0 20 20">
<path d="M4.5,4.2v11.6c0,0.3,0.3,0.5,0.6,0.3l10.2-5.8c0.3-0.2,0.3-0.5,0-0.7L5.1,3.9C4.8,3.7,4.5,3.9,4.5,4.2z"></path>
</svg>
</a>
</li>
<li>
<a href="http://www.npswebzine.kr/" class="sns_bg11" target="_blank" id="npswebzine" title="내곁에 국민연금 웹진">
<svg viewBox="0 0 20 20">
<path d="M4.98864 17.0909L1 4H3.11364L5.94318 14.0227H6.07955L8.875 4H11.0227L13.7841 13.9886H13.9205L16.75 4H18.8636L14.875 17.0909H12.8977L10.0341 7.03409H9.82955L6.96591 17.0909H4.98864Z"></path>
</svg>
</a>
</li>
</ul>
<a href="#contents" class="move-top">
<svg viewBox="0 0 20 20">
<path d="M17.9,8.1l-7.3-7.3h7.1c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H2.4c-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3
h7.1L2.1,8.1C2,8.2,2,8.4,2.1,8.6c0.1,0.1,0.3,0.1,0.4,0l7.1-7.1v18c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V1.4l7.1,7.1
c0.1,0.1,0.1,0.1,0.2,0.1s0.2,0,0.2-0.1C18,8.5,18,8.3,17.9,8.1z"></path>
</svg>
</a>

157
src/html/index.html
View File

@ -1,7 +1,7 @@
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
@@include("./include/header.html")
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="container" id="main">
<h1 class="sr-only">NPS 국민연금공단 메인페이지</h1>
<div class="main-top">
@ -10,9 +10,9 @@
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "main", "subActive": ""})
<ul class="family-list">
<li class="item tv"><a href="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</a></li>
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
</ul>
</nav>
</div>
@ -75,9 +75,9 @@
</div>
</div>
<ul class="family-list mobile">
<li class="item tv"><a href="#">국민연금 TV</a></li>
<li class="item instagram"><a href="#">인스타그램</a></li>
<li class="item blog"><a href="#">블로그</a></li>
<li class="item tv"><a href="https://www.youtube.com/@NPS_kr" target="_blank">국민연금 TV</a></li>
<li class="item instagram"><a href="https://www.instagram.com/npstagram/" target="_blank">인스타그램</a></li>
<li class="item blog"><a href="https://blog.naver.com/pro_nps" target="_blank">블로그</a></li>
</ul>
<div class="main-bottom">
<div class="left-slide">
@ -86,6 +86,7 @@
<h2 class="slide-title">최신 글 모아보기</h2>
<div class="control-box">
<div class="swiper-pagination"></div>
<button type="button" title="이전" class="btn btn-left">
<span class="material-symbols-outlined icon">chevron_left</span>
</button>
@ -192,15 +193,115 @@
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">01</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">28</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">20</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">16</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">01</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 기금운용본부 자산운용전문가 모집!</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">28</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">해변에서 휴양을 즐기는 국민연금공단</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">20</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#">국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트</a></h4>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="link">
<dl>
<dt class="sr-only">등록일</dt>
<dd class="date">2024.07 <span class="big">16</span></dd>
</dl>
<div class="notice-text">
<h5 class="label"><a href="#">공지사항</a></h5>
<h4 class="title"><a href="#"><a href="#">바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다!</a></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="right-slide">
<div class="swiper-container">
<div class="title-box">
<h2 class="slide-title">국민연금 Shorts</h2>
<h2 class="slide-title">
<span class="title title-1">영상갤러리</span>
<span class="title title-2" style="display: none;">국민연금 Shorts</span>
</h2>
<div class="control-box">
<div class="swiper-pagination"></div>
<button type="button" title="이전" class="btn btn-left">
<span class="material-symbols-outlined icon">chevron_left</span>
</button>
@ -210,12 +311,7 @@
</div>
</div>
<ul class="swiper-wrapper short-list">
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')">
<a href="#" class="box-link">
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
</a>
</li>
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')">
<li class="swiper-slide box full" style="background-image:url('assets/images/ex/ex8.png')">
<a href="#" class="box-link">
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p>
</a>
@ -240,14 +336,20 @@
<script>
var recentNotice = new Swiper ('.left-slide .swiper-container', {
slidesPerView: 1,
loop: true,
loopFillGroupWithBlank: true,
initial:0,
grid: {
rows: 4,
rows: 4
},
pagination: {
el: ".left-slide .swiper-pagination",
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
autoplay: {
delay: 2000,
delay: 3000,
reverseDirection: true,
disableOnInteraction: false,
},
@ -258,21 +360,32 @@
})
var shortList = new Swiper ('.right-slide .swiper-container', {
slidesPerView: 2,
grid: {
rows: 1,
},
slidesPerView: "auto",
slidesPerGroupSkip: 1,
initial:0,
rewind: true,
pagination: {
el: ".right-slide .swiper-pagination",
},
autoplay: {
delay: 2000,
delay: 3000,
reverseDirection: true,
disableOnInteraction: false,
},
navigation: {
nextEl:".right-slide .btn-right",
prevEl: ".right-slide .btn-left",
},
on: {
init : function (){
$('.right-slide .slide-title .title-1').show();
},
slideChange: function () {
console.log(this.realIndex);
var current = this.realIndex;
$('.right-slide .slide-title .title').hide(); // 모든 타이틀을 숨김
$('.right-slide .slide-title .title-' + (current + 1)).show(); // 현재 인덱스에 해당하는 타이틀을 표시
},
}
})
</script>

24
src/html/news/detail.html
View File

@ -15,11 +15,11 @@
<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": "news"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news", "ROOT": ".."})
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">[7월 달력이미지무료배포] 해변에서 휴양을 즐기는 국민연금공단</h2>
@ -1278,21 +1278,6 @@
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">[5월 달력 이미지 무료배포] 5월에는 역시 놀이공원 나들이</a>
</h4>
</div>
</li>
</ul>
</div>
<div class="form-content-wrap">
@ -1354,7 +1339,8 @@
<!-- 폼 2 끝 -->
</div>
<a href="clips.html" class="btn-list-prev">목록으로</a>
<a href="news.html" class="btn-list-prev">목록으로</a>
@@include("../../html/include/sub-sns.html")
</main>
</div>

5
src/html/news/news.html
View File

@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "news", "ROOT": ".."})
</aside>
<main class="page-contents">
@ -156,6 +156,7 @@
</div>
@@include("../../html/include/pagination.html")
@@include("../../html/include/sub-sns.html")
</main>
</div>

37
src/html/shorts/detail.html
View File

@ -5,7 +5,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
@ -15,11 +15,11 @@
<div class="sub-main container" id="board">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts", "ROOT": ".."})
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">국민연금, 내고 싶은 사람만 내면 안되나요?</h2>
@ -111,34 +111,6 @@
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">199X년생부터 국민연금
을 하나도 못 받는다고?!</a>
</h4>
</div>
</li>
<li class="item">
<figure class="thumbnail">
<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="detail.html">유럽 vs 우리나라
국민연금 급여 차이는?</a>
</h4>
</div>
</li>
</ul>
</div>
@ -201,6 +173,7 @@
<!-- 폼 2 끝 -->
</div>
<a href="shorts.html" class="btn-list-prev">목록으로</a>
@@include("../../html/include/sub-sns.html")
</main>
</div>

8
src/html/shorts/shorts.html
View File

@ -4,7 +4,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="detail.html">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../clips/clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
@ -14,8 +14,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "clips", "subActive": "shorts", "ROOT": ".."})
</aside>
<main class="page-contents">
@ -202,7 +202,7 @@
</div>
@@include("../../html/include/pagination.html")
@@include("../../html/include/sub-sns.html")
</main>
</div>

34
src/html/toons/detail.html
View File

@ -5,7 +5,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
@ -15,11 +15,11 @@
<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"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons", "ROOT": ".."})
</aside>
<main class="page-contents">
<main class="page-contents detail">
<div class="contents-header">
<header class="page-header">
<h2 class="contents-title">신입사원의 귀여운 실수?</h2>
@ -109,30 +109,6 @@
</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>
@ -197,6 +173,8 @@
</div>
<a href="toons.html" class="btn-list-prev">목록으로</a>
@@include("../../html/include/sub-sns.html")
</main>
</div>

7
src/html/toons/toons.html
View File

@ -5,7 +5,7 @@
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="">홈</a></li>
<li><a href="../index.html">홈</a></li>
<li><a href="../news/news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
@ -15,8 +15,8 @@
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("../../html/include/search_box.html")
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons"})
@@include("../../html/include/search_box.html", {"ROOT": ".."})
@@include("../../html/include/left_menu.html", {"active": "news", "subActive": "toons", "ROOT": ".."})
</aside>
<main class="page-contents">
@ -140,6 +140,7 @@
</div>
@@include("../../html/include/pagination.html")
@@include("../../html/include/sub-sns.html")
</main>
</div>

111
src/scss/common/_layout.scss
View File

@ -276,8 +276,8 @@ body:has(#mobile-left-menu.opened) {
> a {
&:after{
width:REM(21px);
height:REM(15px);
margin-left:REM(8px);
height:REM(21px);
left:REM(7px);
@include background-image('../images/common/tv.png')
}
}
@ -285,9 +285,9 @@ body:has(#mobile-left-menu.opened) {
&.instagram {
> a {
&:after{
width:REM(19px);
height:REM(19px);
margin-left:REM(8.5px);
width:REM(21px);
height:REM(21px);
left:REM(7px);
@include background-image('../images/common/instagram.png')
}
}
@ -296,8 +296,8 @@ body:has(#mobile-left-menu.opened) {
> a {
&:after{
width:REM(21px);
height:REM(17px);
margin-left:REM(8px);
height:REM(21px);
left:REM(7px);
@include background-image('../images/common/blog.png')
}
}
@ -382,12 +382,12 @@ body:has(#mobile-left-menu.opened) {
}
dt {
font-weight:$font-weight-base;
font-size:REM(8px);
font-size:REM(10px);
color:#fff;
}
dd {
font-weight:$font-weight-base;
font-size:REM(8px);
font-size:REM(10px);
color:#fff;
> br{
display: none;
@ -468,6 +468,7 @@ body:has(#mobile-left-menu.opened) {
border-radius: REM(15px);
position:relative;
box-sizing: border-box;
border:REM(1px) solid #C8C8C8FF;
.link {
@include background-image('../images/common/on-air.png');
background-size: REM(142px) REM(38px);
@ -530,15 +531,15 @@ body:has(#mobile-left-menu.opened) {
.menu-list {
border-radius: REM(15px);
width: REM(169px);
min-height: REM(158px);
//min-height: REM(158px);
margin-top: REM(12px);
border:REM(1px) solid #C8C8C8FF;
.item {
position:relative;
.link {
display: block;
padding:REM(12px) 0;
padding:REM(12.5px) 0;
font-size:REM(13.52px);
text-align: center;
line-height:1;
@ -675,5 +676,91 @@ body:has(#mobile-left-menu.opened) {
.page-contents {
flex:1;
min-width:0;
position:relative;
}
}
.sns-sub {
display: none;
position:relative;
top:inherit;
left:inherit;
right:inherit;
text-align:center;
padding:REM(30px / 3) REM(45px / 3);
max-width:REM(500px / 3);
width: 100%;
margin:REM(30px / 3) auto 0 auto;
@include display-xs(){
display: block;
}
&:before{
content:"";
position:absolute;
width:200%;
height:100%;
background-color:#fff;
top:0;
left:50%;
transform: translate(-50%, 0);
}
li{
display:inline-block;
margin:REM(5px / 3);
a {
width: REM(60px / 3);
height: REM(60px / 3);
border-radius: 50%;
background: #bcc0c9;
display: block;
position: relative;
transition: .2s;
svg {
position: absolute;
top: 50%;
left: 50%;
width: REM(40px / 3);
height: REM(40px / 3);
transform: translate(-50%, -50%);
fill: #fff;
}
}
}
}
.page-contents.detail {
.sns-sub {
&:before{
background-color:transparent;
}
}
}
.move-top{
position:absolute;
bottom:REM(10px);
right:REM(-100px);
z-index:1;
width:REM(44px);
height:REM(44px);
font-size:0;
background:rgba(255,255,255,1);
transition:.2s;
box-shadow:2px 3px 8px rgba(0,0,0,0.15);
border-radius:50%;
@include display-xs(){
display: none;
}
svg {
position:absolute;
top:50%;
left:50%;
width:REM(20px);
height:REM(20px);
transform:translate(-50%,-50%);
fill:#666A70;
transition:.2s
}
:hover svg{transform:translate(-50%,-70%)}
}

32
src/scss/pages/_lists.scss
View File

@ -35,13 +35,15 @@
.item-content {
.item-title {
color:#02256c;
font-size:REM(16px);
font-size:REM(14px);
display:block;
width:100%;
/*
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.025em;
*/
font-weight:700;
a {
@ -61,9 +63,8 @@
}
}
.item-summary {
font-size:REM(13px);
font-size:REM(12px);
color:#252525;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -71,7 +72,7 @@
letter-spacing: -0.025em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 REM(5px) 0;
margin: REM(5px) 0 REM(5px) 0;
font-weight:500;
height: 1.28em * 2;
-webkit-line-clamp: 2;
@ -100,7 +101,7 @@
}
dd {
font-size:REM(14px);
font-size:REM(12px);
color:#959595;
font-weight:500;
@include display-xs(){
@ -130,7 +131,7 @@
flex:1;
min-width:0;
padding:REM(8px) 0;
padding:0 0 REM(8px) 0;
.item-summary {
height: 1.28em * 4;
@ -178,7 +179,7 @@
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
font-size:REM(14px);
white-space: initial;
}
}
@ -221,12 +222,6 @@
margin:0 auto REM(10px)
}
.item-content {
.item-title {
font-size:REM(20px);
}
}
@include display-xs(){
width:100%;
padding:REM(15px / 3) REM(20px / 3);
@ -236,13 +231,6 @@
width:100%;
height:auto;
}
.item-content {
.item-title{
font-size:REM(33px / 3);
margin-bottom:REM(12px / 3);
}
}
}
}
&.inner{
@ -262,7 +250,7 @@
.item-content {
padding-left:REM(15px);
.item-title {
font-size:REM(15px);
font-size:REM(14px);
white-space: initial;
}
}
@ -304,6 +292,7 @@
}
.item-content {
/*
.item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
@ -316,6 +305,7 @@
white-space: normal;
word-break: break-all;
}
*/
}
}

48
src/scss/pages/main.scss
View File

@ -58,6 +58,7 @@
height: REM(229px);
background-color:#33CC99FF;
overflow:hidden;
border:REM(1px) solid #C8C8C8FF;
.link {
width: 100%;
height:100%;
@ -137,6 +138,7 @@
border-radius: REM(20px / 3);
width: REM(310px / 3);
height: REM(367px / 3);
border:REM(1px) solid #C8C8C8FF;
.link {
padding:REM(20px / 3);
@include display-flex();
@ -205,6 +207,7 @@
}
.bottom {
border-radius: REM(15px);
border:REM(1px) solid #C8C8C8FF;
width: REM(192px);
height: REM(112px);
background-color:#FFB400FF;
@ -215,7 +218,7 @@
padding:REM(10px) REM(10px);
}
.title{
font-size:REM(19px);
font-size:REM(18px);
font-weight:$font-weight-extra-bold;
line-height:1.15;
color:#fff;
@ -223,7 +226,6 @@
padding-bottom:REM(28px);
position:relative;
letter-spacing: REM(-1px);
&:before{
content:"";
width:REM(66px);
@ -378,8 +380,8 @@
> a {
&:after{
width:REM(22px / 3);
height:REM(15px / 3);
margin-left:REM(8px / 3);
height:REM(22px / 3);
margin-left:REM(8.5px / 3);
@include background-image('../images/common/tv.png')
}
}
@ -388,8 +390,8 @@
margin-left:REM(50px / 3);
> a {
&:after{
width:REM(19px / 3);
height:REM(19px / 3);
width:REM(22px / 3);
height:REM(22px / 3);
margin-left:REM(9px / 3);
@include background-image('../images/common/instagram.png')
}
@ -399,9 +401,9 @@
margin-left:REM(50px / 3);
> a {
&:after{
width:REM(21px / 3);
height:REM(17px / 3);
margin-left:REM(8px / 3);
width:REM(22px / 3);
height:REM(22px / 3);
margin-left:REM(8.5px / 3);
@include background-image('../images/common/blog.png')
}
}
@ -453,12 +455,24 @@
justify-content: center;
margin-left:REM(15px);
line-height:1;
padding:0;
&.btn-right{
margin-left:REM(5px);
}
.icon {
font-size:REM(24px);
}
&:active,
&:hover,
&:focus,
&:focus-visible,
&:focus-within{
width:100%;
outline: none;
background-color: #d5d8e1;
cursor: pointer;
overflow:hidden;
}
}
.swiper-pagination {
position:relative;
@ -646,6 +660,14 @@
&.swiper-slide{
margin-right:REM(8px);
}
&:last-child {
margin-right:0;
}
}
.swiper-slide.full {
width:100% !important;
height:REM(195px);
border-radius: REM(20px);
}
.btn-more{
display: none;
@ -662,6 +684,14 @@
&.swiper-slide{
margin-right:REM(13px / 3);
}
&:last-child {
margin-right:0;
}
}
.swiper-slide.full {
width:100% !important;
height:REM(390px / 3);
border-radius: REM(45px / 3);
}
.btn-more {
display: block;

Write Preview
Loading…
Cancel
Save