commit
1953d8b0f7
39 changed files with 900 additions and 0 deletions
@ -0,0 +1,527 @@ |
|||||||
|
@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%; |
||||||
|
} |
||||||
|
ul, li{ list-style: none; } |
||||||
|
a{ text-decoration: none; } |
||||||
|
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; |
||||||
|
} |
||||||
|
header .hinner{ |
||||||
|
width: 1800px; |
||||||
|
height: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
nav{ margin: 0 300px; } |
||||||
|
.gnb{ display: flex; } |
||||||
|
.gnb > li{ |
||||||
|
margin: 0 65px 0 0; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.gnb > li:last-child{ margin: 0; } |
||||||
|
.gnb > li > a{ |
||||||
|
display: block; |
||||||
|
height: 80px; |
||||||
|
text-align: center; |
||||||
|
font-size: 18px; |
||||||
|
color: #fff; |
||||||
|
font: 600 18px 'pretendard', 'sans-serif'; |
||||||
|
line-height: 80px; |
||||||
|
text-shadow: 1px 1px 1px #333333; |
||||||
|
} |
||||||
|
.lnb{ |
||||||
|
padding: 0; |
||||||
|
opacity: 0; |
||||||
|
margin: 4px 0 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: #0047FF; |
||||||
|
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'; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
/*풀페이지 슬라이더*/ |
||||||
|
.fullslider{ height: 100%; } |
||||||
|
.wrap > .swiper-wrapper{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.wrap .swiper-wrapper .swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/*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:nth-child(1).on{ |
||||||
|
background-color: #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; |
||||||
|
} |
||||||
|
.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 .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; } |
||||||
|
.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'; |
||||||
|
} |
||||||
|
.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 |
||||||
|
} |
||||||
|
|
||||||
|
/*sec04*/ |
||||||
|
.sec04{ |
||||||
|
background: url(../images/main/main-background4.png) no-repeat center / cover; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.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; |
||||||
|
} |
||||||
|
|
||||||
|
/*footer*/ |
||||||
|
footer{ |
||||||
|
background-color: #111827; |
||||||
|
width: 100%; |
||||||
|
height: 160px; |
||||||
|
} |
||||||
|
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; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 281 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 818 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 556 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 994 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
@ -0,0 +1,346 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="ko"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/> |
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
||||||
|
<link href="//font.elice.io/EliceDigitalBaeum.css" rel="stylesheet"> |
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"> |
||||||
|
<link rel="stylesheet" type="text/css" href="./css/fishing.css"> |
||||||
|
<title>Legend Fishing</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<header> |
||||||
|
<div class="hinner"> |
||||||
|
<a href="./legendaryFishing.html"> |
||||||
|
<img src="./images/logo/logo-head_white.png" alt="헤더로고"> |
||||||
|
</a> |
||||||
|
<nav> |
||||||
|
<ul class="gnb"> |
||||||
|
<li> |
||||||
|
<a href="#">전설의 낚시 소개</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">사업경쟁력</a> |
||||||
|
|
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">기술력</a> |
||||||
|
<ul class="lnb"> |
||||||
|
<li> |
||||||
|
<a href="#">Hardware Technology</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">AI Motion Tracking</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">전설의 낚시 창업</a> |
||||||
|
<ul class="lnb"> |
||||||
|
<li> |
||||||
|
<a href="#">창업경쟁력</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">창업안내</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">커뮤니티</a> |
||||||
|
<ul class="lnb"> |
||||||
|
<li> |
||||||
|
<a href="#">공지사항</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">보도자료</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">문의사항</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">회사소개</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">경품스토어</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
<div class="question"> |
||||||
|
<a href="#"> |
||||||
|
<p>문의사항</p> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div class="wrap swiper fullslider"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<!-- 메인 --> |
||||||
|
<section class="swiper-slide sec01"> |
||||||
|
<div class="swiper banner"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide slide01"> |
||||||
|
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||||
|
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||||
|
<h1> |
||||||
|
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||||
|
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||||
|
</h1> |
||||||
|
<video muted autoplay loop> |
||||||
|
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||||
|
</video> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide slide02"> |
||||||
|
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||||
|
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||||
|
<h1> |
||||||
|
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||||
|
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||||
|
</h1> |
||||||
|
<video muted autoplay loop> |
||||||
|
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||||
|
</video> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide slide03"> |
||||||
|
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||||
|
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||||
|
<h1> |
||||||
|
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||||
|
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||||
|
</h1> |
||||||
|
<video muted autoplay loop> |
||||||
|
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||||
|
</video> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="swiper-pagination"></div> |
||||||
|
<img class="scroll" src="./images/main/스크롤유도.png" alt="스크롤"> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- 순위/이벤트/공지 --> |
||||||
|
<section class="swiper-slide sec02"> |
||||||
|
<div class="inner"> |
||||||
|
<div class="left"> |
||||||
|
<div class="top"> |
||||||
|
<h3>랭킹</h3> |
||||||
|
<div class="tap"> |
||||||
|
<span class="on">주간</span> |
||||||
|
<span>월간</span> |
||||||
|
</div> |
||||||
|
<span>주간랭킹 2022. 03. 1주차</span> |
||||||
|
<a href="#">더보기→</a> |
||||||
|
</div> |
||||||
|
<div class="contents"> |
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th>순위</th> |
||||||
|
<th>닉네임</th> |
||||||
|
<th>적립포인트</th> |
||||||
|
<th>총 적립포인트</th> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>1</td> |
||||||
|
<td>전설의 낚시</td> |
||||||
|
<td>3,700</td> |
||||||
|
<td>52,300</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>2</td> |
||||||
|
<td>김전설</td> |
||||||
|
<td>3,200</td> |
||||||
|
<td>12,200</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>3</td> |
||||||
|
<td>초코나무</td> |
||||||
|
<td>2,400</td> |
||||||
|
<td>38,600</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>4</td> |
||||||
|
<td>하트연어</td> |
||||||
|
<td>2,200</td> |
||||||
|
<td>22,500</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>5</td> |
||||||
|
<td>스포츠매니아</td> |
||||||
|
<td>1,800</td> |
||||||
|
<td>2,300</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>6</td> |
||||||
|
<td>낚시의신</td> |
||||||
|
<td>1,700</td> |
||||||
|
<td>8,300</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>7</td> |
||||||
|
<td>캡틴아메리카</td> |
||||||
|
<td>1,300</td> |
||||||
|
<td>1,300</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>8</td> |
||||||
|
<td>세월을낚는사람</td> |
||||||
|
<td>1,100</td> |
||||||
|
<td>6,300</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>9</td> |
||||||
|
<td>루어루어</td> |
||||||
|
<td>900</td> |
||||||
|
<td>3,800</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>10</td> |
||||||
|
<td>피싱마스터</td> |
||||||
|
<td>860</td> |
||||||
|
<td>4,900</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="event"> |
||||||
|
<h3>이벤트</h3> |
||||||
|
<img src="./images/main/main-2-area_box-left_1.png" alt="이벤트배너"> |
||||||
|
<a href="#"> |
||||||
|
<img src="./images/icon/main-2-area_more2.png" alt="바로가기버튼"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="notice"> |
||||||
|
<h3>공지사항</h3> |
||||||
|
<ul> |
||||||
|
<li> |
||||||
|
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<img src="./images/main/main-2__notice-icon.png" alt="공지사항아이콘"> |
||||||
|
<a href="#"> |
||||||
|
<img src="./images/icon/main-2-area_more3.png" alt="더보기버튼"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- 전설의 낚시 소개 --> |
||||||
|
<section class="swiper-slide sec03"> |
||||||
|
<div class="inner"> |
||||||
|
<div> |
||||||
|
<p>FISHING OF LEGEND</p> |
||||||
|
<h1>전설의 낚시 소개</h1> |
||||||
|
<p> |
||||||
|
스크린 낚시? 더 이상 비교대상이 아닙니다!<br> |
||||||
|
세계최초, 바다낚시의 짜릿하고 통쾌한 현장감을 생생히 느낄 수 있는<br> |
||||||
|
혁신적인 낚시 레포츠의 세계로 여러분을 초대합니다. |
||||||
|
</p> |
||||||
|
<button> |
||||||
|
자세히보기 |
||||||
|
<span class="material-symbols-outlined"> |
||||||
|
arrow_forward |
||||||
|
</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!-- 사업소개 --> |
||||||
|
<section class="swiper-slide sec04"> |
||||||
|
<div class="inner"> |
||||||
|
<div class="top"> |
||||||
|
<div class="business"> |
||||||
|
<h1>사업소개</h1> |
||||||
|
<p> |
||||||
|
차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템<br> |
||||||
|
단순 게임이 아닌 낚시 레저 인구들을 위한 VR 레포츠가 새롭게 선보입니다! |
||||||
|
</p> |
||||||
|
<img src="./images/main/GettyImages-1156439313.png" alt="낚시꾼"> |
||||||
|
</div> |
||||||
|
<div class="contents"> |
||||||
|
<div class="box"> |
||||||
|
<a href="#"> |
||||||
|
<p>사업경쟁력</p> |
||||||
|
<img src="./images/main/main-4-button_01.png" alt="사업경쟁력"> |
||||||
|
</a> |
||||||
|
<p>가상현실의 한계를 넘어, 놀랍도록 생생한 사투의 현장 재현</p> |
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<a href="#"> |
||||||
|
<p>기술력</p> |
||||||
|
<img src="./images/main/main-4-button_02.png" alt="기술력"> |
||||||
|
</a> |
||||||
|
<p>현존하는 가장 완벽한 기술의 융합</p> |
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<a href="#"> |
||||||
|
<p>프랜차이즈</p> |
||||||
|
<img src="./images/main/main-4-button_03.png" alt="프랜차이즈"> |
||||||
|
</a> |
||||||
|
<p>차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="inner"> |
||||||
|
<p> |
||||||
|
<strong>전설의 낚시</strong>는 고객의 가장 가까운 곳에서<br> |
||||||
|
<strong>최고의 VR 레포츠</strong>로 성장할 것입니다! |
||||||
|
</p> |
||||||
|
<div class="news"> |
||||||
|
<span class="newstit">보도자료</span> |
||||||
|
<a class= "list" href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발</a> |
||||||
|
<a href="#"> |
||||||
|
<span class="material-symbols-outlined">add</span> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<footer> |
||||||
|
<div class="inner"> |
||||||
|
<a href="./legendaryFishing.html"> |
||||||
|
<img src="./images/logo/main-5-footer_logo-bx.png" alt="푸터로고"> |
||||||
|
</a> |
||||||
|
<div> |
||||||
|
<p>주식회사 레전드</p> |
||||||
|
<p>주소 : 경기도 성남시 분당구 황새울로315, 대현BD 204호</p> |
||||||
|
<p>TEL 1533-3858 | FAX 031-701-3858</p> |
||||||
|
</div> |
||||||
|
<p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> |
||||||
|
|
||||||
|
<script> |
||||||
|
//sec01 슬라이더 |
||||||
|
var sec01Swiper = new Swiper(".banner", { |
||||||
|
loop: true, |
||||||
|
pagination: { |
||||||
|
el: ".swiper-pagination", |
||||||
|
} |
||||||
|
}); |
||||||
|
//풀페이지 슬라이더 |
||||||
|
var fullPageSwiper = new Swiper(".fullslider", { |
||||||
|
direction: "vertical", |
||||||
|
slidesPerView: 1, |
||||||
|
mousewheel: true, |
||||||
|
speed: 500, |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
<script src="./script/fishing.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue