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

작업

master
songwritersg 5 months ago
parent
02c366f575
commit
a5c3125924
29 changed files with 10014 additions and 4839 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. 5
      .gitignore
  2. 519
      dist/assets/css/style.css
  3. 2
      dist/assets/css/style.min.css
  4. 2
      dist/assets/css/style.min.css.map
  5. BIN
      dist/assets/images/ex/clips-01.png
  6. BIN
      dist/assets/images/ex/news-01.png
  7. BIN
      dist/assets/images/ex/shorts-01.png
  8. BIN
      dist/assets/images/ex/toon-01.png
  9. 365
      dist/clips.html
  10. 39
      dist/index.html
  11. 357
      dist/news.html
  12. 345
      dist/shorts.html
  13. 349
      dist/toons.html
  14. 9
      package.json
  15. 73
      src/html/clips.html
  16. 25
      src/html/include/left_menu.html
  17. 23
      src/html/include/pagination.html
  18. 6
      src/html/include/search_box.html
  19. 14
      src/html/index.html
  20. 65
      src/html/news.html
  21. 53
      src/html/shorts.html
  22. 57
      src/html/toons.html
  23. 254
      src/scss/common/_layout.scss
  24. 32
      src/scss/components/_breadcrumbs.scss
  25. 21
      src/scss/components/_contents_box.scss
  26. 47
      src/scss/components/_pagination.scss
  27. 259
      src/scss/pages/_lists.scss
  28. 6
      src/scss/style.scss
  29. 11926
      yarn.lock

5
.gitignore
View File

@ -49,4 +49,7 @@ crashlytics-build.properties
node_modules/
package-lock.json
yarn.lock
yarn.lock
.yarn
.yarnrc.yml

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

@ -331,12 +331,7 @@ html {
letter-spacing: -0.04em;
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
overflow-x: hidden;
font-size: 1.6666666667vw;
}
@media screen and (min-width: 1921px) {
html {
font-size: 20px;
}
font-size: 20px;
}
@media screen and (max-width: 768px) {
html {
@ -543,87 +538,6 @@ html {
#nav {
width: 10.5625rem;
}
#nav .search-box {
width: 10.5625rem;
height: 8.4375rem;
background-color: #fff;
padding: 4.125rem 0.75rem 1.25rem 0.75rem;
border-radius: 0.9375rem;
position: relative;
box-sizing: border-box;
}
#nav .search-box:before {
content: "";
background-color: transparent;
background-image: url("../images/common/on-air.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
width: 8.875rem;
height: 2.375rem;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1.6875rem;
}
#nav .search-box .search-form {
width: 100%;
position: relative;
margin-top: 1.25rem;
}
#nav .search-box .search-form .input {
width: 100%;
height: 1.6875rem;
border-radius: 2.4375rem;
border: 0.0625rem solid #26356b;
padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
box-sizing: border-box;
}
#nav .search-box .search-form .search-btn {
width: 1rem;
height: 1.0625rem;
position: absolute;
right: 0.3125rem;
top: 50%;
transform: translate(0, -50%);
border: none;
background-color: #fff;
padding: 0;
}
#nav .search-box .search-form .search-btn .icon {
font-size: 1rem;
color: #26356b;
}
#nav .menu-list {
background-color: #fff;
border-radius: 0.9375rem;
width: 10.5625rem;
height: 9.875rem;
margin-top: 0.75rem;
}
#nav .menu-list .item .link {
display: block;
padding: 0.75rem 0;
font-size: 0.845rem;
text-align: center;
line-height: 1;
}
#nav .menu-list .item + .item {
border-top: 0.0625rem solid #cccccc;
}
#nav .menu-list .item.active {
background-color: #02256c;
}
#nav .menu-list .item.active .link {
color: #fff;
}
#nav .menu-list .item.active.first {
border-radius: 0.9375rem 0.9375rem 0 0;
}
#nav .menu-list .item.active.last {
border-radius: 0 0 0.9375rem 0.9375rem;
}
#nav .family-list {
margin-top: 0.75rem;
position: relative;
@ -838,6 +752,145 @@ html {
}
}
/**
* 좌측 로고&검색박스
*/
.search-box {
width: 10.5625rem;
height: 8.4375rem;
background-color: #fff;
padding: 4.125rem 0.75rem 1.25rem 0.75rem;
border-radius: 0.9375rem;
position: relative;
box-sizing: border-box;
}
.search-box:before {
content: "";
background-color: transparent;
background-image: url("../images/common/on-air.png");
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: cover;
width: 8.875rem;
height: 2.375rem;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1.6875rem;
}
.search-box .search-form {
width: 100%;
position: relative;
margin-top: 1.25rem;
}
.search-box .search-form .input {
width: 100%;
height: 1.6875rem;
border-radius: 2.4375rem;
border: 0.0625rem solid #26356b;
padding: 0.3125rem 1.125rem 0.3125rem 0.75rem;
box-sizing: border-box;
}
.search-box .search-form .search-btn {
width: 1rem;
height: 1.0625rem;
position: absolute;
right: 0.3125rem;
top: 50%;
transform: translate(0, -50%);
border: none;
background-color: #fff;
padding: 0;
}
.search-box .search-form .search-btn .icon {
font-size: 1rem;
color: #26356b;
}
/**
* 좌측 메뉴
*/
.menu-list {
border-radius: 0.9375rem;
width: 10.5625rem;
min-height: 9.875rem;
margin-top: 0.75rem;
}
.menu-list .item {
position: relative;
}
.menu-list .item .link {
display: block;
padding: 0.75rem 0;
font-size: 0.845rem;
text-align: center;
line-height: 1;
transition: background-color 0.3s ease, color 0.3s ease;
background-color: #fff;
}
.menu-list .item:first-child .link {
border-radius: 0.9375rem 0.9375rem 0 0;
}
.menu-list .item:last-child .link {
border-radius: 0 0 0.9375rem 0.9375rem;
}
.menu-list .item + .item {
border-top: 0.0625rem solid #cccccc;
}
.menu-list .item:hover .link, .menu-list .item.active .link {
background-color: #02256c;
color: #fff;
}
.menu-list .item:hover .submenu {
display: block;
}
.menu-list .item .submenu {
position: absolute;
left: 100%;
top: 0;
z-index: 10;
display: none;
}
.menu-list .item .submenu li a {
display: flex;
border: 1px solid #cccccc;
width: 9.5625rem;
height: 2.4375rem;
justify-content: center;
align-items: center;
background-color: #fff;
transition: background-color 0.3s ease;
font-weight: 500;
font-size: 0.84625rem;
}
.menu-list .item .submenu li:hover a, .menu-list .item .submenu li.active a {
background-color: #ccc;
}
.menu-list .item .submenu li:first-child a {
border-radius: 0.9375rem 0.9375rem 0 0;
}
.menu-list .item .submenu li:last-child a {
border-radius: 0 0 0.9375rem 0.9375rem;
}
/**
* 서브페이지
*/
.sub-main {
width: 100%;
display: flex;
}
.sub-main .left-nav {
width: 10.625rem;
flex-shrink: 0;
margin-right: 1rem;
}
.sub-main .page-contents {
flex: 1;
min-width: 0;
}
/***************************************************************************************
* 유틸리티
****************************************************************************************/
@ -2611,6 +2664,84 @@ html {
/***************************************************************************************
* 버튼
****************************************************************************************/
.breadcrumb {
width: 100%;
margin: 0 0 0.3125rem 0;
padding: 0 0 0 11.625rem;
}
.breadcrumb ol {
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
.breadcrumb ol li a, .breadcrumb ol li span {
color: #252525;
font-size: 0.875rem;
font-weight: 600;
}
.breadcrumb ol li + li a:before, .breadcrumb ol li + li span:before {
content: ">";
color: #252525;
font-size: 0.875rem;
font-weight: 600;
margin: 0 0.1875rem;
}
.contents-box {
background: #fff;
border-radius: 0.9375rem;
padding: 1rem 2rem;
margin: 0 0 1.25rem 0;
}
.contents-box .contents-header {
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: 2px solid #02256c;
padding: 0.625rem 0;
}
.contents-box .contents-header .contents-title {
font-size: 1.5625rem;
color: #02256c;
font-weight: 600;
line-height: 1em;
}
.pagination {
display: block;
width: 100%;
}
.pagination ol {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.pagination ol li a, .pagination ol li span {
display: flex;
width: 1.75rem;
height: 1.75rem;
justify-content: center;
align-items: center;
border-radius: 100%;
color: #707070;
background-color: transparent;
transition: color 0.3s ease, background-color 0.3s ease;
cursor: pointer;
}
.pagination ol li.active a, .pagination ol li.active span, .pagination ol li:not(.disabled):not(.active):hover a, .pagination ol li:not(.disabled):not(.active):hover span {
background-color: #02256c;
color: #fff;
}
.pagination ol li.active a, .pagination ol li.active span {
cursor: default;
}
.pagination ol li.disabled a, .pagination ol li.disabled span {
opacity: 0.4;
cursor: default;
}
/***************************************************************************************
* 플러그인 커스텀
****************************************************************************************/
@ -3306,4 +3437,218 @@ html {
height: 1.6458333333rem;
margin: 0.7708333333rem 0 1.1875rem 0;
}
}
.common-list {
list-style: none;
padding: 0;
margin: 0;
}
.common-list .thumbnail {
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
}
.common-list .thumbnail .thumbnail-link {
display: flex;
width: 100%;
height: 100%;
}
.common-list .thumbnail .thumbnail-link .thumbnail-img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.common-list .item-content .item-title {
color: #02256c;
font-size: 1rem;
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 {
color: inherit;
}
.common-list .item-content .item-title a:hover {
text-decoration: underline;
}
.common-list .item-content .item-summary {
font-size: 0.875rem;
color: #252525;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
letter-spacing: -0.025em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 0.3125rem 0;
font-weight: 500;
height: 2.56em;
-webkit-line-clamp: 2;
line-height: 1.28em;
}
.common-list .item-content .item-summary a {
color: inherit;
}
.common-list .item-content .item-summary a:hover {
text-decoration: underline;
}
.common-list .item-content .item-info {
margin: 0;
padding: 0;
}
.common-list .item-content .item-info dl {
margin: 0;
display: flex;
align-items: center;
}
.common-list .item-content .item-info dl dt {
margin: 0 0.625rem 0 0;
}
.common-list .item-content .item-info dl dd {
font-size: 0.875rem;
color: #959595;
font-weight: 500;
}
.common-list.news .item {
display: flex;
padding: 1.25rem 0;
border-bottom: 1px solid #02256c;
}
.common-list.news .item .thumbnail {
width: 11.375rem;
height: 8.3125rem;
flex-shrink: 0;
margin-right: 0.8125rem;
}
.common-list.news .item .item-content {
flex: 1;
min-width: 0;
padding: 0.5rem 0;
}
.common-list.news .item .item-content .item-summary {
height: 5.12em;
-webkit-line-clamp: 4;
line-height: 1.28em;
}
.common-list.toons {
display: flex;
flex-wrap: wrap;
}
.common-list.toons .item {
width: 50%;
padding: 0.625rem 0.9375rem;
}
.common-list.toons .item .thumbnail {
width: 13.5rem;
height: 13.5rem;
margin: 0 auto 0.625rem;
}
.common-list.toons .item .item-content .item-title {
font-size: 1.25rem;
}
.common-list.shorts {
margin: 0 -0.25rem;
display: flex;
flex-wrap: wrap;
}
.common-list.shorts .item {
width: 25%;
padding: 1.25rem 0.25rem;
}
.common-list.shorts .item .thumbnail {
width: 8.375rem;
height: 13.75rem;
margin: 0 0 0.5rem;
}
.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;
-webkit-line-clamp: 2;
line-height: 1.28em;
white-space: normal;
word-break: break-all;
}
.common-list.clips {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: -1.25rem -0.25rem;
padding-bottom: 1.875rem;
}
.common-list.clips .item {
padding: 1.25rem 0.25rem;
width: 25%;
border-bottom: 1px solid #c2c2c2;
}
.common-list.clips .item .thumbnail {
width: 100%;
height: 5.9375rem;
}
.common-list.clips .item .item-title {
font-size: 0.8125rem;
}
.common-list.clips .item .item-summary {
font-size: 0.8125rem;
height: 2.56em;
-webkit-line-clamp: 2;
line-height: 1.28em;
}
.tag-container {
width: 100%;
display: flex;
border: 1px solid #b7b7b7;
padding: 0.625rem;
align-items: stretch;
margin: 0.75rem 0 1.5625rem;
border-radius: 0.9375rem;
}
.tag-container .tag-title {
flex-shrink: 0;
color: #000000;
margin-right: 1.5625rem;
display: flex;
align-items: center;
font-size: 1.450625rem;
padding: 0 1.25rem;
}
.tag-container .tag-list {
list-style: none;
padding: 0;
margin: -0.1875rem;
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
}
.tag-container .tag-list li {
padding: 0.1875rem;
}
.tag-container .tag-list li a {
display: flex;
justify-content: center;
align-items: center;
height: 1.75rem;
border-radius: 0.875rem;
background-color: #ffffff;
color: #464646;
font-size: 1.02625rem;
padding: 0 0.875rem;
box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
}
.tag-container .tag-list li.active a {
background-color: #02256c;
color: #fff;
}

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/ex/clips-01.png
View File

Side by Side

After

Width: 135  |  Height: 98  |  Size: 31 KiB

BIN
dist/assets/images/ex/news-01.png
View File

Side by Side

After

Width: 182  |  Height: 133  |  Size: 33 KiB

BIN
dist/assets/images/ex/shorts-01.png
View File

Side by Side

After

Width: 134  |  Height: 220  |  Size: 22 KiB

BIN
dist/assets/images/ex/toon-01.png
View File

Side by Side

After

Width: 216  |  Height: 216  |  Size: 40 KiB

365
dist/clips.html
View File

@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>영상갤러리 - 동영상</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header id="header">
<div class="container">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
<header class="mobile-header">
<span class="m-button"></span>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
</header>
<nav class="mobile-nav">
<ul>
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 제도</a>
<ul class="sub-menu">
<li><a href="">제도 정보</a></li>
<li><a href="">NPS 팩트체크</a></li>
<li><a href="">연금 개혁</a></li>
<li><a href="">국민연금 용어사전</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 기금</a>
<ul class="sub-menu">
<li><a href="">기금운용 현황</a></li>
<li><a href="">기금운용 이슈</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
</ul>
</li>
</ul>
<a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
</nav>
</aside>
<script>
const mainMenuLinks = document.querySelectorAll('.depth-1');
mainMenuLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
// Close all other sub-menus
mainMenuLinks.forEach(otherLink => {
if (otherLink !== link) {
const otherSubMenu = otherLink.nextElementSibling;
otherSubMenu.classList.remove('open');
otherLink.classList.remove('active');
}
});
// Toggle the clicked sub-menu
const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
if (!subMenu.classList.contains('open')) {
subMenu.classList.add('open');
this.classList.add('active');
} else {
subMenu.classList.remove('open');
this.classList.remove('active');
}
});
});
</script>
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><span>동영상</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last first active ">
<a href="./clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class="active"><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">동영상</h2>
</header>
<div class="tag-container">
<h4 class="tag-title">모아보기</h4>
<ul class="tag-list">
<li class="active"><a href="">#콕콕연금뉴스</a></li>
<li><a href="">#연금이랑 알아볼게</a></li>
<li><a href="">#캠페인 영상</a></li>
<li><a href="">#광고</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
</ul>
</div>
<ul class="common-list clips">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
</p>
</div>
</li>
</ul>
</div>
<nav class="pagination">
<ol>
<li class="prev disabled">
<span>&lt;&lt;</span>
</li>
<li class="active">
<span>1</span>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li class="next">
<a href="">&gt;&gt;</a>
</li>
</ol>
</nav>
</main>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer id="footer">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
</div>
<div class="footer-info">
<dl>
<dt>우편번호</dt>
<dd>54870</dd>
</dl>
<dl>
<dt class="sr-only">주소</dt>
<dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
</dl>
<dl>
<dt>고객센터</dt>
<dd>1355(유료)</dd>
</dl>
</div>
<p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

39
dist/index.html
View File

@ -174,17 +174,36 @@
<div class="line-01">
<nav id="nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item first active"><a href="#" class="link">국민연금 소식</a></li>
<li class="item"><a href="#" class="link">국민연금 제도</a></li>
<li class="item"><a href="#" class="link">국민연금 기금</a></li>
<li class="item last"><a href="#" class="link">영상갤러리</a></li>
</ul>
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./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>

357
dist/news.html
View File

@ -0,0 +1,357 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>국민염금 소식 - 새 소식</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header id="header">
<div class="container">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
<header class="mobile-header">
<span class="m-button"></span>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
</header>
<nav class="mobile-nav">
<ul>
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 제도</a>
<ul class="sub-menu">
<li><a href="">제도 정보</a></li>
<li><a href="">NPS 팩트체크</a></li>
<li><a href="">연금 개혁</a></li>
<li><a href="">국민연금 용어사전</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 기금</a>
<ul class="sub-menu">
<li><a href="">기금운용 현황</a></li>
<li><a href="">기금운용 이슈</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
</ul>
</li>
</ul>
<a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
</nav>
</aside>
<script>
const mainMenuLinks = document.querySelectorAll('.depth-1');
mainMenuLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
// Close all other sub-menus
mainMenuLinks.forEach(otherLink => {
if (otherLink !== link) {
const otherSubMenu = otherLink.nextElementSibling;
otherSubMenu.classList.remove('open');
otherLink.classList.remove('active');
}
});
// Toggle the clicked sub-menu
const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
if (!subMenu.classList.contains('open')) {
subMenu.classList.add('open');
this.classList.add('active');
} else {
subMenu.classList.remove('open');
this.classList.remove('active');
}
});
});
</script>
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>새 소식</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item first active ">
<a href="./news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class="active"><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">새소식</h2>
</header>
<ul class="common-list news">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
</h4>
<p class="item-summary">
(지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
</p>
<div class="item-info">
<dl>
<dt class="sr-only">등록일</dt>
<dd>2024.07.01</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
<nav class="pagination">
<ol>
<li class="prev disabled">
<span>&lt;&lt;</span>
</li>
<li class="active">
<span>1</span>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li class="next">
<a href="">&gt;&gt;</a>
</li>
</ol>
</nav>
</main>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer id="footer">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
</div>
<div class="footer-info">
<dl>
<dt>우편번호</dt>
<dd>54870</dd>
</dl>
<dl>
<dt class="sr-only">주소</dt>
<dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
</dl>
<dl>
<dt>고객센터</dt>
<dd>1355(유료)</dd>
</dl>
</div>
<p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

345
dist/shorts.html
View File

@ -0,0 +1,345 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>영상갤러리 - Shorts</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header id="header">
<div class="container">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
<header class="mobile-header">
<span class="m-button"></span>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
</header>
<nav class="mobile-nav">
<ul>
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 제도</a>
<ul class="sub-menu">
<li><a href="">제도 정보</a></li>
<li><a href="">NPS 팩트체크</a></li>
<li><a href="">연금 개혁</a></li>
<li><a href="">국민연금 용어사전</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 기금</a>
<ul class="sub-menu">
<li><a href="">기금운용 현황</a></li>
<li><a href="">기금운용 이슈</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
</ul>
</li>
</ul>
<a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
</nav>
</aside>
<script>
const mainMenuLinks = document.querySelectorAll('.depth-1');
mainMenuLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
// Close all other sub-menus
mainMenuLinks.forEach(otherLink => {
if (otherLink !== link) {
const otherSubMenu = otherLink.nextElementSibling;
otherSubMenu.classList.remove('open');
otherLink.classList.remove('active');
}
});
// Toggle the clicked sub-menu
const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
if (!subMenu.classList.contains('open')) {
subMenu.classList.add('open');
this.classList.add('active');
} else {
subMenu.classList.remove('open');
this.classList.remove('active');
}
});
});
</script>
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item ">
<a href="./news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class=""><a href="./toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last first active ">
<a href="./clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class="active"><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">Shorts</h2>
</header>
<ul class="common-list shorts">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
</h4>
</div>
</li>
</ul>
</div>
<nav class="pagination">
<ol>
<li class="prev disabled">
<span>&lt;&lt;</span>
</li>
<li class="active">
<span>1</span>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li class="next">
<a href="">&gt;&gt;</a>
</li>
</ol>
</nav>
</main>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer id="footer">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
</div>
<div class="footer-info">
<dl>
<dt>우편번호</dt>
<dd>54870</dd>
</dl>
<dl>
<dt class="sr-only">주소</dt>
<dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
</dl>
<dl>
<dt>고객센터</dt>
<dd>1355(유료)</dd>
</dl>
</div>
<p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

349
dist/toons.html
View File

@ -0,0 +1,349 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>국민염금 소식 - 국민연금 인스타 툰</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header id="header">
<div class="container">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #52565b; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #52565b; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
<a href="https://www.nps.or.kr/jsppage/csa/csa.jsp" target="_blank" class="link">내연금 알아보기</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<header class="mobile-header">
<button class="m-button toggle-menu" type="button" data-button="toggle-menu">메뉴 토글</button>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button toggle-search" type="button">검색 메뉴 토글</button>
</header>
<aside id="mobile-left-menu">
<header class="mobile-header">
<span class="m-button"></span>
<a href="/" class="mobile-logo">국민연금 ON AIR</a>
<button class="m-button close-menu" type="button" data-button="toggle-menu">검색 메뉴 토글</button>
</header>
<nav class="mobile-nav">
<ul>
<li>
<a href="" class="depth-1 active">국민연금 소식</a>
<ul class="sub-menu open">
<li><a href="">새소식</a></li>
<li><a href="">ESG</a></li>
<li><a href="">이벤트</a></li>
<li><a href="">대학생 홍보대사</a></li>
<li><a href="">국민연금 인스타툰</a></li>
<li><a href="">국민연금 수기</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 제도</a>
<ul class="sub-menu">
<li><a href="">제도 정보</a></li>
<li><a href="">NPS 팩트체크</a></li>
<li><a href="">연금 개혁</a></li>
<li><a href="">국민연금 용어사전</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">국민연금 기금</a>
<ul class="sub-menu">
<li><a href="">기금운용 현황</a></li>
<li><a href="">기금운용 이슈</a></li>
<li><a href="">전문가 시선</a></li>
</ul>
</li>
<li>
<a href="" class="depth-1">영상갤러리</a>
<ul class="sub-menu">
<li><a href="">동영상</a></li>
<li><a href="">Shorts</a></li>
</ul>
</li>
</ul>
<a href="#" target="_blank" class="btn-more">내 연금 알아보기</a>
</nav>
</aside>
<script>
const mainMenuLinks = document.querySelectorAll('.depth-1');
mainMenuLinks.forEach(link => {
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
// Close all other sub-menus
mainMenuLinks.forEach(otherLink => {
if (otherLink !== link) {
const otherSubMenu = otherLink.nextElementSibling;
otherSubMenu.classList.remove('open');
otherLink.classList.remove('active');
}
});
// Toggle the clicked sub-menu
const subMenu = this.nextElementSibling; // Get the next sibling element (the sub-menu)
if (!subMenu.classList.contains('open')) {
subMenu.classList.add('open');
this.classList.add('active');
} else {
subMenu.classList.remove('open');
this.classList.remove('active');
}
});
});
</script>
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item first active ">
<a href="./news.html" class="link">국민연금 소식</a>
<ul class="submenu">
<li class=""><a href="./news.html">새소식</a></li>
<li><a href="./news.html">ESG</a></li>
<li><a href="./toons.html">이벤트</a></li>
<li><a href="./toons.html">대학생 홍보대사</a></li>
<li class="active"><a href="./toons.html">국민연금 인스타툰</a></li>
</ul>
</li>
<li class="item">
<a href="#" class="link">국민연금 제도</a>
</li>
<li class="item">
<a href="#" class="link">국민연금 기금</a>
</li>
<li class="item last ">
<a href="./clips.html" class="link">영상갤러리</a>
<ul class="submenu">
<li class=""><a href="./clips.html">동영상</a></li>
<li class=""><a href="./shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">국민연금 인스타 툰</h2>
</header>
<ul class="common-list toons">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
<dt class="sr-only">등록일</dt>
<dd>2024.07.01</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
<nav class="pagination">
<ol>
<li class="prev disabled">
<span>&lt;&lt;</span>
</li>
<li class="active">
<span>1</span>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li class="next">
<a href="">&gt;&gt;</a>
</li>
</ol>
</nav>
</main>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer id="footer">
<div class="logo-box">
<svg id="logo" viewBox="0 0 309.14 49.01" xml:space="preserve">
<defs>
<linearGradient id="linear-gradient" x1="-1641.66" y1="-1552.09" x2="-1727.37" y2="-1520.89" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bfd72f"/>
<stop offset=".1" stop-color="#aed331"/>
<stop offset=".29" stop-color="#84ca38"/>
<stop offset=".55" stop-color="#40bc42"/>
<stop offset=".74" stop-color="#0ab14b"/>
<stop offset="1" stop-color="#007f49"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1697.8" y1="-1521.42" x2="-1783.38" y2="-1552.57" gradientTransform="translate(1211.44 1082.87) scale(.68)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffcb02"/>
<stop offset=".09" stop-color="#fdc105"/>
<stop offset=".49" stop-color="#f89a13"/>
<stop offset=".8" stop-color="#f5811b"/>
<stop offset="1" stop-color="#f4791f"/>
</linearGradient>
</defs>
<g>
<path d="M149.14.83h-23.48v3.09h20.8v7.32h-21.15v3.09h10.19v3.04h-10.19v3.1h21.15v6.88h5.13v-7.53c0-1.35-1.1-2.46-2.45-2.46h-8.51v-3.04h10.96V3.27c0-1.35-1.1-2.44-2.45-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
<g>
<rect x="177.3" y=".83" width="5.13" height="14.1" style="fill: #fff; stroke-width: 0px;"/>
<path d="M161.65,17.45h-5.13v7.45c0,1.35,1.09,2.45,2.44,2.45h23.47v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M171.1,14.93c1.35,0,2.45-1.09,2.45-2.45V.83h-17.4v11.65c0,1.35,1.09,2.45,2.44,2.45h12.51ZM161.27,3.92h7.13v7.92h-7.13V3.92Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M218.12,17.39v7.51c0,1.36,1.1,2.45,2.45,2.45h21.03c1.35,0,2.44-1.09,2.44-2.45v-7.51h-25.92ZM238.91,24.26h-15.65v-3.77h15.65v3.77Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M241.6.83h-23.48v3.09h20.79v7.32h-21.16v3.09h26.29V3.27c0-1.35-1.09-2.44-2.44-2.44Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M208.41.83v2.44h-5.9c-1.65-1.98-4.34-3.27-7.4-3.27-5.01,0-9.07,3.46-9.07,7.74s4.06,7.73,9.07,7.73c3.09,0,5.82-1.33,7.46-3.34h5.84v2.81h5.13V.83h-5.13ZM195.11,12.26c-2.17,0-3.93-2.03-3.93-4.53s1.75-4.54,3.93-4.54,3.93,2.04,3.93,4.54-1.76,4.53-3.93,4.53ZM208.41,9.04h-4.37c.09-.43.14-.86.14-1.3,0-.47-.06-.93-.15-1.38h4.38v2.68Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M192.75,17.45h-5.14v7.45c0,1.35,1.1,2.45,2.45,2.45h23.48v-3.09h-20.79v-6.81Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M285.25,17.37h-5.13v7.55c0,1.35,1.09,2.45,2.45,2.45h23.47v-3.09h-20.79v-6.91Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M306.05,5.53V.83h-5.14v11.01h-16.03V3.92h11.12V.83h-16.27v11.65c0,1.35,1.1,2.45,2.45,2.45h23.86v-6.31h3.1v-3.09h-3.1Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
<g>
<path d="M275.39,3.27c0-1.35-1.09-2.44-2.45-2.44h-23.48v3.09h20.79v7.32h-6.98v-3.69h-5.14v3.69h-9.04v3.09h26.29V3.27Z" style="fill: #fff; stroke-width: 0px;"/>
<path d="M262.21,16.37c-8.67,0-13.44,2.63-13.44,5.88s4.77,5.87,13.44,5.87,13.44-2.63,13.44-5.87-4.77-5.88-13.44-5.88ZM262.21,25.32c-4.23,0-7.66-1.38-7.66-3.07s3.43-3.09,7.66-3.09,7.67,1.38,7.67,3.09-3.43,3.07-7.67,3.07Z" style="fill: #fff; stroke-width: 0px;"/>
</g>
</g>
<g>
<path d="M37.62,48.15c26.36.59,39.31-22.89,40.29-24.32.97-1.42,2.09-1.22,2.66-1.22h10.5s-14.93,30.54-53.45,25.92c-.32-.04-.36-.4,0-.38Z" style="fill: url(#linear-gradient); stroke-width: 0px;"/>
<path d="M68.21,25.3c0,1.13-.92,2.05-2.05,2.05h-3.91V5.24c0-3.53,1.45-4.88,4.86-4.88h12.38c3.32,0,5.74.65,7.26,1.98,1.52,1.33,2.29,3.44,2.29,6.32v1.02c0,2.88-.76,4.74-2.29,6.07-1.52,1.33-3.94,1.99-7.26,2h-9.18s1.5-4.76,6.86-4.76h2.04c1.29,0,2.19-.27,2.82-.82.72-.62,1.06-1.95,1.06-3.21s-.38-2.3-1.14-2.91c-.77-.61-1.58-.92-3.22-.92h-.04s-7.45,0-7.45,0c-2.35,0-3.04,1.03-3.04,3.04v17.13Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M93.65,22.6c-1.13,0-2.05.92-2.05,2.05v2.7h15.76c3.28,0,5.69-.65,7.21-1.96,1.53-1.31,2.3-3.26,2.3-6.06s-.66-4.73-1.99-5.91c-1.32-1.18-3.55-1.77-6.69-1.77h-6.81c-1.2,0-2.37-.25-2.98-.74-.61-.49-1.24-1.29-1.24-2.22,0-1.23.35-2.13,1.06-2.7.71-.57,1.47-.87,2.99-.87h12.29c1.13,0,2.05-.92,2.05-2.05V.36h-14.82c-3.32,0-5.73.67-7.26,2-1.52,1.33-2.29,3.35-2.29,6.23,0,2.7.73,4.67,2.17,5.93,1.45,1.25,3.74,1.88,6.87,1.88h6.6c1.48,0,2.52.24,3.13.72.61.48.92,1.29.92,2.42s-.33,1.88-1,2.35c-.66.47-1.81.71-3.44.71h-12.81Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M54.96.36c-1.13,0-2.05.92-2.05,2.05v16.92L41.27,2.27c-.72-1.25-1.66-1.91-2.88-1.91h-6.18v26.98h3.91c1.13,0,2.05-.92,2.05-2.05V7.63h0s12.22,17.81,12.22,17.81c0,0,1.18,1.9,3.01,1.9h5.46V.36h-3.91Z" style="fill: #25237b; stroke-width: 0px;"/>
<path d="M0,22.62h10.85c1.39,0,1.97.8,2.54,1.71,16.52,25.99,41.83,18.65,41.83,18.65.31-.09.4.17.11.28,0,0-11.33,5.26-24.56,2.68-13.22-2.57-24.34-12.17-30.77-23.32Z" style="fill: url(#linear-gradient-2); stroke-width: 0px;"/>
</g>
</svg>
</div>
<div class="footer-info">
<dl>
<dt>우편번호</dt>
<dd>54870</dd>
</dl>
<dl>
<dt class="sr-only">주소</dt>
<dd>전북특별자치도 전주시 덕진구 기지로 180(만성동, 국민연금) <br>국민연금공단 I</dd>
</dl>
<dl>
<dt>고객센터</dt>
<dd>1355(유료)</dd>
</dl>
</div>
<p class="copyright">Copyright© 2024 NPS All Rights Reserved.</p>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

9
package.json
View File

@ -25,11 +25,10 @@
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"node-sass": "^7.0.1",
"sass": "^1.32.7",
"gulp-size": "^3.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp.spritesmith": "^6.11.0"
},
"dependencies": {}
"gulp.spritesmith": "^6.11.0",
"node-sass": "^7.0.1",
"sass": "^1.32.7"
}
}

73
src/html/clips.html
View File

@ -0,0 +1,73 @@
@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - 동영상"})
@@include("./include/header.html")
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><span>동영상</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "clips", "subActive": "clips"})
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">동영상</h2>
</header>
<div class="tag-container">
<h4 class="tag-title">모아보기</h4>
<ul class="tag-list">
<li class="active"><a href="">#콕콕연금뉴스</a></li>
<li><a href="">#연금이랑 알아볼게</a></li>
<li><a href="">#캠페인 영상</a></li>
<li><a href="">#광고</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
<li><a href="">#연금연금</a></li>
</ul>
</div>
<ul class="common-list clips">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/clips-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[콕콕 연금뉴스]</a>
</h4>
<p class="item-summary">
<a href="">2024년 4월,<br>1,103조 5천억원의 적립금...</a>
</p>
</div>
</li>
</ul>
</div>
@@include("./include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")

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

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

23
src/html/include/pagination.html
View File

@ -0,0 +1,23 @@
<nav class="pagination">
<ol>
<li class="prev disabled">
<span>&lt;&lt;</span>
</li>
<li class="active">
<span>1</span>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
<li class="next">
<a href="">&gt;&gt;</a>
</li>
</ol>
</nav>

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

@ -0,0 +1,6 @@
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>

14
src/html/index.html
View File

@ -7,18 +7,8 @@
<div class="main-top">
<div class="line-01">
<nav id="nav">
<div class="search-box">
<form class="search-form">
<input type="text" class="input"/>
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button>
</form>
</div>
<ul class="menu-list">
<li class="item first active"><a href="#" class="link">국민연금 소식</a></li>
<li class="item"><a href="#" class="link">국민연금 제도</a></li>
<li class="item"><a href="#" class="link">국민연금 기금</a></li>
<li class="item last"><a href="#" class="link">영상갤러리</a></li>
</ul>
@@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>

65
src/html/news.html
View File

@ -0,0 +1,65 @@
@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 새 소식"})
@@include("./include/header.html")
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>새 소식</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "news", "subActive": "news"})
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">새소식</h2>
</header>
<ul class="common-list news">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/news-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">[채용공고] 국민연금공단 기금운용본부 자산운용전문가 모집!</a>
</h4>
<p class="item-summary">
(지원서 접수기간: 6/28~7/12) 국민연금공단 금운용본부자산운용전문가 모집!<br>자산운용 중심 금융혁신도시 전주에 위치한 국민연금 기금운용본부에서기금 1,000조 원 시대를 함께할 최고의 역량을 갖춘 자산운용전문가를 모집합니다
</p>
<div class="item-info">
<dl>
<dt class="sr-only">등록일</dt>
<dd>2024.07.01</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
@@include("./include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")

53
src/html/shorts.html
View File

@ -0,0 +1,53 @@
@@include("./include/meta.html", {"pageTitle" : "영상갤러리 - Shorts"})
@@include("./include/header.html")
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./clips.html">영상갤러리</a></li>
<li><span>Shorts</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "clips", "subActive": "shorts"})
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">Shorts</h2>
</header>
<ul class="common-list shorts">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/shorts-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금, 내고 싶은 사람만 내면 안되나요?</a>
</h4>
</div>
</li>
</ul>
</div>
@@include("./include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")

57
src/html/toons.html
View File

@ -0,0 +1,57 @@
@@include("./include/meta.html", {"pageTitle" : "국민염금 소식 - 국민연금 인스타 툰"})
@@include("./include/header.html")
<div class="container">
<nav class="breadcrumb">
<ol>
<li><a href="./">홈</a></li>
<li><a href="./news.html">국민연금 소식</a></li>
<li><span>국민연금 인스타 툰</span></li>
</ol>
</nav>
</div>
<div class="sub-main container" id="main">
<aside class="left-nav">
@@include("./include/search_box.html")
@@include("./include/left_menu.html", {"active": "news", "subActive": "toons"})
</aside>
<main class="page-contents">
<div class="contents-box">
<header class="contents-header">
<h2 class="contents-title">국민연금 인스타 툰</h2>
</header>
<ul class="common-list toons">
<li class="item">
<figure class="thumbnail">
<a class="thumbnail-link" href="">
<img class="thumbnail-img" src="./assets/images/ex/toon-01.png" alt="">
</a>
</figure>
<div class="item-content">
<h4 class="item-title">
<a href="">국민연금 인스타툰 알려드립니다.</a>
</h4>
<div class="item-info">
<dl>
<dt class="sr-only">등록일</dt>
<dd>2024.07.01</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
@@include("./include/pagination.html")
</main>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")

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

@ -5,10 +5,8 @@ html {
letter-spacing: -0.04em;
font-family: $font-family-base;
overflow-x: hidden;
font-size: calc((16vw / 960) * 100);
@media screen and (min-width:1921px) {
font-size: 20px;
}
//font-size: calc((16vw / 960) * 100);
font-size:20px;
@include display-xs(){
font-size: calc((48vw / 720) * 100);
@ -220,87 +218,7 @@ body:has(#mobile-left-menu.opened) {
#nav {
width: REM(169px);
.search-box {
width: REM(169px);
height:REM(135px);
background-color:#fff;
padding:REM(66px) REM(12px) REM(20px) REM(12px);
border-radius: REM(15px);
position:relative;
box-sizing: border-box;
&:before{
content:"";
@include background-image('../images/common/on-air.png');
background-size: cover;
width:REM(142px);
height:REM(38px);
position:absolute;
left:50%;
transform: translate(-50%, 0);
top:REM(27px);
}
.search-form {
width:100%;
position:relative;
margin-top:REM(20px);
.input {
width:100%;
height:REM(27px);
border-radius: REM(13px * 3);
border:REM(1px) solid #26356BFF;
padding:REM(5px) REM(18px) REM(5px) REM(12px) ;
box-sizing: border-box;
}
.search-btn {
width:REM(16px);
height:REM(17px);
position:absolute;
right:REM(5px);
top:50%;
transform:translate(0, -50%);
border:none;
background-color:#fff;
padding:0;
.icon {
font-size:REM(16px);
color:#26356BFF;
}
}
}
}
.menu-list {
background-color:#fff;
border-radius: REM(15px);
width: REM(169px);
height: REM(158px);
margin-top: REM(12px);
.item {
.link {
display: block;
padding:REM(12px) 0;
font-size:REM(13.52px);
text-align: center;
line-height:1;
}
& + .item{
border-top:REM(1px) solid #CCCCCCFF;
}
&.active{
background-color:#02256c;
.link {
color:#fff;
}
&.first {
border-radius: REM(15px) REM(15px) 0 0;
}
&.last {
border-radius: 0 0 REM(15px) REM(15px);
}
}
}
}
.family-list {
margin-top: REM(12px);
position:relative;
@ -503,3 +421,171 @@ body:has(#mobile-left-menu.opened) {
}
}
}
/**
* 좌측 로고&검색박스
*/
.search-box {
width: REM(169px);
height:REM(135px);
background-color:#fff;
padding:REM(66px) REM(12px) REM(20px) REM(12px);
border-radius: REM(15px);
position:relative;
box-sizing: border-box;
&:before{
content:"";
@include background-image('../images/common/on-air.png');
background-size: cover;
width:REM(142px);
height:REM(38px);
position:absolute;
left:50%;
transform: translate(-50%, 0);
top:REM(27px);
}
.search-form {
width:100%;
position:relative;
margin-top:REM(20px);
.input {
width:100%;
height:REM(27px);
border-radius: REM(13px * 3);
border:REM(1px) solid #26356BFF;
padding:REM(5px) REM(18px) REM(5px) REM(12px) ;
box-sizing: border-box;
}
.search-btn {
width:REM(16px);
height:REM(17px);
position:absolute;
right:REM(5px);
top:50%;
transform:translate(0, -50%);
border:none;
background-color:#fff;
padding:0;
.icon {
font-size:REM(16px);
color:#26356BFF;
}
}
}
}
/**
* 좌측 메뉴
*/
.menu-list {
border-radius: REM(15px);
width: REM(169px);
min-height: REM(158px);
margin-top: REM(12px);
.item {
position:relative;
.link {
display: block;
padding:REM(12px) 0;
font-size:REM(13.52px);
text-align: center;
line-height:1;
transition: background-color .3s ease, color .3s ease;
background-color:#fff;
}
&:first-child {
.link {
border-radius: REM(15px) REM(15px) 0 0;
}
}
&:last-child {
.link {
border-radius: 0 0 REM(15px) REM(15px);
}
}
& + .item{
border-top:REM(1px) solid #CCCCCCFF;
}
&:hover,
&.active{
.link {
background-color:#02256c;
color:#fff;
}
}
&:hover {
.submenu {
display:block;
}
}
.submenu {
position:absolute;
left:100%;
top:0;
z-index:10;
display:none;
li {
a {
display:flex;
border: 1px solid #cccccc;
width:REM(153px);
height:REM(39px);
justify-content: center;
align-items: center;
background-color:#fff;
transition: background-color .3s ease;
font-weight:500;
font-size:REM(13.54px);
}
&:hover,
&.active {
a {
background-color: #ccc;
}
}
&:first-child {
a {
border-radius: REM(15px) REM(15px) 0 0;
}
}
&:last-child {
a {
border-radius: 0 0 REM(15px) REM(15px);
}
}
}
}
}
}
/**
* 서브페이지
*/
.sub-main {
width:100%;
display:flex;
.left-nav {
width:REM(170px);
flex-shrink: 0;
margin-right:REM(16px);
}
.page-contents {
flex:1;
min-width:0;
}
}

32
src/scss/components/_breadcrumbs.scss
View File

@ -0,0 +1,32 @@
.breadcrumb {
width:100%;
margin:0 0 REM(5px) 0;
padding:0 0 0 REM(186px); // 좌측 메뉴 만큼 띄워주기
ol {
list-style:none;
display:flex;
padding:0;
margin:0;
li {
a,span {
color:#252525;
font-size:REM(14px);
font-weight:600;
}
& + li {
a, span {
&:before {
content: '>';
color:#252525;
font-size:REM(14px);
font-weight:600;
margin:0 REM(3px);
}
}
}
}
}
}

21
src/scss/components/_contents_box.scss
View File

@ -0,0 +1,21 @@
.contents-box {
background:#fff;
border-radius:REM(15px);
padding:REM(16px) REM(32px);
margin:0 0 REM(20px) 0;
.contents-header {
display:flex;
align-items: center;
justify-content: flex-start;
border-bottom:2px solid #02256c;
padding:REM(10px) 0;
.contents-title {
font-size:REM(25px);
color:#02256c;
font-weight:600;
line-height:1em;
}
}
}

47
src/scss/components/_pagination.scss
View File

@ -0,0 +1,47 @@
.pagination {
display:block;
width:100%;
ol {
width:100%;
display:flex;
justify-content: center;
align-items: center;
li {
a, span {
display:flex;
width:REM(28px);
height:REM(28px);
justify-content: center;
align-items: center;
border-radius:100%;
color:#707070;
background-color:transparent;
transition: color .3s ease, background-color .3s ease;
cursor:pointer;
}
&.active,
&:not(.disabled):not(.active):hover {
a, span {
background-color:#02256c;
color:#fff;
}
}
&.active {
a, span {
cursor:default;
}
}
&.disabled {
a, span {
opacity:.4;
cursor:default;
}
}
}
}
}

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

@ -0,0 +1,259 @@
.common-list {
list-style:none;
padding:0;
margin:0;
.thumbnail {
position:relative;
padding:0;
margin:0;
overflow: hidden;
.thumbnail-link {
display:flex;
width:100%;
height:100%;
.thumbnail-img {
width:100%;
height:100%;
display:block;
object-fit: cover;
}
}
}
.item-content {
.item-title {
color:#02256c;
font-size:REM(16px);
display:block;
width:100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.025em;
font-weight:700;
a {
color:inherit;
&:hover {
text-decoration: underline;
}
}
}
.item-summary {
font-size:REM(14px);
color:#252525;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap:break-word;
letter-spacing: -0.025em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0 REM(5px) 0;
font-weight:500;
height: 1.28em * 2;
-webkit-line-clamp: 2;
line-height:1.28em;
a {
color:inherit;
&:hover {
text-decoration: underline;
}
}
}
.item-info {
margin:0;
padding:0;
dl {
margin:0;
display:flex;
align-items: center;
dt {
margin:0 REM(10px) 0 0;
}
dd {
font-size:REM(14px);
color:#959595;
font-weight:500;
}
}
}
}
&.news {
.item {
display:flex;
padding:REM(20px) 0;
border-bottom:1px solid #02256c;
.thumbnail {
width:REM(182px);
height:REM(133px);
flex-shrink: 0;
margin-right:REM(13px);
}
.item-content {
flex:1;
min-width:0;
padding:REM(8px) 0;
.item-summary {
height: 1.28em * 4;
-webkit-line-clamp: 4;
line-height:1.28em;
}
}
}
}
&.toons {
display:flex;
flex-wrap:wrap;
.item {
width:50%;
padding:REM(10px) REM(15px);
.thumbnail {
width:REM(216px);
height:REM(216px);
margin:0 auto REM(10px)
}
.item-content {
.item-title {
font-size:REM(20px);
}
}
}
}
&.shorts {
margin:0 REM(-4px);
display:flex;
flex-wrap:wrap;
.item {
width:25%;
padding:REM(20px) REM(4px);
.thumbnail {
width:REM(134px);
height:REM(220px);
margin:0 0 REM(8px);
}
.item-content {
.item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap:break-word;
overflow: hidden;
text-overflow: ellipsis;
height: 1.28em * 2;
-webkit-line-clamp: 2;
line-height:1.28em;
white-space: normal;
word-break: break-all;
}
}
}
}
&.clips {
display:flex;
flex-wrap: wrap;
width:100%;
margin: REM(-20px) REM(-4px);
padding-bottom:REM(30px);
.item {
padding:REM(20px) REM(4px);
width:25%;
border-bottom:1px solid #c2c2c2;
.thumbnail {
width:100%;
height:REM(95px);
}
.item-title {
font-size:REM(13px);
}
.item-summary {
font-size:REM(13px);
height: 1.28em * 2;
-webkit-line-clamp: 2;
line-height:1.28em;
}
}
}
}
.tag-container {
width:100%;
display:flex;
border:1px solid #b7b7b7;
padding: REM(10px);
align-items: stretch;
margin:REM(12px) 0 REM(25px);
border-radius:REM(15px);
.tag-title {
flex-shrink: 0;
color:#000000;
margin-right:REM(25px);
display:flex;
align-items: center;
font-size:REM(23.21px);
padding:0 REM(20px);
}
.tag-list {
list-style:none;
padding:0;
margin:REM(-3px);
flex:1;
min-width:0;
display:flex;
flex-wrap:wrap;
li {
padding:REM(3px);
a {
display:flex;
justify-content: center;
align-items: center;
height:REM(28px);
border-radius:REM(14px);
background-color:#ffffff;
color:#464646;
font-size:REM(16.42px);
padding:0 REM(14px);
box-shadow: 1.147px 1.638px 3.8px 0.2px rgba(0, 0, 0, 0.41);
}
&.active {
a {
background-color:#02256c;
color:#fff;
}
}
}
}
}

6
src/scss/style.scss
View File

@ -13,9 +13,13 @@
// 각종 컴포넌트
@import "components/icons";
@import "components/button";
@import "components/breadcrumbs";
@import "components/contents_box";
@import "components/pagination";
// 각종 플러그인 SCSS 및 플러그인 커스텀
@import "plugins/custom";
// 레이아웃 및 각 페이지 SCSS 파일
@import 'pages/main';
@import 'pages/main';
@import "pages/lists";

11926
yarn.lock
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save