10 changed files with 1387 additions and 104 deletions
-
637dist/assets/css/style.css
-
2dist/assets/css/style.min.css
-
2dist/assets/css/style.min.css.map
-
92dist/index.html
-
4src/html/include/footer.html
-
2src/html/include/header.html
-
1src/html/include/meta.html
-
85src/html/index.html
-
187src/scss/common/_layout.scss
-
479src/scss/pages/main.scss
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
@ -1,3 +1,190 @@ |
|||
/*************************************************************************************** |
|||
* 레이아웃 |
|||
****************************************************************************************/ |
|||
.clearfix::after { |
|||
content: ""; |
|||
clear: both; |
|||
display: block; |
|||
} |
|||
//section container 중앙정렬 가운데모음 |
|||
.section { |
|||
.container { |
|||
width: 1230px; |
|||
margin: 0 auto; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
|
|||
//헤더 영역 시작 |
|||
header { |
|||
.container { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.logo { |
|||
background-image: url("../images/logo.png"); |
|||
background-repeat: no-repeat; |
|||
display: inline-block; |
|||
width: 220px; |
|||
height: 60px; |
|||
text-indent: -9999px; |
|||
} |
|||
|
|||
.main-menu.depth-1 { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 100%; |
|||
|
|||
.depth-1-item { |
|||
position: relative; |
|||
white-space: nowrap; |
|||
letter-spacing: -0.04em; |
|||
|
|||
a { |
|||
display: inline-block; |
|||
font-size: 18px; |
|||
padding: 25px; |
|||
height: 100%; |
|||
} |
|||
&:hover { |
|||
.first-target { |
|||
color: #8b7004; |
|||
} |
|||
.depth-2 { |
|||
display: block; |
|||
z-index: 2; |
|||
} |
|||
} |
|||
|
|||
&.item-list:hover { |
|||
background-image: url("../images/header_menudown.png"); |
|||
background-repeat: no-repeat; |
|||
background-position: 100% 50% |
|||
} |
|||
.depth-2 { |
|||
display: none; |
|||
position: absolute; |
|||
top: 100%; |
|||
left: -20px; |
|||
background-color: #ffdb49; |
|||
white-space: nowrap; |
|||
width: 178px; |
|||
|
|||
li { |
|||
background-image: url("../images/header_hover_right.png"); |
|||
background-repeat: no-repeat; |
|||
background-position: 90% 50%; |
|||
&:hover {background-color: #ffd116;} |
|||
a { |
|||
display: block; |
|||
padding: 15px 0 15px 17px; |
|||
font-size: 15px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.btn { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border: 1px solid #a7a7a7; |
|||
border-radius: 20px; |
|||
font-size: 13px; |
|||
color: #808080; |
|||
padding: 5px 14px; |
|||
display: block; |
|||
opacity: .8; |
|||
.sign-in{padding-right: 11px; border-right: 1px solid #d6d6d6;} |
|||
.sign-up{padding-left: 10px} |
|||
} |
|||
} |
|||
//헤더영역 끝 |
|||
|
|||
//푸터영역 시작 |
|||
.footer_nav { |
|||
.container { |
|||
background-color: #2b2b2b; |
|||
|
|||
.footer_list { |
|||
text-align: center; |
|||
width: 1230px; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
|
|||
li { |
|||
padding: 25px; |
|||
border-right: 1px solid #141414; |
|||
|
|||
&:first-child { |
|||
border-left: 1px solid #141414; |
|||
} |
|||
|
|||
a { |
|||
color: #fff |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.footer_info { |
|||
background-color: #141414; |
|||
|
|||
.footer_container { |
|||
width: 1230px; |
|||
margin: 0 auto; |
|||
font-size: 14px; |
|||
color: #858585; |
|||
padding: 40px 0 50px 0; |
|||
position: relative; |
|||
|
|||
.company_address { |
|||
display: flex; |
|||
padding-bottom: 14px; |
|||
|
|||
li { |
|||
padding: 0 13px; |
|||
border-right: 1px solid #343434; |
|||
|
|||
&:first-child { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.business_num { |
|||
display: flex; |
|||
padding-bottom: 25px; |
|||
|
|||
li { |
|||
padding: 0 13px; |
|||
border-right: 1px solid #343434; |
|||
|
|||
&:first-child { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
img { |
|||
position: absolute; |
|||
bottom: 20%; |
|||
right: 0; |
|||
} |
|||
} |
|||
|
|||
//푸터영역 끝 |
|||
@ -1,37 +1,468 @@ |
|||
/********************************************************************************************************************** |
|||
* 메인페이지 |
|||
***********************************************************************************************************************/ |
|||
.clearfix::after { |
|||
content: ""; |
|||
clear: both; |
|||
display: block; |
|||
} |
|||
//section container 중앙정렬 가운데모음 |
|||
.section { |
|||
//비주얼단 |
|||
.section--visual { |
|||
position: relative; |
|||
|
|||
.swiper-container { |
|||
.swiper-wrapper { |
|||
.swiper-slide { |
|||
a { |
|||
h2 { |
|||
position: absolute; |
|||
left: 40%; |
|||
top: 43%; |
|||
font-weight: 400; |
|||
transform: translate(-40% -43%); |
|||
font-size: 46px; |
|||
color: #fff; |
|||
|
|||
span { |
|||
color: #ffdb49; |
|||
} |
|||
} |
|||
|
|||
p { |
|||
padding-top: 28px; |
|||
color: #babcc0; |
|||
font-size: 22px; |
|||
letter-spacing: -0.04em; |
|||
position: absolute; |
|||
left: 38%; |
|||
top: 50%; |
|||
transform: translate(-38% -50%); |
|||
} |
|||
} |
|||
img { |
|||
width: auto; |
|||
height: 675px; |
|||
position: center; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal { |
|||
.swiper-pagination-bullets { |
|||
bottom: 130px; |
|||
left: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
.swiper-pagination { |
|||
.swiper-pagination-bullet { |
|||
width: 8px; |
|||
height: 8px; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
background: #636568; |
|||
opacity: 0.2; |
|||
} |
|||
.swiper-pagination-bullet-active{ |
|||
opacity: 1; |
|||
width: 23px; |
|||
border-radius: 20px; |
|||
background: #fff; |
|||
} |
|||
} |
|||
.container { |
|||
width: 1230px; |
|||
margin: 0 auto; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
.tails { |
|||
color: #221d0a; |
|||
width: 100%; |
|||
height: 183px; |
|||
background: #ffdb49; |
|||
position: absolute; |
|||
bottom: -76px; |
|||
z-index: 2; |
|||
box-shadow: 0 10px 29px rgba(0,0,0, .18); |
|||
display: grid; |
|||
grid-template-columns: repeat(5,1fr); |
|||
li { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
border-right: 1px solid #e9c01c; |
|||
&:hover {background-color: #e9c01c;} |
|||
img {padding: 30px 30px 18px} |
|||
p { |
|||
padding: 0 30px 30px; |
|||
font-size: 18px; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//section news |
|||
|
|||
.section--news { |
|||
background-color: #f4f4f9; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
height: 100%; |
|||
display: block; |
|||
margin-left: 600px; |
|||
left: 50%; |
|||
right: 0; |
|||
background-color: #f9fafa; |
|||
} |
|||
|
|||
.notice { |
|||
display: flex; |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.title { |
|||
padding-top: 130px; |
|||
|
|||
h1 { |
|||
margin-bottom: 29px; |
|||
display: inline-block; |
|||
padding-top: 9px; |
|||
border-top: 1px solid #404040; |
|||
} |
|||
|
|||
h2 { |
|||
margin-bottom: 21px; |
|||
font-size: 24px; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
p { |
|||
width: 200px; |
|||
margin-bottom: 30px; |
|||
font-size: 14px; |
|||
line-height: 1.5em; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
a { |
|||
border: 1px solid #d2d2d6; |
|||
padding: 7px; |
|||
background: #f4f4f9; |
|||
font-size: 13px; |
|||
|
|||
&:hover { |
|||
background-color: #d2d2d6 |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
border-right: 1px solid #eaeaef; |
|||
z-index: 1; |
|||
padding-top: 130px; |
|||
height: 100%; |
|||
padding-bottom: 55px; |
|||
|
|||
.news-btn { |
|||
.tab-btn, .active { |
|||
width: 102px; |
|||
font-size: 15px; |
|||
position: relative; |
|||
margin-bottom: 18px; |
|||
|
|||
a { |
|||
display: block; |
|||
padding: 20px 0 20px 13px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
&::before { |
|||
content: ""; |
|||
z-index: -1; |
|||
width: 0; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
background: #41478f; |
|||
} |
|||
|
|||
&:last-child { |
|||
margin: 0; |
|||
} |
|||
|
|||
&:active { |
|||
a { |
|||
color: #fff; |
|||
text-indent: 10px; |
|||
} |
|||
|
|||
&::before { |
|||
content: ""; |
|||
width: 130px; |
|||
box-shadow: 0 7px 18px 0 rgba(0, 0, 0, 0.32); |
|||
} |
|||
} |
|||
|
|||
border-bottom: 1px solid #eaeaef; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.news-list-container { |
|||
padding: 130px 0 0 30px; |
|||
background-color: #f9fafa; |
|||
|
|||
.news-list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.content-news { |
|||
color: #000; |
|||
padding: 0 30px; |
|||
flex: 1; |
|||
border-right: 1px solid #eaeaef; |
|||
|
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
|
|||
h3 { |
|||
height: 32px; |
|||
font-size: 18px; |
|||
line-height: 1.6em; |
|||
letter-spacing: -0.04em; |
|||
color: #202020; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 44px; |
|||
font-size: 15px; |
|||
color: #a8a8a8; |
|||
} |
|||
} |
|||
|
|||
.content-text { |
|||
margin-top: 27px; |
|||
color: #7e7e7e; |
|||
font-size: 15px; |
|||
line-height: 1.6em; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
letter-spacing: -0.04em; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//헤더 정렬 |
|||
header { |
|||
.container { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.logo { |
|||
background-image: url("../images/logo.png"); |
|||
background-repeat: no-repeat; |
|||
display: inline-block; |
|||
width: 220px; |
|||
height: 60px; |
|||
text-indent: -9999px; |
|||
//SECTION--GALLERY |
|||
.section--gallery { |
|||
background-color: #eaeaef; |
|||
.container { |
|||
height: 485px; |
|||
position: relative; |
|||
.gallery-container { |
|||
h2 { |
|||
font-size: 26px; |
|||
font-weight: 700; |
|||
padding-top: 67px; |
|||
margin-bottom: 24px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.swiper-wrapper { |
|||
.swiper-slide { |
|||
margin-right: 17px; |
|||
border: 7px solid #fff; |
|||
background: #fff; |
|||
|
|||
&:hover { |
|||
box-shadow: 0 7px 9px rgba(0, 0, 0, .19); |
|||
} |
|||
|
|||
.text-container { |
|||
padding-left: 17px; |
|||
height: 93px; |
|||
|
|||
.gallery-title { |
|||
padding-top: 23px; |
|||
padding-bottom: 17px; |
|||
font-weight: 400; |
|||
letter-spacing: -0.04em; |
|||
} |
|||
|
|||
p { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
width: 295px; |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
height: 74px; |
|||
|
|||
a { |
|||
margin-top: 16px; |
|||
padding: 4px 20px; |
|||
background: #fff; |
|||
border-right: 1px solid #b5b5b4; |
|||
|
|||
&:hover { |
|||
box-shadow: 0 3px 7px rgba(0, 0, 0, .35); |
|||
} |
|||
|
|||
&:last-child { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.swiper-button-next:after, .swiper-button-prev:after { |
|||
content: ""; |
|||
} |
|||
|
|||
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { |
|||
opacity: 1; |
|||
cursor: auto; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.swiper-button-prev, .swiper-button-next { |
|||
position: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//SECTION--CASHINFO |
|||
|
|||
.section--cashinfo { |
|||
.cash-question { |
|||
display: flex; |
|||
margin-bottom: 73px; |
|||
letter-spacing: -0.04em; |
|||
} |
|||
|
|||
.container { |
|||
padding: 71px 0 0; |
|||
position: relative; |
|||
|
|||
.cash-question { |
|||
strong { |
|||
font-size: 22px; |
|||
font-weight: 700; |
|||
padding-bottom: 40px; |
|||
display: block; |
|||
} |
|||
|
|||
.always-question, .information { |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.always-question { |
|||
p { |
|||
a:hover { |
|||
color: #e9c01c; |
|||
} |
|||
|
|||
font-size: 15px; |
|||
} |
|||
|
|||
.question2, .question3 { |
|||
padding-top: 16px |
|||
} |
|||
.question3 { |
|||
padding-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
li { |
|||
width: 410px; |
|||
border-right: 1px solid #e9e9e9; |
|||
position: relative; |
|||
|
|||
&:last-child { |
|||
border: none |
|||
} |
|||
} |
|||
|
|||
.cash-account { |
|||
.bank-name { |
|||
color: #7c7366; |
|||
} |
|||
|
|||
.bankbook-num { |
|||
padding-top: 16px; |
|||
font-size: 27px; |
|||
font-weight: 600; |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
.account-name { |
|||
font-size: 15px; |
|||
padding-bottom: 20px; |
|||
color: #6a6a6a; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.information { |
|||
.title-num { |
|||
padding-bottom: 14px |
|||
} |
|||
|
|||
.company-number { |
|||
font-size: 30px; |
|||
color: #1da78b; |
|||
padding-bottom: 22px; |
|||
display: block; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.open-time { |
|||
font-size: 15px; |
|||
padding-bottom: 12px; |
|||
} |
|||
} |
|||
|
|||
.btn-cash { |
|||
padding: 8px 8px; |
|||
font-size: 13px; |
|||
border: 1px solid #dbdbdb; |
|||
|
|||
&:hover { |
|||
background: #eaeaef; |
|||
} |
|||
} |
|||
.question_img { |
|||
width: 65px; |
|||
height: 57px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: 20px; |
|||
} |
|||
.bottom_img { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-top: 1px solid #eaeaef; |
|||
height: 93px; |
|||
|
|||
li { |
|||
a { |
|||
padding: 15px; |
|||
|
|||
img { |
|||
height: 40px |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue