-
10685dist/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
10685
dist/assets/css/style.css
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
2
dist/assets/css/style.min.css.map
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
15319
dist/assets/fonts/fa-duotone-900.svg
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
11318
dist/assets/fonts/fa-regular-400.svg
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
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
2
dist/assets/js/common.min.js.map
File diff suppressed because it is too large
View File
@ -1,2 +1,3 @@ |
|||||
|
|
||||
</body> |
</body> |
||||
</html> |
</html> |
@ -1,5 +1,266 @@ |
|||||
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"}) |
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"}) |
||||
@@include("./include/header.html") |
@@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/footer.html") |
||||
@@include("./include/tail.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
@ -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
@ -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
@ -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
@ -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'; |
|