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
-
471src/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 { |
|
||||
|
//비주얼단 |
||||
|
.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 { |
||||
|
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: ""; |
content: ""; |
||||
clear: both; |
|
||||
|
position: absolute; |
||||
|
height: 100%; |
||||
display: block; |
display: block; |
||||
} |
|
||||
//section container 중앙정렬 가운데모음 |
|
||||
.section { |
|
||||
.container { |
|
||||
width: 1230px; |
|
||||
margin: 0 auto; |
|
||||
box-sizing: border-box; |
|
||||
|
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 { |
|
||||
|
//SECTION--GALLERY |
||||
|
.section--gallery { |
||||
|
background-color: #eaeaef; |
||||
.container { |
.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; |
display: flex; |
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
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); |
||||
} |
} |
||||
.logo { |
|
||||
background-image: url("../images/logo.png"); |
|
||||
background-repeat: no-repeat; |
|
||||
display: inline-block; |
|
||||
width: 220px; |
|
||||
height: 60px; |
|
||||
text-indent: -9999px; |
|
||||
|
|
||||
|
&: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