You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
683 lines
15 KiB
683 lines
15 KiB
@charset "utf-8"; |
|
@import url(//font.elice.io/EliceDigitalBaeum.css); |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); |
|
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard.css"); |
|
|
|
*{ |
|
padding: 0; |
|
margin: 0; |
|
box-sizing: border-box; |
|
letter-spacing: -0.7px; |
|
/* outline: 1px solid pink; */ |
|
} |
|
|
|
html, |
|
body { |
|
position: relative; |
|
height: 100%; |
|
} |
|
/* html{ |
|
scroll-behavior: smooth; |
|
} */ |
|
/*스크롤바 감추기*/ |
|
/* body{ -ms-overflow-style: none; } |
|
::-webkit-scrollbar { display: none; } */ |
|
|
|
ul, li{ list-style: none; } |
|
a{ text-decoration: none; color: inherit;} |
|
img{ display: block; } |
|
table{ border-spacing: 0; } |
|
.inner{ |
|
width: 1280px; |
|
height: 100%; |
|
margin: 0 auto; |
|
display: flex; |
|
} |
|
|
|
header{ |
|
width: 100%; |
|
height: 80px; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
z-index: 100; |
|
transition: all 0.3s; |
|
color: #fff; |
|
} |
|
header .hinner{ |
|
width: 1800px; |
|
height: 100%; |
|
margin: 0 auto; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
nav{ margin: 0 300px; height: 100%;} |
|
.gnb{ display: flex; height: 100%;} |
|
.gnb > li{ |
|
height: 100%; |
|
margin: 0 65px 0 0; |
|
position: relative; |
|
} |
|
.gnb > li:last-child{ margin: 0; } |
|
.gnb > li > a{ |
|
display: block; |
|
height: 100%; |
|
text-align: center; |
|
font-size: 18px; |
|
font: 600 18px 'pretendard', 'sans-serif'; |
|
line-height: 80px; |
|
text-shadow: 1px 1px 1px #333333; |
|
} |
|
.lnb{ |
|
padding: 0; |
|
opacity: 0; |
|
margin: 0; |
|
position: absolute; |
|
overflow: hidden; |
|
transition: all 0.5s; |
|
background-color: rgba(255,255,255,0.8); |
|
border-radius: 0 0 5px 5px; |
|
border: 2px solid #fff; |
|
box-shadow: 0px 4px 30px rgba(0,0,0,0.1); |
|
} |
|
.lnb > li{ |
|
padding: 0; |
|
width: 0; |
|
transition: all 0.5s; |
|
} |
|
.lnb > li > a{ |
|
display: block; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
transition: all 0.5s; |
|
font: 600 15px 'pretendard', 'sans-serif'; |
|
color: #111; |
|
} |
|
.gnb > li::after{ |
|
display: block; |
|
content: ""; |
|
height: 4px; |
|
width: 0; |
|
background-color: #007aff; |
|
box-shadow: 0 4px 10px rgb(0, 60, 255, 0.3); |
|
transition: all 0.5s; |
|
position: relative; |
|
z-index: 200; |
|
} |
|
.gnb > li:hover::after{ |
|
width: 100%; |
|
} |
|
.gnb > li:hover > .lnb{ |
|
display: block; |
|
opacity: 1; |
|
padding: 20px; |
|
} |
|
.gnb > li:hover > .lnb > li{ |
|
width: 200px; |
|
padding: 10px 0; |
|
} |
|
.question p{ |
|
font: 400 14px 'pretendard', 'sans-serif'; |
|
} |
|
|
|
header.on{ |
|
height: 70px; |
|
border-bottom: 1px solid #eeeeee; |
|
color: #111111; |
|
background-color: #fff; |
|
} |
|
header .wlogo, .blogo{ display: none; } |
|
header .logowrap > img.on{ display: block; } |
|
|
|
/*풀페이지 슬라이더*/ |
|
/* .fullslider{ height: 100%; } */ |
|
.wrap > .swiper-wrapper{ |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.wrap .swiper-wrapper .swiper-slide{ |
|
width: 100%; |
|
height: 100vh; |
|
} |
|
|
|
/*sec01*/ |
|
.sec01 .swiper { |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
} |
|
.sec01 .swiper-wrapper{ display: flex; } |
|
.sec01 .swiper-slide{ |
|
width: 100%; |
|
height: 100%; |
|
position: relative; |
|
} |
|
.sec01 .swiper-slide img:first-child{ |
|
position: absolute; |
|
top: calc(42% - (500px / 2)); |
|
left: calc(50% - (694px / 2)); |
|
opacity: 0.8; |
|
} |
|
.sec01 .swiper-slide img:nth-child(2){ |
|
position: absolute; |
|
top: calc(42% - (214px / 2)); |
|
left: calc(50% - (438px / 2)); |
|
} |
|
.sec01 .swiper-slide h1{ |
|
position: absolute; |
|
top: calc(48% + 155px); |
|
left: calc(50% - (366px / 2)); |
|
color: #fff; |
|
font: 400 21px 'pretendard', 'sans-serif'; |
|
text-align: center; |
|
line-height: 40px; |
|
} |
|
.sec01 video{ |
|
width: 100%; |
|
height: 100%; |
|
object-fit: fill; |
|
} |
|
.sec01 .swiper .scroll{ |
|
position: absolute; |
|
bottom: 80px; |
|
left: calc(50% - (47px / 2)); |
|
z-index: 1000; |
|
} |
|
|
|
.sec01 .swiper-horizontal > .sec01 .swiper-pagination-bullets, |
|
.sec01 .swiper-pagination-bullets.swiper-pagination-horizontal, |
|
.sec01 .swiper-pagination-custom, |
|
.sec01 .swiper-pagination-fraction{ |
|
bottom: 50px; |
|
} |
|
.sec01 .swiper-pagination-bullet{ |
|
width: 16px; |
|
height: 16px; |
|
background: #fff; |
|
opacity: 1; |
|
} |
|
.sec01 .swiper-pagination-bullet-active{ |
|
background: #12B9FF; |
|
} |
|
|
|
/*sec02*/ |
|
.sec02{ background: url(../images/main/main-background2.png) no-repeat center / cover; } |
|
.sec02 .inner{ |
|
align-items: center; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
.sec02 .left{ |
|
width: 620px; |
|
height: 540px; |
|
background-color: #fff; |
|
position: relative; |
|
border-radius: 5px; |
|
box-shadow: 0px 2px 20px #4882c1; |
|
} |
|
.sec02 .left .top{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
width: 620px; |
|
height: 80px; |
|
padding: 10px 0 0; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
border-radius: 5px; |
|
box-shadow: 0px 1px 5px #9db7d4; |
|
} |
|
.sec02 h3{ |
|
width: 120px; |
|
padding: 7px 0; |
|
text-align: center; |
|
font-size: 18px; |
|
background-color: #12B9FF; |
|
border: 1px solid #fff; |
|
border-radius: 20px; |
|
margin: 0 30px 0 0; |
|
color: #fff; |
|
font-family: 'Elice Digital Baeum', 'sans-serif'; |
|
} |
|
.sec02 .left .top > .tap{ |
|
width: 140px; |
|
height: 25px; |
|
border-radius: 5px; |
|
display: flex; |
|
border: 1px solid #12B9FF; |
|
} |
|
.sec02 .left .top > .tap > span:nth-child(1), |
|
.sec02 .left .top > .tap > span:nth-child(2){ |
|
width: 50%; |
|
height: 100%; |
|
display: block; |
|
border-radius: 5px; |
|
text-align: center; |
|
font: 700 14px 'pretendard', 'sans-serif'; |
|
line-height: 25px; |
|
color: #12B9FF; |
|
} |
|
.sec02 .left .top > .tap > span.on{ |
|
background-color: #12B9FF; |
|
outline: 1px solid #12B9FF; |
|
color: #fff; |
|
} |
|
.sec02 .left .top > span{ |
|
font-size: 14px; |
|
color: #999999; |
|
margin: 0 40px; |
|
font-family: 'pretendard', 'sans-serif'; |
|
} |
|
.sec02 .left .top > a{ |
|
color: #12B9FF; |
|
font: 700 14px 'pretendard', 'sans-serif'; |
|
} |
|
.sec02 .left .top > a:hover{ color: #999999; } |
|
.sec02 .contents{ |
|
width: 100%; |
|
height: 540px; |
|
display: none; |
|
} |
|
.sec02 .contents table{ |
|
width: 100%; |
|
margin: 80px 0 0; |
|
font-family: 'pretendard', 'sans-serif'; |
|
color: #111111; |
|
} |
|
.sec02 .contents table th{ background-color: #FBFCFD; } |
|
.sec02 .contents table th:nth-child(1){ width: 20%; text-align: right; padding: 0 30px 0 0} |
|
.sec02 .contents table th:nth-child(2){ width: 30%; color: #666666;} |
|
.sec02 .contents table th:nth-child(3){ width: 20%; text-align: right; padding: 0 35px 0 0; color: #666666;} |
|
.sec02 .contents table th:nth-child(4){ width: 30%; text-align: right;padding: 0 50px 0 0;} |
|
.sec02 .contents table td:nth-child(3){ color: #0047FF; } |
|
.sec02 .contents table td:nth-child(1), |
|
.sec02 .contents table td:nth-child(3){ |
|
text-align: right; |
|
padding: 0 35px 0 0; |
|
} |
|
.sec02 .contents table td:nth-child(4){ |
|
text-align: right; |
|
padding: 0 50px 0 0; |
|
} |
|
.sec02 .contents table th, |
|
.sec02 .contents table td{ |
|
height: 40px; |
|
text-align: center; |
|
font-size: 14px; |
|
} |
|
.sec02 .contents.on{ display: block; } |
|
|
|
.sec02 .right .event, |
|
.sec02 .right .notice{ |
|
position: relative; |
|
box-shadow: 0px 2px 20px #4882c1; |
|
border-radius: 5px;} |
|
.sec02 .right .event > h3, |
|
.sec02 .right .notice > h3{ |
|
position: absolute; |
|
top: 25px; |
|
left: 30px; |
|
} |
|
.sec02 .right .event > a, |
|
.sec02 .right .notice > a{ |
|
position: absolute; |
|
top: calc(50% - 30px); |
|
right: 35px; |
|
} |
|
.sec02 .right .notice > img{ |
|
position: absolute; |
|
top: 70px; |
|
left: 30px; |
|
} |
|
|
|
.sec02 .right .notice{ |
|
width: 620px; |
|
height: 200px; |
|
margin: 40px 0 0; |
|
background-color: #fff; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.sec02 .right .notice > ul{ padding: 0 0 0 40px; } |
|
.sec02 .right .notice > ul > li > a{ |
|
display: block; |
|
width: 305px; |
|
color: #999999; |
|
overflow:hidden; |
|
text-overflow:ellipsis; |
|
white-space:nowrap; |
|
font: 600 18px 'pretendard', 'sans-serif'; |
|
} |
|
.sec02 .right .notice > ul > li > a:hover{ |
|
color: #12B9FF; |
|
} |
|
.sec02 .right .notice > ul > li{ |
|
padding: 15px 0; |
|
} |
|
|
|
/*sec03*/ |
|
.sec03{ |
|
background: url(../images/main/main-background3.png) no-repeat center / cover; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.sec03 .inner { |
|
flex-direction: column; |
|
justify-content: center; |
|
} |
|
.sec03 .inner > div > p:first-child{ |
|
font-size: 25px; |
|
color: #fff; |
|
font: 700 25px 'Poppins', 'sans-serif'; |
|
text-shadow: 0px 0px 5px rgba(0,0,0,0.8); |
|
} |
|
.sec03 .inner > div > h1{ |
|
font-size: 62px; |
|
color: #fff; |
|
font-family: 'Elice Digital Baeum', 'sans-serif'; |
|
text-shadow: 0px 0px 5px rgba(0,0,0,0.8); |
|
} |
|
.sec03 .inner > div > p:nth-child(3){ |
|
font-size: 19px; |
|
color: #fff; |
|
margin: 15px 0 40px; |
|
font-family: 'pretendard', 'sans-serif'; |
|
line-height: 35px; |
|
} |
|
.sec03 .inner > div > button{ |
|
width: 190px; |
|
height: 55px; |
|
font-size: 15px; |
|
color: #fff; |
|
background-color: transparent; |
|
line-height: 55px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
border-radius: 45px; |
|
border: 1.5px solid #fff; |
|
font-family: 'pretendard', 'sans-serif'; |
|
cursor: pointer; |
|
} |
|
.sec03 .inner > div > button > span{ padding: 0 20px; } |
|
.sec03 .inner > div > button > .material-symbols-outlined { |
|
font-variation-settings: |
|
'FILL' 0, |
|
'wght' 400, |
|
'GRAD' 0, |
|
'opsz' 48 |
|
} |
|
|
|
/*sec03 물결*/ |
|
.sec03 .box{ |
|
position: absolute; |
|
bottom: 100px; |
|
} |
|
.sec03 .box:nth-child(2){ |
|
bottom: 0px; |
|
} |
|
.sec03 .box .wave{ |
|
opacity: .1; |
|
position: absolute; |
|
background-color: #0af; |
|
top: 0; |
|
transform-origin: 50% 48%; |
|
border-radius: 50%; |
|
animation: drift 3000ms infinite linear; |
|
} |
|
.sec03 .box:first-child .wave{ |
|
width: 2000px; |
|
height: 2000px; |
|
left: -700px; |
|
} |
|
.sec03 .box:nth-child(2) .wave{ |
|
width: 5000px; |
|
height: 5000px; |
|
left: -300px; |
|
} |
|
.sec03 .box .wave.two{ |
|
animation: drift 7000ms infinite linear; |
|
opacity: .1; |
|
|
|
} |
|
.sec03 .box .wave.there{ |
|
animation: drift 5000ms infinite linear; |
|
opacity: .1; |
|
} |
|
|
|
|
|
@keyframes drift { |
|
from { transform: rotate(0deg); } |
|
from { transform: rotate(360deg); } |
|
} |
|
|
|
/*sec04*/ |
|
.sec04{ |
|
background: url(../images/main/main-background4.png) no-repeat center / cover; |
|
position: relative; |
|
margin-top: 1px; |
|
} |
|
.sec04 .inner{ |
|
flex-direction: column; |
|
justify-content: center; |
|
} |
|
.sec04 .top .business{ position: relative; } |
|
.sec04 .top .business > h1{ |
|
font: 700 62px 'Elice Digital Baeum', 'sans-serif'; |
|
color: #111111; |
|
margin: 0 0 20px; |
|
} |
|
.sec04 .top .business > p{ |
|
font: 400 19px 'pretendard', 'sans-serif'; |
|
line-height: 35px; |
|
} |
|
.sec04 .top .business > p::after{ |
|
content: ""; |
|
display: block; |
|
height: 1px; |
|
width: 100%; |
|
margin: 30px 0 50px; |
|
background-color: #efefef; |
|
} |
|
.sec04 .top .business > img{ |
|
position: absolute; |
|
top: 70px; |
|
right: 40px; |
|
} |
|
.sec04 .top .contents{ |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 0 0 220px; |
|
} |
|
.sec04 .top .contents .box > a{ |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.sec04 .top .contents .box > a > p{ |
|
position: absolute; |
|
font: 700 28px 'Elice Digital Baeum', 'sans-serif'; |
|
color: #fff; |
|
text-shadow: 0px 0px 5px rgba(0,0,0,0.8); |
|
} |
|
.sec04 .top .contents .box > p{ |
|
font: 400 16px 'pretendard', 'sans-serif'; |
|
color: #666666; |
|
margin: 10px; |
|
} |
|
.sec04 .bottom{ |
|
background: url(../images/main/main-4-sub-background.png) no-repeat center / cover; |
|
width: 100%; |
|
height: 270px; |
|
position: absolute; |
|
bottom: 0; |
|
} |
|
.sec04 .bottom .inner{ |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: space-between; |
|
} |
|
.sec04 .bottom .inner > p{ |
|
font: 400 25px 'Elice Digital Baeum', 'sans-serif'; |
|
color: #fff; |
|
} |
|
.sec04 .bottom .news{ |
|
position: relative; |
|
width: 640px; |
|
height: 70px; |
|
background-color: rgba(255,255,255,0.3); |
|
border-radius: 5px; |
|
display: flex; |
|
align-items: center; |
|
} |
|
.sec04 .bottom .news > .newstit{ |
|
width: 150px; |
|
font: 600 16px 'pretendard', 'sans-serif'; |
|
color: #fff; |
|
text-align: center; |
|
} |
|
.sec04 .bottom .news > .list{ |
|
width: 250px; |
|
font: 400 16px 'pretendard', 'sans-serif'; |
|
color: #fff; |
|
text-align: left; |
|
overflow:hidden; |
|
text-overflow:ellipsis; |
|
white-space:nowrap; |
|
} |
|
.sec04 .bottom .news > a:last-child{ |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 80px; |
|
height: 100%; |
|
color: #fff; |
|
border-radius: 0 5px 5px 0; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background-color: rgba(255,255,255,0.2); |
|
} |
|
.sec04 .bottom .news > a:last-child > .material-symbols-outlined { |
|
font-variation-settings: |
|
'FILL' 0, |
|
'wght' 400, |
|
'GRAD' 0, |
|
'opsz' 48; |
|
font-size: 35px; |
|
} |
|
|
|
/*topBt*/ |
|
.topBt{ |
|
position: fixed; |
|
right: 50px; |
|
bottom: 40px; |
|
z-index: 500; |
|
cursor: pointer; |
|
display: none; |
|
} |
|
.topBt.on{ display: block; } |
|
.btwrap{ |
|
width: 25px; |
|
height: 55px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-start; |
|
align-items: center; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.btwrap > div:first-child{ |
|
width: 45px; |
|
height: 45px; |
|
background-color: #0047FF; |
|
clip-path: ellipse(27% 50% at 50% 50%); |
|
} |
|
.btwrap > div:nth-child(2){ |
|
width: 20px; |
|
height: 24px; |
|
/* background-color: #0047FF; */ |
|
border-bottom: 20px solid #0047FF; |
|
border-left: 12px solid transparent; |
|
border-right: 12px solid transparent; |
|
border-radius: 10px; |
|
position: absolute; |
|
bottom: 0px; |
|
animation: vibration .8s infinite; |
|
} |
|
|
|
@keyframes vibration { |
|
0% { transform: rotate(0deg); } |
|
50% { transform: rotate(4deg); } |
|
100%{ transform: rotate(-4deg); } |
|
} |
|
|
|
svg{ |
|
position: absolute; |
|
bottom: -100px; |
|
} |
|
.btwrap .eye{ |
|
width: 5px; |
|
height: 5px; |
|
background-color: #fff; |
|
border-radius: 50%; |
|
offset-path: path('m 10 30 Q 5 24 11 16 Q 16 9 12 3'); |
|
offset-distance: 0%; |
|
position: absolute; |
|
top: -15px; |
|
left: 5px; |
|
transition: all .3s; |
|
} |
|
.btwrap:hover .eye{ |
|
animation: eye .3s linear alternate forwards; |
|
} |
|
.btwrap > p{ |
|
position: absolute; |
|
bottom: -40px; |
|
text-align: center; |
|
font-size: 5px; |
|
color: #fff; |
|
transition: all 0.5s; |
|
} |
|
.btwrap:hover > p{ bottom: 8px; } |
|
@keyframes eye { |
|
from { offset-distance: 0%; } |
|
to { offset-distance: 100%; } |
|
} |
|
|
|
/*footer*/ |
|
footer{ |
|
background-color: #111827; |
|
width: 100%; |
|
/* height: 160px; */ |
|
overflow: hidden; |
|
height: 0; |
|
transition: height 0.1s; |
|
} |
|
footer.on{ |
|
height: 160px; |
|
transition: height 0.1s; |
|
} |
|
footer .inner{ |
|
align-items: center; |
|
position: relative; |
|
} |
|
footer p{ |
|
font: 400 14px 'pretendard', 'sans-serif'; |
|
color: #fff; |
|
} |
|
footer p:first-child{ |
|
font-weight: 700; |
|
font-size: 18px; |
|
} |
|
footer div{ margin: 40px; } |
|
footer div > p{ margin: 5px 0; } |
|
footer .copyright{ |
|
position: absolute; |
|
right: 0; |
|
top: 90px; |
|
}
|
|
|