79 changed files with 3286 additions and 70940 deletions
-
12235dist/assets/css/style.css
-
2dist/assets/css/style.min.css
-
2dist/assets/css/style.min.css.map
-
BINdist/assets/fonts/fa-brands-400.eot
-
3717dist/assets/fonts/fa-brands-400.svg
-
BINdist/assets/fonts/fa-brands-400.ttf
-
BINdist/assets/fonts/fa-brands-400.woff
-
BINdist/assets/fonts/fa-brands-400.woff2
-
BINdist/assets/fonts/fa-duotone-900.eot
-
15319dist/assets/fonts/fa-duotone-900.svg
-
BINdist/assets/fonts/fa-duotone-900.ttf
-
BINdist/assets/fonts/fa-duotone-900.woff
-
BINdist/assets/fonts/fa-duotone-900.woff2
-
BINdist/assets/fonts/fa-light-300.eot
-
12420dist/assets/fonts/fa-light-300.svg
-
BINdist/assets/fonts/fa-light-300.ttf
-
BINdist/assets/fonts/fa-light-300.woff
-
BINdist/assets/fonts/fa-light-300.woff2
-
BINdist/assets/fonts/fa-regular-400.eot
-
11318dist/assets/fonts/fa-regular-400.svg
-
BINdist/assets/fonts/fa-regular-400.ttf
-
BINdist/assets/fonts/fa-regular-400.woff
-
BINdist/assets/fonts/fa-regular-400.woff2
-
BINdist/assets/fonts/fa-solid-900.eot
-
9647dist/assets/fonts/fa-solid-900.svg
-
BINdist/assets/fonts/fa-solid-900.ttf
-
BINdist/assets/fonts/fa-solid-900.woff
-
BINdist/assets/fonts/fa-solid-900.woff2
-
BINdist/assets/images/common/blog.png
-
BINdist/assets/images/common/btn-menu-close.png
-
BINdist/assets/images/common/btn-menu.png
-
BINdist/assets/images/common/btn-search.png
-
BINdist/assets/images/common/chevron-down.png
-
BINdist/assets/images/common/footer-logo.png
-
BINdist/assets/images/common/instagram.png
-
BINdist/assets/images/common/on-air.png
-
BINdist/assets/images/common/tv.png
-
BINdist/assets/images/ex/ex1.png
-
BINdist/assets/images/ex/ex2.png
-
BINdist/assets/images/ex/ex3.png
-
BINdist/assets/images/ex/ex4.png
-
BINdist/assets/images/ex/ex5.png
-
BINdist/assets/images/ex/ex6.png
-
BINdist/assets/images/ex/ex7.png
-
2dist/assets/js/common.min.js
-
2dist/assets/js/common.min.js.map
-
479dist/index.html
-
70src/html/include/footer.html
-
144src/html/include/header.html
-
2src/html/include/meta.html
-
1src/html/include/tail.html
-
261src/html/index.html
-
7src/js/common.js
-
13src/scss/_variables.scss
-
4src/scss/boot/_function.scss
-
2src/scss/boot/_reset.scss
-
502src/scss/common/_layout.scss
-
648src/scss/pages/main.scss
-
20src/scss/plugins/fontawesome-5.15.2/_animated.scss
-
20src/scss/plugins/fontawesome-5.15.2/_bordered-pulled.scss
-
21src/scss/plugins/fontawesome-5.15.2/_core.scss
-
6src/scss/plugins/fontawesome-5.15.2/_fixed-width.scss
-
2313src/scss/plugins/fontawesome-5.15.2/_icons.scss
-
23src/scss/plugins/fontawesome-5.15.2/_larger.scss
-
18src/scss/plugins/fontawesome-5.15.2/_list.scss
-
56src/scss/plugins/fontawesome-5.15.2/_mixins.scss
-
24src/scss/plugins/fontawesome-5.15.2/_rotated-flipped.scss
-
5src/scss/plugins/fontawesome-5.15.2/_screen-reader.scss
-
2066src/scss/plugins/fontawesome-5.15.2/_shims.scss
-
31src/scss/plugins/fontawesome-5.15.2/_stacked.scss
-
2330src/scss/plugins/fontawesome-5.15.2/_variables.scss
-
23src/scss/plugins/fontawesome-5.15.2/brands.scss
-
1918src/scss/plugins/fontawesome-5.15.2/duotone.scss
-
16src/scss/plugins/fontawesome-5.15.2/fontawesome.scss
-
23src/scss/plugins/fontawesome-5.15.2/light.scss
-
23src/scss/plugins/fontawesome-5.15.2/regular.scss
-
24src/scss/plugins/fontawesome-5.15.2/solid.scss
-
6src/scss/plugins/fontawesome-5.15.2/v4-shims.scss
-
7src/scss/style.scss
12235
dist/assets/css/style.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File
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
File diff suppressed because it is too large
View File
3717
dist/assets/fonts/fa-brands-400.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
15319
dist/assets/fonts/fa-duotone-900.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
12420
dist/assets/fonts/fa-light-300.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
11318
dist/assets/fonts/fa-regular-400.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
9647
dist/assets/fonts/fa-solid-900.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 21 | Height: 17 | Size: 408 B |
|
After Width: 38 | Height: 39 | Size: 532 B |
|
After Width: 56 | Height: 44 | Size: 399 B |
|
After Width: 54 | Height: 54 | Size: 1.4 KiB |
|
After Width: 25 | Height: 14 | Size: 236 B |
|
After Width: 272 | Height: 44 | Size: 6.5 KiB |
|
After Width: 19 | Height: 19 | Size: 588 B |
|
After Width: 875 | Height: 238 | Size: 20 KiB |
|
After Width: 21 | Height: 15 | Size: 351 B |
|
After Width: 419 | Height: 236 | Size: 199 KiB |
|
After Width: 181 | Height: 181 | Size: 48 KiB |
|
After Width: 185 | Height: 185 | Size: 54 KiB |
|
After Width: 200 | Height: 358 | Size: 164 KiB |
|
After Width: 801 | Height: 73 | Size: 26 KiB |
|
After Width: 175 | Height: 318 | Size: 37 KiB |
|
After Width: 175 | Height: 318 | Size: 99 KiB |
2
dist/assets/js/common.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/assets/js/common.min.js.map
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,2 +1,3 @@ |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,5 +1,266 @@ |
|||
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"}) |
|||
@@include("./include/header.html") |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.min.css" integrity="sha512-1CRCT9P70z3SktzqL7P8o8YvlmT1nXwFeXLBuVBa4mzQJ4fsvpmsObWooerRi4WzQT8QFrBVz/36mt/XGPYVzw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.4/swiper-bundle.js" integrity="sha512-+cdO0hlQy815H6TSp1JWiV4XV2HIrkM+v1MlDIWqbpXU2mS+a6k1P+nzXIUytpuwWpzfHf0rIrEP0WXYs+G3lw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
|||
<div class="container" id="main"> |
|||
<h1 class="sr-only">NPS 국민연금공단 메인페이지</h1> |
|||
<div class="main-top"> |
|||
<div class="line-01"> |
|||
<nav id="nav"> |
|||
<div class="search-box"> |
|||
<form class="search-form"> |
|||
<input type="text" class="input"/> |
|||
<button type="button" class="search-btn" title="검색"><span class="material-symbols-outlined icon">search</span></button> |
|||
</form> |
|||
</div> |
|||
<ul class="menu-list"> |
|||
<li class="item first active"><a href="#" class="link">국민연금 소식</a></li> |
|||
<li class="item"><a href="#" class="link">국민연금 제도</a></li> |
|||
<li class="item"><a href="#" class="link">국민연금 기금</a></li> |
|||
<li class="item last"><a href="#" class="link">영상갤러리</a></li> |
|||
</ul> |
|||
<ul class="family-list"> |
|||
<li class="item tv"><a href="#">국민연금 TV</a></li> |
|||
<li class="item instagram"><a href="#">인스타그램</a></li> |
|||
<li class="item blog"><a href="#">블로그</a></li> |
|||
</ul> |
|||
</nav> |
|||
</div> |
|||
<div class="line-02"> |
|||
<div class="box top" style="background-image:url('assets/images/ex/ex1.png')"> |
|||
<a href="#" class="box-link"> |
|||
<h2 class="sr-only">국민연금공단 채용 A to Z (feat.대학생 홍보대사팀)</h2> |
|||
</a> |
|||
</div> |
|||
<div class="bottom"> |
|||
<div class="left"> |
|||
<a href="#" class="link"> |
|||
<h2 class="title">연금기금 <br>운용현황</h2> |
|||
<dl class="date"> |
|||
<dt class="sr-only">기준일</dt> |
|||
<dd>2024.06 기준</dd> |
|||
</dl> |
|||
<ul class="info"> |
|||
<li>국민연금기금 1,103.5조원</li> |
|||
<li>누적 운용수익금 639.7조원</li> |
|||
<li>누적수익률 5.92%</li> |
|||
</ul> |
|||
</a> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="box top" style="background-image:url('assets/images/ex/ex2.png')"> |
|||
<a href="#" class="box-link"> |
|||
<h2 class="sr-only">노후긴급자금 대부(실버론)을 이용해보세요!</h2> |
|||
</a> |
|||
</div> |
|||
<div class="box bottom" style="background-image:url('assets/images/ex/ex3.png')"> |
|||
<a href="#" class="box-link"> |
|||
<h2 class="sr-only">바이바이 플라스틱</h2> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="line-03"> |
|||
<div class="box top" style="background-image:url('assets/images/ex/ex4.png')"> |
|||
<a href="#" class="box-link"> |
|||
<h2 class="sr-only">바이바이 플라스틱</h2> |
|||
</a> |
|||
</div> |
|||
<div class="bottom"> |
|||
<a href="#" class="link"> |
|||
<h2 class="title">숫자로 보는 국민연금</h2> |
|||
<p class="sub-text"> |
|||
7월 11일 세계 인구의 날을 맞이하여 알아보는 숫자로 보는 국민연금 날을 맞이하여 알아보는 숫자로 보는 국민연금 |
|||
</p> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main-center"> |
|||
<div class="box line-banner" style="background-image:url('assets/images/ex/ex5.png')"> |
|||
<a href="#" class="box-link"> |
|||
<p class="sr-only">국민연금 바로알기 홈페이지 바로가기</p> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<ul class="family-list mobile"> |
|||
<li class="item tv"><a href="#">국민연금 TV</a></li> |
|||
<li class="item instagram"><a href="#">인스타그램</a></li> |
|||
<li class="item blog"><a href="#">블로그</a></li> |
|||
</ul> |
|||
<div class="main-bottom"> |
|||
<div class="left-slide"> |
|||
<div class="swiper-container"> |
|||
<div class="title-box"> |
|||
<h2 class="slide-title">최신 글 모아보기</h2> |
|||
<div class="control-box"> |
|||
<div class="swiper-pagination"></div> |
|||
<button type="button" title="이전" class="btn btn-left"> |
|||
<span class="material-symbols-outlined icon">chevron_left</span> |
|||
</button> |
|||
<button type="button" title="다음" class="btn btn-right"> |
|||
<span class="material-symbols-outlined icon">chevron_right</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<ul class="swiper-wrapper recent-list"> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">01</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
국민연금공단 기금운용본부 자산운용전문가 모집! |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">28</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
해변에서 휴양을 즐기는 국민연금공단 |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">20</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트 |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">16</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다! |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">01</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
국민연금공단 기금운용본부 자산운용전문가 모집! |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">28</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
해변에서 휴양을 즐기는 국민연금공단 |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">20</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
국민연금공단 채용 A to Z 유튜브 영상 감상평 이벤트 |
|||
</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide"> |
|||
<a href="#"> |
|||
<span class="date">2024.07 <span class="big">16</span></span> |
|||
<p class="notice-text"> |
|||
<span class="label">공지사항</span> |
|||
바이바이 플라스틱챌린지, 국민연금공단이 함께 합니다! |
|||
</p> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="right-slide"> |
|||
<div class="swiper-container"> |
|||
<div class="title-box"> |
|||
<h2 class="slide-title">국민연금 Shorts</h2> |
|||
<div class="control-box"> |
|||
<div class="swiper-pagination"></div> |
|||
<button type="button" title="이전" class="btn btn-left"> |
|||
<span class="material-symbols-outlined icon">chevron_left</span> |
|||
</button> |
|||
<button type="button" title="다음" class="btn btn-right"> |
|||
<span class="material-symbols-outlined icon">chevron_right</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<ul class="swiper-wrapper short-list"> |
|||
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')"> |
|||
<a href="#" class="box-link"> |
|||
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')"> |
|||
<a href="#" class="box-link"> |
|||
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex6.png')"> |
|||
<a href="#" class="box-link"> |
|||
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p> |
|||
</a> |
|||
</li> |
|||
<li class="swiper-slide box" style="background-image:url('assets/images/ex/ex7.png')"> |
|||
<a href="#" class="box-link"> |
|||
<p class="sr-only">국민연금은 왜 국가에서 운영하는거죠?</p> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<button type="button" class="btn-more">+ 쇼츠 더보기</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script> |
|||
var recentNotice = new Swiper ('.left-slide .swiper-container', { |
|||
slidesPerView: 1, |
|||
grid: { |
|||
rows: 4, |
|||
}, |
|||
pagination: { |
|||
el: ".left-slide .swiper-pagination", |
|||
}, |
|||
autoplay: { |
|||
delay: 2000, |
|||
reverseDirection: true, |
|||
disableOnInteraction: false, |
|||
}, |
|||
navigation: { |
|||
nextEl:".left-slide .btn-right", |
|||
prevEl: ".left-slide .btn-left", |
|||
} |
|||
}) |
|||
|
|||
var shortList = new Swiper ('.right-slide .swiper-container', { |
|||
slidesPerView: 2, |
|||
grid: { |
|||
rows: 1, |
|||
}, |
|||
pagination: { |
|||
el: ".right-slide .swiper-pagination", |
|||
}, |
|||
autoplay: { |
|||
delay: 2000, |
|||
reverseDirection: true, |
|||
disableOnInteraction: false, |
|||
}, |
|||
navigation: { |
|||
nextEl:".right-slide .btn-right", |
|||
prevEl: ".right-slide .btn-left", |
|||
} |
|||
}) |
|||
</script> |
|||
@@include("./include/footer.html") |
|||
@@include("./include/tail.html") |
|||
@ -0,0 +1,7 @@ |
|||
$(function() { |
|||
$('[data-button="toggle-menu"]').click(function(e) { |
|||
e.preventDefault(); |
|||
|
|||
$('#mobile-left-menu').toggleClass('opened'); |
|||
}) |
|||
}) |
|||
@ -1,3 +1,505 @@ |
|||
/*************************************************************************************** |
|||
* 레이아웃 |
|||
****************************************************************************************/ |
|||
html { |
|||
letter-spacing: -0.04em; |
|||
font-family: $font-family-base; |
|||
overflow-x: hidden; |
|||
font-size: calc((16vw / 960) * 100); |
|||
@media screen and (min-width:1921px) { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
@include display-xs(){ |
|||
font-size: calc((48vw / 720) * 100); |
|||
body { |
|||
background-color:#f1f1f1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
#header { |
|||
width:100%; |
|||
background-color:#fff; |
|||
.logo-box { |
|||
width:100%; |
|||
height:REM(30px); |
|||
@include display-flex(); |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
#logo { |
|||
width:REM(115px); |
|||
height:REM(18px); |
|||
} |
|||
.link { |
|||
width:REM(61px); |
|||
height:REM(18px); |
|||
border:REM(1px) solid #DADADAFF; |
|||
font-size:REM(7px); |
|||
border-radius:REM(18px); |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: center; |
|||
line-height:1; |
|||
} |
|||
} |
|||
@include display-xs(){ |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.mobile-header { |
|||
display:none; |
|||
|
|||
@include display-xs { |
|||
display:flex; |
|||
width:100%; |
|||
height:REM(212px / 3); |
|||
align-items: center; |
|||
padding:0 REM(48px / 3); |
|||
|
|||
} |
|||
|
|||
.mobile-logo { |
|||
width:REM(332px / 3); |
|||
height:REM(89px / 3); |
|||
background-size:100% 100%; |
|||
background-repeat: no-repeat; |
|||
background-image:url(../images/common/on-air.png); |
|||
margin-left:auto; |
|||
margin-right:auto; |
|||
text-indent: -9999px; |
|||
} |
|||
|
|||
.m-button { |
|||
display:block; |
|||
background-size:auto 100%; |
|||
background-repeat: no-repeat; |
|||
width:REM(56px / 3); |
|||
height:REM(44px / 3); |
|||
background-position:center; |
|||
border: 0 none; |
|||
background-color:transparent; |
|||
text-indent: -9999px; |
|||
|
|||
&.toggle-menu { |
|||
background-image:url(../images/common/btn-menu.png); |
|||
} |
|||
&.toggle-search { |
|||
background-image:url(../images/common/btn-search.png); |
|||
} |
|||
&.close-menu { |
|||
background-image:url(../images/common/btn-menu-close.png); |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
#mobile-left-menu { |
|||
display:none; |
|||
width:100%; |
|||
height:100%; |
|||
position:fixed; |
|||
top:0; |
|||
left:0; |
|||
-webkit-transform: translateZ(0); |
|||
background:#f8f8f8; |
|||
|
|||
&.opened { |
|||
@include display-xs { |
|||
display:block; |
|||
z-index:99; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
body:has(#mobile-left-menu.opened) { |
|||
@include display-xs { |
|||
overflow-y:hidden; |
|||
max-height:100%; |
|||
} |
|||
} |
|||
|
|||
.container { |
|||
width:100%; |
|||
max-width:REM(960px); |
|||
margin: 0 auto; |
|||
padding:0 REM(80px); |
|||
} |
|||
|
|||
@include display-xs(){ |
|||
|
|||
.container { |
|||
width: 100%; |
|||
padding:0; |
|||
} |
|||
} |
|||
|
|||
.mobile-nav { |
|||
padding:0; |
|||
margin:0; |
|||
> ul { |
|||
list-style:none; |
|||
padding:0; |
|||
margin:0; |
|||
background-color:#fff; |
|||
|
|||
> li { |
|||
> a { |
|||
background-color:#02205b; |
|||
padding:0 REM(60px / 3); |
|||
display:flex; |
|||
align-items: center; |
|||
height:REM(104px / 3); |
|||
font-size:REM(36px/ 3); |
|||
color:#fff; |
|||
font-weight:500; |
|||
border-bottom: REM(1px/ 3) solid #1d3667; |
|||
&:after { |
|||
content: ''; |
|||
display:block; |
|||
width:REM(25px / 3); |
|||
height:REM(14px / 3); |
|||
margin-left:auto; |
|||
background-size:100%; |
|||
background-image:url(../images/common/chevron-down.png); |
|||
background-repeat: no-repeat; |
|||
transform: rotate(180deg); |
|||
} |
|||
&.active{ |
|||
&:after { |
|||
background-image:url(../images/common/chevron-down.png); |
|||
transform: rotate(0deg); |
|||
} |
|||
} |
|||
} |
|||
|
|||
> ul { |
|||
display:none; |
|||
flex-wrap:wrap; |
|||
&.open { |
|||
@include display-flex(); |
|||
} |
|||
> li { |
|||
width:50%; |
|||
border-right:1px solid #cccccc; |
|||
border-bottom:1px solid #cccccc; |
|||
|
|||
> a { |
|||
display:flex; |
|||
height:REM(81px / 3); |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size:REM(32px / 3); |
|||
font-weight:500; |
|||
color:#111111; |
|||
} |
|||
|
|||
&:nth-child(2n) { |
|||
border-right:0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btn-more{ |
|||
color:#868686; |
|||
font-size:REM(27.44px / 3); |
|||
border:REM(1px) solid #868686; |
|||
width: REM(220px / 3); |
|||
height: REM(53px / 3); |
|||
border-radius: REM(53px / 3); |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin:REM(45px / 3) auto; |
|||
} |
|||
} |
|||
|
|||
|
|||
#nav { |
|||
width: REM(169px); |
|||
.search-box { |
|||
width: REM(169px); |
|||
height:REM(135px); |
|||
background-color:#fff; |
|||
padding:REM(66px) REM(12px) REM(20px) REM(12px); |
|||
border-radius: REM(15px); |
|||
position:relative; |
|||
box-sizing: border-box; |
|||
&:before{ |
|||
content:""; |
|||
@include background-image('../images/common/on-air.png'); |
|||
background-size: cover; |
|||
width:REM(142px); |
|||
height:REM(38px); |
|||
position:absolute; |
|||
left:50%; |
|||
transform: translate(-50%, 0); |
|||
top:REM(27px); |
|||
} |
|||
.search-form { |
|||
width:100%; |
|||
position:relative; |
|||
margin-top:REM(20px); |
|||
.input { |
|||
width:100%; |
|||
height:REM(27px); |
|||
border-radius: REM(13px * 3); |
|||
border:REM(1px) solid #26356BFF; |
|||
padding:REM(5px) REM(18px) REM(5px) REM(12px) ; |
|||
box-sizing: border-box; |
|||
} |
|||
.search-btn { |
|||
width:REM(16px); |
|||
height:REM(17px); |
|||
position:absolute; |
|||
right:REM(5px); |
|||
top:50%; |
|||
transform:translate(0, -50%); |
|||
border:none; |
|||
background-color:#fff; |
|||
padding:0; |
|||
.icon { |
|||
font-size:REM(16px); |
|||
color:#26356BFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.menu-list { |
|||
background-color:#fff; |
|||
border-radius: REM(15px); |
|||
width: REM(169px); |
|||
height: REM(158px); |
|||
margin-top: REM(12px); |
|||
|
|||
.item { |
|||
.link { |
|||
display: block; |
|||
padding:REM(12px) 0; |
|||
font-size:REM(13.52px); |
|||
text-align: center; |
|||
line-height:1; |
|||
} |
|||
& + .item{ |
|||
border-top:REM(1px) solid #CCCCCCFF; |
|||
} |
|||
&.active{ |
|||
background-color:#02256c; |
|||
.link { |
|||
color:#fff; |
|||
} |
|||
&.first { |
|||
border-radius: REM(15px) REM(15px) 0 0; |
|||
} |
|||
&.last { |
|||
border-radius: 0 0 REM(15px) REM(15px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
.family-list { |
|||
margin-top: REM(12px); |
|||
position:relative; |
|||
background-color:#fff; |
|||
border:REM(1px) solid #C8C8C8FF; |
|||
width: REM(169px); |
|||
height: REM(158px); |
|||
border-radius: REM(15px); |
|||
padding:REM(30px) REM(23px) 0 REM(23px); |
|||
&:before{ |
|||
content:"국민연금공단 SNS 바로가기"; |
|||
font-size:REM(13.5px); |
|||
font-weight:$font-weight-bold; |
|||
position:absolute; |
|||
width:100%; |
|||
text-align: center; |
|||
left:0; |
|||
top:REM(11px); |
|||
line-height:1; |
|||
} |
|||
.item{ |
|||
a { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
position:relative; |
|||
padding-left:REM(48px); |
|||
font-size:REM(13px); |
|||
height:REM(38px); |
|||
line-height:1; |
|||
&:before{ |
|||
content:""; |
|||
display: block; |
|||
width:REM(35px); |
|||
height:REM(35px); |
|||
border-radius: REM(10px); |
|||
background-color:#02256CFF; |
|||
position:absolute; |
|||
left:0; |
|||
top:50%; |
|||
transform: translate(0, -50%); |
|||
} |
|||
&:after{ |
|||
content:""; |
|||
position:absolute; |
|||
left:0; |
|||
top:50%; |
|||
transform: translate(0, -50%); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
&.tv { |
|||
> a { |
|||
&:after{ |
|||
width:REM(21px); |
|||
height:REM(15px); |
|||
margin-left:REM(8px); |
|||
@include background-image('../images/common/tv.png') |
|||
} |
|||
} |
|||
} |
|||
&.instagram { |
|||
> a { |
|||
&:after{ |
|||
width:REM(19px); |
|||
height:REM(19px); |
|||
margin-left:REM(8.5px); |
|||
@include background-image('../images/common/instagram.png') |
|||
} |
|||
} |
|||
} |
|||
&.blog { |
|||
> a { |
|||
&:after{ |
|||
width:REM(21px); |
|||
height:REM(17px); |
|||
margin-left:REM(8px); |
|||
@include background-image('../images/common/blog.png') |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@include display-xs(){ |
|||
width:100%; |
|||
.search-box, |
|||
.menu-list, |
|||
.family-list{ |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
#contents { |
|||
background-color:#f1f1f1; |
|||
padding:REM(27px) 0 REM(20px) 0; |
|||
@include display-xs(){ |
|||
padding:0 REM(33px / 3); |
|||
} |
|||
} |
|||
|
|||
#footer{ |
|||
background-color:#959595; |
|||
padding:REM(25px) 0 REM(35px) 0; |
|||
.logo-box{ |
|||
display: block; |
|||
width:REM(125px); |
|||
height:REM(20px); |
|||
margin:0 auto; |
|||
#logo { |
|||
width:REM(125px); |
|||
height:REM(20px); |
|||
} |
|||
} |
|||
.footer-info { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top:REM(5px); |
|||
dl { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
& + dl { |
|||
margin-left:REM(5px); |
|||
} |
|||
dt { |
|||
font-weight:$font-weight-base; |
|||
font-size:REM(8px); |
|||
color:#fff; |
|||
} |
|||
dd { |
|||
font-weight:$font-weight-base; |
|||
font-size:REM(8px); |
|||
color:#fff; |
|||
> br{ |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.copyright{ |
|||
text-align: center; |
|||
font-weight:$font-weight-base; |
|||
font-size:REM(8px); |
|||
margin-top:REM(15px); |
|||
color:#fff; |
|||
width: 100%; |
|||
line-height:1; |
|||
} |
|||
|
|||
@include display-xs(){ |
|||
padding:REM(44px / 3) REM(33px / 3) REM(60px / 3) REM(33px / 3); |
|||
@include display-flex(); |
|||
flex-direction: column; |
|||
|
|||
.footer-info { |
|||
order:1; |
|||
flex-wrap: wrap; |
|||
dl { |
|||
order: 3; |
|||
&:first-child { |
|||
order: 1; |
|||
} |
|||
&:last-child{ |
|||
order: 2; |
|||
} |
|||
& + dl { |
|||
margin-left:REM(9px / 3); |
|||
} |
|||
dt { |
|||
font-size:REM(26px / 3); |
|||
display: inline-flex; |
|||
} |
|||
dd { |
|||
font-size:REM(26px / 3); |
|||
display: inline-flex; |
|||
text-align: center; |
|||
line-height:1.35; |
|||
> br{ |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.logo-box{ |
|||
order:2; |
|||
width:REM(309px / 3); |
|||
height:REM(49px / 3); |
|||
margin:REM(35px / 3) auto; |
|||
@include background-image('../images/common/footer-logo.png'); |
|||
background-size: cover; |
|||
#logo { |
|||
display: none; |
|||
} |
|||
} |
|||
.copyright{ |
|||
order: 3; |
|||
font-size:REM(26px / 3); |
|||
} |
|||
} |
|||
} |
|||
@ -1,3 +1,651 @@ |
|||
/********************************************************************************************************************** |
|||
* 메인페이지 |
|||
***********************************************************************************************************************/ |
|||
#main{ |
|||
width:100%; |
|||
.box { |
|||
position: relative; |
|||
overflow: hidden; |
|||
.box-link{ |
|||
width:100%; |
|||
height:100%; |
|||
position:absolute; |
|||
left:0; |
|||
top:0; |
|||
} |
|||
} |
|||
|
|||
.main-top { |
|||
@include display-flex(); |
|||
align-items: stretch; |
|||
justify-content: space-between; |
|||
@include display-xs(){ |
|||
flex-direction: column; |
|||
} |
|||
.line-01 { |
|||
width:REM(169px); |
|||
@include display-xs(){ |
|||
display: none; |
|||
} |
|||
} |
|||
.line-02 { |
|||
width:REM(416px); |
|||
@include display-flex(); |
|||
flex-direction: column; |
|||
.top{ |
|||
border:REM(1px) solid #26356BFF; |
|||
border-radius: REM(15px); |
|||
width:REM(417px); |
|||
height:REM(234px); |
|||
overflow: hidden; |
|||
background-size: cover; |
|||
position:relative; |
|||
} |
|||
.bottom { |
|||
margin-top:REM(12px); |
|||
@include display-flex(); |
|||
justify-content: space-between; |
|||
align-items: stretch; |
|||
.left { |
|||
position: relative; |
|||
border-radius: REM(15px); |
|||
width: REM(229px); |
|||
height: REM(229px); |
|||
background-color:#33CC99FF; |
|||
overflow:hidden; |
|||
.link { |
|||
width: 100%; |
|||
height:100%; |
|||
padding:REM(15px); |
|||
@include display-flex(); |
|||
align-items: flex-start; |
|||
flex-direction: column; |
|||
.title { |
|||
font-size:REM(36.83px); |
|||
font-weight:$font-weight-extra-bold; |
|||
line-height:1.15; |
|||
color:#fff; |
|||
font-family: $font-family-base; |
|||
padding-bottom:REM(28px); |
|||
position:relative; |
|||
&:before{ |
|||
content:""; |
|||
width:REM(66px); |
|||
height:REM(5px); |
|||
background-color:#fff; |
|||
position:absolute; |
|||
left:0; |
|||
bottom:REM(12px); |
|||
} |
|||
} |
|||
.date{ |
|||
display: block; |
|||
margin-bottom:REM(12px); |
|||
> dd { |
|||
font-size:REM(18.25px); |
|||
color:#fff; |
|||
} |
|||
} |
|||
.info { |
|||
padding:0; |
|||
li { |
|||
font-size:REM(15.23px); |
|||
color:#fff; |
|||
margin-bottom:REM(5px); |
|||
line-height: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
.box { |
|||
border:REM(1px) solid #C8C8C8FF; |
|||
border-radius: REM(15px); |
|||
position:relative; |
|||
background-size:cover; |
|||
overflow:hidden; |
|||
&.top{ |
|||
width: REM(179px); |
|||
height: REM(107px); |
|||
overflow: hidden; |
|||
} |
|||
&.bottom{ |
|||
width: REM(179px); |
|||
height: REM(111px); |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@include display-xs(){ |
|||
width:100%; |
|||
position:relative; |
|||
.top { |
|||
width:100%; |
|||
height:REM(368px / 3); |
|||
border-radius: REM(20px / 3); |
|||
} |
|||
.bottom { |
|||
flex-direction: row-reverse; |
|||
margin-top:REM(20px / 3); |
|||
.left { |
|||
border-radius: REM(20px / 3); |
|||
width: REM(310px / 3); |
|||
height: REM(367px / 3); |
|||
.link { |
|||
padding:REM(20px / 3); |
|||
@include display-flex(); |
|||
align-items: flex-start; |
|||
flex-direction: column; |
|||
.title { |
|||
font-size:REM(53px / 3); |
|||
font-family: $font-family-base; |
|||
padding-bottom:REM(50px / 3); |
|||
position:relative; |
|||
&:before{ |
|||
width:REM(98px / 3); |
|||
height:REM(10px / 3); |
|||
background-color:#fff; |
|||
bottom:REM(24px / 3); |
|||
} |
|||
} |
|||
.date{ |
|||
margin-bottom:REM(15px / 3); |
|||
> dd { |
|||
font-size:REM(27px / 3); |
|||
} |
|||
} |
|||
.info { |
|||
li { |
|||
font-size:REM(22px / 3); |
|||
margin-bottom:REM(10px / 3); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right{ |
|||
.box { |
|||
border-radius: REM(20px / 3); |
|||
&.top{ |
|||
width: REM(335px / 3); |
|||
height: REM(235px / 3); |
|||
overflow: hidden; |
|||
position:absolute; |
|||
right:0; |
|||
top:REM(775px / 3); |
|||
} |
|||
&.bottom{ |
|||
width: REM(318px / 3); |
|||
height: REM(367px / 3); |
|||
overflow: hidden; |
|||
margin-top:0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.line-03 { |
|||
width:REM(191px); |
|||
@include display-flex(); |
|||
flex-direction: column; |
|||
.top { |
|||
border:REM(1px) solid #C8C8C8FF; |
|||
border-radius: REM(15px); |
|||
width: REM(191px); |
|||
height: REM(351px); |
|||
overflow: hidden; |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
.bottom { |
|||
border-radius: REM(15px); |
|||
width: REM(192px); |
|||
height: REM(112px); |
|||
background-color:#FFB400FF; |
|||
margin-top:REM(12px); |
|||
.link { |
|||
@include display-flex(); |
|||
flex-direction: column; |
|||
padding:REM(10px) REM(10px); |
|||
} |
|||
.title{ |
|||
font-size:REM(20px); |
|||
font-weight:$font-weight-extra-bold; |
|||
line-height:1.15; |
|||
color:#fff; |
|||
font-family: $font-family-base; |
|||
padding-bottom:REM(28px); |
|||
position:relative; |
|||
|
|||
&:before{ |
|||
content:""; |
|||
width:REM(66px); |
|||
height:REM(5px); |
|||
background-color:#fff; |
|||
position:absolute; |
|||
left:0; |
|||
bottom:REM(12px); |
|||
} |
|||
} |
|||
.sub-text{ |
|||
font-size:REM(18.36px); |
|||
line-height: REM(21px); |
|||
width:100%; |
|||
height: REM(42px); |
|||
min-height:REM(42px); |
|||
color:#fff; |
|||
word-wrap: break-word; |
|||
word-break: keep-all; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
min-width: 0; |
|||
} |
|||
} |
|||
@include display-xs(){ |
|||
width:100%; |
|||
margin-top:REM(20px / 3); |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
.top { |
|||
border-radius: REM(20px / 3); |
|||
width: REM(300px / 3); |
|||
height: REM(530px / 3); |
|||
} |
|||
.bottom { |
|||
border-radius: REM(20px / 3); |
|||
width: REM(335px / 3); |
|||
height: REM(276px / 3); |
|||
margin-top:REM(20px / 3); |
|||
align-self: flex-end; |
|||
box-sizing: border-box; |
|||
.link { |
|||
padding:REM(20px / 3); |
|||
} |
|||
.title{ |
|||
font-size:REM(51px / 3); |
|||
padding-bottom:REM(56px / 3); |
|||
word-wrap: break-word; |
|||
word-break: keep-all; |
|||
|
|||
&:before{ |
|||
content:""; |
|||
width:REM(107px / 3); |
|||
height:REM(7px / 3); |
|||
background-color:#fff; |
|||
position:absolute; |
|||
left:0; |
|||
bottom:REM(24px / 3); |
|||
} |
|||
} |
|||
.sub-text{ |
|||
font-size:REM(22px / 3); |
|||
line-height: REM(30px / 3); |
|||
height: REM(60px / 3); |
|||
min-height:REM(60px / 3); |
|||
color:#fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.main-center { |
|||
margin:REM(15px) 0 REM(50px) 0; |
|||
.line-banner{ |
|||
border:REM(1px) solid #C8C8C8FF; |
|||
width:100%; |
|||
height:REM(71px); |
|||
border-radius: REM(12px); |
|||
background-position: center center; |
|||
overflow: hidden; |
|||
background-size: cover; |
|||
|
|||
} |
|||
@include display-xs(){ |
|||
margin:REM(20px / 3) 0; |
|||
.line-banner{ |
|||
width:100%; |
|||
height:REM(65px / 3); |
|||
border-radius: REM(20px / 3); |
|||
} |
|||
} |
|||
} |
|||
.family-list.mobile { |
|||
display: none; |
|||
@include display-xs(){ |
|||
@include display-flex(); |
|||
justify-content: center; |
|||
width:100%; |
|||
height:REM(120px / 3); |
|||
border-radius: REM(20px / 3); |
|||
padding-top:REM(60px / 3); |
|||
position:relative; |
|||
background-color:#fff; |
|||
border:REM(1px) solid #cccccc; |
|||
margin-bottom:REM(80px / 3); |
|||
&:before{ |
|||
content:"국민연금공단 SNS 바로가기"; |
|||
font-size:REM(26px / 3); |
|||
font-weight:$font-weight-bold; |
|||
position:absolute; |
|||
width:100%; |
|||
text-align: center; |
|||
left:0; |
|||
top:REM(15px / 3); |
|||
line-height:1; |
|||
} |
|||
.item{ |
|||
a { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position:relative; |
|||
padding-left:REM(45px / 3); |
|||
font-size:REM(18.5px / 3); |
|||
height:REM(40px / 3); |
|||
line-height:1; |
|||
&:before{ |
|||
content:""; |
|||
display: block; |
|||
width:REM(40px / 3); |
|||
height:REM(40px / 3); |
|||
border-radius: REM(10px / 3); |
|||
background-color:#02256CFF; |
|||
position:absolute; |
|||
left:0; |
|||
top:50%; |
|||
transform: translate(0, -50%); |
|||
} |
|||
&:after{ |
|||
content:""; |
|||
position:absolute; |
|||
left:0; |
|||
top:50%; |
|||
transform: translate(0, -50%); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
&.tv { |
|||
> a { |
|||
&:after{ |
|||
width:REM(22px / 3); |
|||
height:REM(15px / 3); |
|||
margin-left:REM(8px / 3); |
|||
@include background-image('../images/common/tv.png') |
|||
} |
|||
} |
|||
} |
|||
&.instagram { |
|||
margin-left:REM(50px / 3); |
|||
> a { |
|||
&:after{ |
|||
width:REM(19px / 3); |
|||
height:REM(19px / 3); |
|||
margin-left:REM(9px / 3); |
|||
@include background-image('../images/common/instagram.png') |
|||
} |
|||
} |
|||
} |
|||
&.blog { |
|||
margin-left:REM(50px / 3); |
|||
> a { |
|||
&:after{ |
|||
width:REM(21px / 3); |
|||
height:REM(17px / 3); |
|||
margin-left:REM(8px / 3); |
|||
@include background-image('../images/common/blog.png') |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.main-bottom { |
|||
@include display-flex(); |
|||
justify-content: space-between; |
|||
position:relative; |
|||
z-index:1; |
|||
@include display-xs(){ |
|||
flex-direction: column; |
|||
} |
|||
.title-box { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom:REM(1px) solid #02205b; |
|||
padding-bottom:REM(10px); |
|||
margin-bottom:REM(10px); |
|||
@include display-xs(){ |
|||
justify-content: flex-end; |
|||
padding-bottom:REM(20px / 3); |
|||
margin-bottom:REM(20px / 3); |
|||
} |
|||
} |
|||
.slide-title { |
|||
font-size:REM(23.57px); |
|||
line-height:1; |
|||
color:#02205b; |
|||
@include display-xs(){ |
|||
display: none; |
|||
} |
|||
} |
|||
.control-box { |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.btn { |
|||
background-color:#fff; |
|||
width:REM(24px); |
|||
height:REM(24px); |
|||
border-radius: REM(24px); |
|||
border:none; |
|||
@include display-flex(); |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-left:REM(15px); |
|||
line-height:1; |
|||
&.btn-right{ |
|||
margin-left:REM(5px); |
|||
} |
|||
.icon { |
|||
font-size:REM(24px); |
|||
} |
|||
} |
|||
.swiper-pagination { |
|||
position:relative; |
|||
left:0; |
|||
transform: translate(0); |
|||
height:REM(24px); |
|||
bottom: 0; |
|||
@include display-flex(); |
|||
align-items: center; |
|||
overflow: initial; |
|||
} |
|||
.swiper-pagination-bullet{ |
|||
background-color:#8b93ae; |
|||
width:REM(7px); |
|||
height:REM(7px); |
|||
&.swiper-pagination-bullet-active { |
|||
width:REM(18px); |
|||
border-radius: REM(9px); |
|||
background-color:#02205b; |
|||
} |
|||
} |
|||
@include display-xs(){ |
|||
.btn { |
|||
width:REM(42px / 3); |
|||
height:REM(42px / 3); |
|||
border-radius: REM(42px / 3); |
|||
margin-left:REM(26px / 3); |
|||
&.btn-right{ |
|||
margin-left:REM(15px / 3); |
|||
} |
|||
.icon { |
|||
font-size:REM(38px / 3); |
|||
} |
|||
} |
|||
.swiper-pagination { |
|||
height:REM(42px / 3); |
|||
} |
|||
.swiper-pagination-bullet{ |
|||
width:REM(12px / 3); |
|||
height:REM(12px / 3); |
|||
&.swiper-pagination-bullet-active { |
|||
width:REM(28px / 3); |
|||
border-radius: REM(14px / 3); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.left-slide{ |
|||
width:REM(416px); |
|||
.swiper-container { |
|||
width:REM(416px); |
|||
height:REM(375px); |
|||
overflow:hidden; |
|||
} |
|||
.recent-list { |
|||
.swiper-slide { |
|||
padding:REM(12px) 0; |
|||
height: REM(78px) !important; |
|||
border-bottom:REM(1px) solid #26356b; |
|||
box-sizing: border-box; |
|||
a { |
|||
@include display-flex(); |
|||
width: 100%; |
|||
position:relative; |
|||
min-width: 0; |
|||
&:after{ |
|||
content:"\e5e1"; |
|||
font-family: 'Material Symbols Outlined'; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
letter-spacing: normal; |
|||
text-transform: none; |
|||
display: inline-block; |
|||
white-space: nowrap; |
|||
word-wrap: normal; |
|||
direction: ltr; |
|||
-webkit-font-feature-settings: 'liga'; |
|||
-webkit-font-smoothing: antialiased; |
|||
font-size:REM(30px); |
|||
position:absolute; |
|||
right:0; |
|||
font-weight:200; |
|||
top:50%; |
|||
transform: translate(0,-50%); |
|||
} |
|||
} |
|||
.date{ |
|||
font-size:REM(12.75px); |
|||
font-weight:$font-weight-semi-bold; |
|||
line-height:1; |
|||
color:#02205b; |
|||
.big{ |
|||
display: block; |
|||
font-size:REM(34.38px); |
|||
font-weight:$font-weight-bold; |
|||
} |
|||
} |
|||
.notice-text { |
|||
font-size:REM(15.75px); |
|||
margin-left:REM(15px); |
|||
@include display-flex(); |
|||
justify-content: space-evenly; |
|||
flex-direction: column; |
|||
color:#02205b; |
|||
.label{ |
|||
display: block; |
|||
font-size:REM(12.75px); |
|||
line-height:1; |
|||
color:#02205b; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@include display-xs(){ |
|||
width:100%; |
|||
.swiper-container { |
|||
width:100%; |
|||
height:REM(624px / 3); |
|||
overflow:hidden; |
|||
} |
|||
.recent-list { |
|||
.swiper-slide { |
|||
padding:REM(25px / 3) 0; |
|||
height: REM(126px / 3) !important; |
|||
a { |
|||
@include display-flex(); |
|||
width: 100%; |
|||
position:relative; |
|||
&:after{ |
|||
font-size:REM(60px / 3); |
|||
} |
|||
} |
|||
.date{ |
|||
font-size:REM(21.73px / 3); |
|||
.big{ |
|||
font-size:REM(54.32px / 3); |
|||
} |
|||
} |
|||
.notice-text { |
|||
font-size:REM(24.83px / 3); |
|||
margin-left:REM(35px / 3); |
|||
.label{ |
|||
font-size:REM(24.83px / 3); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.right-slide{ |
|||
width:REM(360px); |
|||
overflow: hidden; |
|||
.swiper-slide { |
|||
width:REM(175px) !important; |
|||
height:REM(315px); |
|||
border-radius: REM(15px); |
|||
border:none; |
|||
background-size: cover; |
|||
overflow: hidden; |
|||
&.swiper-slide{ |
|||
margin-right:REM(8px); |
|||
} |
|||
} |
|||
.btn-more{ |
|||
display: none; |
|||
} |
|||
@include display-xs(){ |
|||
width:100%; |
|||
.title-box { |
|||
display: none; |
|||
} |
|||
.swiper-slide { |
|||
width:REM(317px / 3) !important; |
|||
height:REM(584px / 3); |
|||
border-radius: REM(20px / 3); |
|||
&.swiper-slide{ |
|||
margin-right:REM(13px / 3); |
|||
} |
|||
} |
|||
.btn-more { |
|||
display: block; |
|||
font-size:REM(31.7px / 3); |
|||
border:REM(1px) solid #7D7D7DFF; |
|||
color:#7D7D7DFF; |
|||
width: 100%; |
|||
height: REM(79px / 3); |
|||
margin:REM(37px / 3) 0 REM(57px / 3) 0; |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
// Animated Icons |
|||
// -------------------------- |
|||
|
|||
.#{$fa-css-prefix}-spin { |
|||
animation: fa-spin 2s infinite linear; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-pulse { |
|||
animation: fa-spin 1s infinite steps(8); |
|||
} |
|||
|
|||
@keyframes fa-spin { |
|||
0% { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
@ -1,20 +0,0 @@ |
|||
// Bordered & Pulled |
|||
// ------------------------- |
|||
|
|||
.#{$fa-css-prefix}-border { |
|||
border: solid .08em $fa-border-color; |
|||
border-radius: .1em; |
|||
padding: .2em .25em .15em; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-pull-left { float: left; } |
|||
.#{$fa-css-prefix}-pull-right { float: right; } |
|||
|
|||
.#{$fa-css-prefix}, |
|||
.fas, |
|||
.far, |
|||
.fal, |
|||
.fab { |
|||
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; } |
|||
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; } |
|||
} |
|||
@ -1,21 +0,0 @@ |
|||
// Base Class Definition |
|||
// ------------------------- |
|||
|
|||
.#{$fa-css-prefix}, |
|||
.fas, |
|||
.far, |
|||
.fal, |
|||
.fad, |
|||
.fab { |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
display: inline-block; |
|||
font-style: normal; |
|||
font-variant: normal; |
|||
text-rendering: auto; |
|||
line-height: 1; |
|||
} |
|||
|
|||
%fa-icon { |
|||
@include fa-icon; |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
// Fixed Width Icons |
|||
// ------------------------- |
|||
.#{$fa-css-prefix}-fw { |
|||
text-align: center; |
|||
width: $fa-fw-width; |
|||
} |
|||
2313
src/scss/plugins/fontawesome-5.15.2/_icons.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,23 +0,0 @@ |
|||
// Icon Sizes |
|||
// ------------------------- |
|||
|
|||
// makes the font 33% larger relative to the icon container |
|||
.#{$fa-css-prefix}-lg { |
|||
font-size: (4em / 3); |
|||
line-height: (3em / 4); |
|||
vertical-align: -.0667em; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-xs { |
|||
font-size: .75em; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-sm { |
|||
font-size: .875em; |
|||
} |
|||
|
|||
@for $i from 1 through 10 { |
|||
.#{$fa-css-prefix}-#{$i}x { |
|||
font-size: $i * 1em; |
|||
} |
|||
} |
|||
@ -1,18 +0,0 @@ |
|||
// List Icons |
|||
// ------------------------- |
|||
|
|||
.#{$fa-css-prefix}-ul { |
|||
list-style-type: none; |
|||
margin-left: $fa-li-width * 5/4; |
|||
padding-left: 0; |
|||
|
|||
> li { position: relative; } |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-li { |
|||
left: -$fa-li-width; |
|||
position: absolute; |
|||
text-align: center; |
|||
width: $fa-li-width; |
|||
line-height: inherit; |
|||
} |
|||
@ -1,56 +0,0 @@ |
|||
// Mixins |
|||
// -------------------------- |
|||
|
|||
@mixin fa-icon { |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
display: inline-block; |
|||
font-style: normal; |
|||
font-variant: normal; |
|||
font-weight: normal; |
|||
line-height: 1; |
|||
} |
|||
|
|||
@mixin fa-icon-rotate($degrees, $rotation) { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; |
|||
transform: rotate($degrees); |
|||
} |
|||
|
|||
@mixin fa-icon-flip($horiz, $vert, $rotation) { |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; |
|||
transform: scale($horiz, $vert); |
|||
} |
|||
|
|||
|
|||
// Only display content to screen readers. A la Bootstrap 4. |
|||
// |
|||
// See: http://a11yproject.com/posts/how-to-hide-content/ |
|||
|
|||
@mixin sr-only { |
|||
border: 0; |
|||
clip: rect(0, 0, 0, 0); |
|||
height: 1px; |
|||
margin: -1px; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
position: absolute; |
|||
width: 1px; |
|||
} |
|||
|
|||
// Use in conjunction with .sr-only to only display content when it's focused. |
|||
// |
|||
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 |
|||
// |
|||
// Credit: HTML5 Boilerplate |
|||
|
|||
@mixin sr-only-focusable { |
|||
&:active, |
|||
&:focus { |
|||
clip: auto; |
|||
height: auto; |
|||
margin: 0; |
|||
overflow: visible; |
|||
position: static; |
|||
width: auto; |
|||
} |
|||
} |
|||
@ -1,24 +0,0 @@ |
|||
// Rotated & Flipped Icons |
|||
// ------------------------- |
|||
|
|||
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } |
|||
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } |
|||
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } |
|||
|
|||
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } |
|||
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } |
|||
.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); } |
|||
|
|||
// Hook for IE8-9 |
|||
// ------------------------- |
|||
|
|||
:root { |
|||
.#{$fa-css-prefix}-rotate-90, |
|||
.#{$fa-css-prefix}-rotate-180, |
|||
.#{$fa-css-prefix}-rotate-270, |
|||
.#{$fa-css-prefix}-flip-horizontal, |
|||
.#{$fa-css-prefix}-flip-vertical, |
|||
.#{$fa-css-prefix}-flip-both { |
|||
filter: none; |
|||
} |
|||
} |
|||
@ -1,5 +0,0 @@ |
|||
// Screen Readers |
|||
// ------------------------- |
|||
|
|||
.sr-only { @include sr-only; } |
|||
.sr-only-focusable { @include sr-only-focusable; } |
|||
2066
src/scss/plugins/fontawesome-5.15.2/_shims.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,31 +0,0 @@ |
|||
// Stacked Icons |
|||
// ------------------------- |
|||
|
|||
.#{$fa-css-prefix}-stack { |
|||
display: inline-block; |
|||
height: 2em; |
|||
line-height: 2em; |
|||
position: relative; |
|||
vertical-align: middle; |
|||
width: ($fa-fw-width*2); |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-stack-1x, |
|||
.#{$fa-css-prefix}-stack-2x { |
|||
left: 0; |
|||
position: absolute; |
|||
text-align: center; |
|||
width: 100%; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-stack-1x { |
|||
line-height: inherit; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-stack-2x { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
.#{$fa-css-prefix}-inverse { |
|||
color: $fa-inverse; |
|||
} |
|||
2330
src/scss/plugins/fontawesome-5.15.2/_variables.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,23 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
|
|||
@font-face { |
|||
font-family: 'Font Awesome 5 Brands'; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-display: $fa-font-display; |
|||
src: url('#{$fa-font-path}/fa-brands-400.eot'); |
|||
src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'), |
|||
url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), |
|||
url('#{$fa-font-path}/fa-brands-400.woff') format('woff'), |
|||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'), |
|||
url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg'); |
|||
} |
|||
|
|||
.fab { |
|||
font-family: 'Font Awesome 5 Brands'; |
|||
font-weight: 400; |
|||
} |
|||
1918
src/scss/plugins/fontawesome-5.15.2/duotone.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,16 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
@import 'mixins'; |
|||
@import 'core'; |
|||
@import 'larger'; |
|||
@import 'fixed-width'; |
|||
@import 'list'; |
|||
@import 'bordered-pulled'; |
|||
@import 'animated'; |
|||
@import 'rotated-flipped'; |
|||
@import 'stacked'; |
|||
@import 'icons'; |
|||
@import 'screen-reader'; |
|||
@ -1,23 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
|
|||
@font-face { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-style: normal; |
|||
font-weight: 300; |
|||
font-display: $fa-font-display; |
|||
src: url('#{$fa-font-path}/fa-light-300.eot'); |
|||
src: url('#{$fa-font-path}/fa-light-300.eot?#iefix') format('embedded-opentype'), |
|||
url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'), |
|||
url('#{$fa-font-path}/fa-light-300.woff') format('woff'), |
|||
url('#{$fa-font-path}/fa-light-300.ttf') format('truetype'), |
|||
url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg'); |
|||
} |
|||
|
|||
.fal { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-weight: 300; |
|||
} |
|||
@ -1,23 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
|
|||
@font-face { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-display: $fa-font-display; |
|||
src: url('#{$fa-font-path}/fa-regular-400.eot'); |
|||
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'), |
|||
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), |
|||
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'), |
|||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'), |
|||
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg'); |
|||
} |
|||
|
|||
.far { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-weight: 400; |
|||
} |
|||
@ -1,24 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
|
|||
@font-face { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-style: normal; |
|||
font-weight: 900; |
|||
font-display: $fa-font-display; |
|||
src: url('#{$fa-font-path}/fa-solid-900.eot'); |
|||
src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'), |
|||
url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), |
|||
url('#{$fa-font-path}/fa-solid-900.woff') format('woff'), |
|||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'), |
|||
url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg'); |
|||
} |
|||
|
|||
.fa, |
|||
.fas { |
|||
font-family: 'Font Awesome 5 Pro'; |
|||
font-weight: 900; |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
/*! |
|||
* Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com |
|||
* License - https://fontawesome.com/license (Commercial License) |
|||
*/ |
|||
@import 'variables'; |
|||
@import 'shims'; |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue