DohyunJegal
3 years ago
commit
76dae92cbe
34 changed files with 2624 additions and 0 deletions
@ -0,0 +1,928 @@ |
|||||||
|
* { |
||||||
|
font-family: 'Noto Sans KR', 'sans-serif'; |
||||||
|
} |
||||||
|
body { |
||||||
|
margin: 0 auto; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
a:visited, a:link { |
||||||
|
text-decoration: none; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
h1, h2, h3, h4, h5, p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
div, section, nav, main, footer, span { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.hide { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
/*notice효과들*/ |
||||||
|
.notice-fade-in { |
||||||
|
transform: translateY(0px); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.notice-fade-out { |
||||||
|
transform: translateY(80px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
/*notice banner 효과들*/ |
||||||
|
.notice-banner-animation0-off { |
||||||
|
transform: translateY(150px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.notice-banner-animation1-off { |
||||||
|
transform: translateY(200px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.notice-banner-animation2-off { |
||||||
|
transform: translateY(250px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.notice-banner-animation0-on { |
||||||
|
transform: translateY(0px); |
||||||
|
transition: all 1s; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.notice-banner-animation1-on { |
||||||
|
transform: translateY(0px); |
||||||
|
transition: all 1s; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.notice-banner-animation2-on { |
||||||
|
transform: translateY(0px); |
||||||
|
transition: all 1s; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
/*bot slider효과들*/ |
||||||
|
.bot-slider-fade-in { |
||||||
|
transform: translateY(0px); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
.bot-slider-fade-out { |
||||||
|
transform: translateY(200px); |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.fixed{ |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.dot-color { |
||||||
|
background-color: #7CE063 !important; |
||||||
|
} |
||||||
|
.cusor-p { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.nav { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-start; |
||||||
|
text-align: center; |
||||||
|
padding-top: 15px; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
.nav .login-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
.nav .login-sec .login-menu { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.nav .login-sec .login-menu li:nth-child(2) { |
||||||
|
margin-left: 8px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.nav .logo-sec { |
||||||
|
width: auto; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo{ |
||||||
|
width: 355px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo-m { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .gnb { |
||||||
|
width: 100%; |
||||||
|
max-width: 1150px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.nav .gnb .main-menu { |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 600; |
||||||
|
margin-bottom: 20px; |
||||||
|
flex: 5; |
||||||
|
} |
||||||
|
.nav .gnb .gnb-sns { |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
.nav .gnb .gnb-sns li { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
transition: all 0.2s; |
||||||
|
} |
||||||
|
.nav .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url("./main/main/line.png") no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.nav .toggle-btn { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.m-menu-box { |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
/*********************************************************************/ |
||||||
|
#main { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
#main .slider-sec{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
min-height: 240px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
margin-top: 50px; |
||||||
|
|
||||||
|
} |
||||||
|
#main .notice-sec .notice { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .notice-sec .notice h4 { |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 800; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box{ |
||||||
|
width: 900px; |
||||||
|
height: 24px; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 700; |
||||||
|
margin-left: 25px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box .notice-roll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
animation: noticeRoll 5s infinite; |
||||||
|
} |
||||||
|
@keyframes noticeRoll { |
||||||
|
0% { transform: translateY(0px);} |
||||||
|
25% { transform: translateY(-24px);} |
||||||
|
50% { transform: translateY(-48px);} |
||||||
|
50.05% { transform: translateY(0px);} |
||||||
|
100% { transform: translateY(0px);} |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll li{ |
||||||
|
width: 100%; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn { |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
#main .notice-sec .banner { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding-bottom: 80px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec { |
||||||
|
width: 100%; |
||||||
|
background-color: #B4A0FF; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 50px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box { |
||||||
|
width: 300px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
align-items: flex-start; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ |
||||||
|
font-size: 2em; |
||||||
|
display: block; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ |
||||||
|
font-size: 2.4em; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ |
||||||
|
font-size: 1.5em; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ |
||||||
|
font-size: 1.3em; |
||||||
|
padding-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { |
||||||
|
width: 150px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
filter: contrast(170%); |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer { |
||||||
|
width: 780px; |
||||||
|
height: auto; |
||||||
|
padding: 0px 15px 0px 15px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{ |
||||||
|
padding: 0px 10px 0px 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
#main .alliance-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a { |
||||||
|
margin-right: 70px; |
||||||
|
} |
||||||
|
#footer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 30px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#footer .footer-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo img { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
flex: 2; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num h1{ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500 |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p > strong{ |
||||||
|
font-size: 35px; |
||||||
|
font-weight: 600 |
||||||
|
} |
||||||
|
.nav-scroll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
z-index: 9999; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .gnb-sns { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .gnb-sns li { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
margin-right: 25px; |
||||||
|
transition: all 0.2s; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec .login-menu{ |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) { |
||||||
|
margin-left: 8px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .logo-sec{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .logo-sec img{ |
||||||
|
width: 60%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
flex: 2; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb .main-menu{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb .main-menu li{ |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.nav-scroll .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url(./main/main/line.png) no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.swiper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.swiper-wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
min-height: 240px ; |
||||||
|
} |
||||||
|
.swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.swiper-slide img { |
||||||
|
display: block ; |
||||||
|
width: 100% ; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.swiper .swiper-pagination-bullet { |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #7CE063; |
||||||
|
margin: 0 15px !important; |
||||||
|
} |
||||||
|
@media (max-width: 425px) { |
||||||
|
#scroll-nav { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
.m-menu-box { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||||
|
z-index: 9999; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu { |
||||||
|
width: 85%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding: 25px 0px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec .m-login-menu { |
||||||
|
margin: 0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row-reverse nowrap; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){ |
||||||
|
margin-left: 30px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb .m-main-menu { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb .m-main-menu > li { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 800; |
||||||
|
padding: 15px 30px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.nav .login-sec { |
||||||
|
width: 100%; |
||||||
|
height: 70px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .logo-sec { |
||||||
|
width: 50%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo-m { |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.nav .gnb { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url("./main/main/line.png") no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.nav .toggle-btn{ |
||||||
|
width: 50px; |
||||||
|
height: 29px; |
||||||
|
position: absolute; |
||||||
|
top: calc((80px - 29px) / 2); |
||||||
|
left: calc((100% - 60px )); |
||||||
|
padding: 0px ; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.nav .toggle-btn > div { |
||||||
|
width: 30px; |
||||||
|
height: 4px; |
||||||
|
background-color: #B4A0FF; |
||||||
|
display: block; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
/* nav m-menu */ |
||||||
|
|
||||||
|
/*silder-sec*/ |
||||||
|
#main .slider-sec .slider-outer .slider-btn { |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer .slider-btn .slider-bullet { |
||||||
|
content: ""; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) { |
||||||
|
margin-left: 25px; |
||||||
|
margin-right: 25px; |
||||||
|
} |
||||||
|
#main .notice-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
padding: 10px 20px; |
||||||
|
margin-bottom: 0px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice h4 { |
||||||
|
width: 25%; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box{ |
||||||
|
width: 70%; |
||||||
|
height: 35px; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
margin-left: 0px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box .notice-roll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
animation: noticeRoll 5s infinite; |
||||||
|
} |
||||||
|
@keyframes noticeRoll { |
||||||
|
0% { transform: translateY(7px);} |
||||||
|
25% { transform: translateY(-27px);} |
||||||
|
50% { transform: translateY(-64px);} |
||||||
|
50.5% { transform: translateY(0px);} |
||||||
|
100% { transform: translateY(7px);} |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll li{ |
||||||
|
width: 100%; |
||||||
|
height: 35px; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn { |
||||||
|
width: auto; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn img{ |
||||||
|
width: 15px; |
||||||
|
height: 15px; |
||||||
|
} |
||||||
|
#main .notice-sec .banner { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 0px 20px 20px 20px; |
||||||
|
} |
||||||
|
#main .notice-sec .banner a{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .notice-sec .banner a img{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
/*notice*/ |
||||||
|
#main .bot-slider-sec { |
||||||
|
width: 100%; |
||||||
|
background-color: #B4A0FF; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 50px; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { |
||||||
|
display: block; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ |
||||||
|
font-size: 1.75rem;; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ |
||||||
|
font-size: 1.6em; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ |
||||||
|
font-size: 18px; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ |
||||||
|
font-size: 18px; |
||||||
|
padding-bottom: 0px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
padding-top: 20px; |
||||||
|
padding-bottom: 25px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
filter: contrast(170%); |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
padding: 0px 0px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
padding: 0px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding: 0px 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) { |
||||||
|
margin-left: 0px; |
||||||
|
margin-right: 0px; |
||||||
|
} |
||||||
|
/*bot-slider-sec*/ |
||||||
|
#main .alliance-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a { |
||||||
|
margin-right: 0px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a img{ |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
/*.alliance-sec*/ |
||||||
|
#footer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
padding-top: 0px; |
||||||
|
padding-bottom: 30px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#footer .footer-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo img { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:first-child{ |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:nth-child(2){ |
||||||
|
margin: 0px 5px 0px 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:nth-child(3){ |
||||||
|
margin: 0px 5px 0px 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:last-child{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
flex: 2; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num { |
||||||
|
flex: 1; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num h1{ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500 |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p > strong{ |
||||||
|
font-size: 35px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.mySwiper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper .swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-height: 240px; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper .swiper-slide img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-height: 240px !important; |
||||||
|
object-fit: fill; |
||||||
|
} |
||||||
|
.mySwiper .swiper-pagination-bullet { |
||||||
|
width: 9px; |
||||||
|
height: 9px; |
||||||
|
background-color: #7CE063; |
||||||
|
margin: 0 5px !important; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,393 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="ko"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>음성명작페스티벌</title> |
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> |
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
||||||
|
<link rel="stylesheet" href="./main.css"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<!--네비--> |
||||||
|
<nav id="nav" class="nav"> |
||||||
|
<div class="login-sec"> |
||||||
|
<ul class="login-menu"> |
||||||
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="logo-sec"> |
||||||
|
<img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌"> |
||||||
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지"> |
||||||
|
</div> |
||||||
|
<div class="gnb"> |
||||||
|
<ul class="main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">주요 콘텐츠</li> |
||||||
|
<li class="cusor-p ">이벤트</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">커뮤니티</li> |
||||||
|
</ul> |
||||||
|
<ul class="gnb-sns"> |
||||||
|
<li class="cusor-p gnb-sns-item insta"></li> |
||||||
|
<li class="cusor-p gnb-sns-item blog"></li> |
||||||
|
<li class="cusor-p gnb-sns-item youtube"></li> |
||||||
|
<li class="cusor-p gnb-sns-item face"></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="gnb-line"></div> |
||||||
|
<div class="toggle-btn cusor-p"> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
<!-- 스크롤 네비--> |
||||||
|
<nav id="scroll-nav" class="nav-scroll hide"> |
||||||
|
<div class="scroll-nav-top"> |
||||||
|
<ul class="gnb-sns"> |
||||||
|
<li class="cusor-p gnb-sns-item insta"></li> |
||||||
|
<li class="cusor-p gnb-sns-item face"></li> |
||||||
|
<li class="cusor-p gnb-sns-item blog"></li> |
||||||
|
<li class="cusor-p gnb-sns-item youtube"></li> |
||||||
|
</ul> |
||||||
|
<div class="login-sec"> |
||||||
|
<ul class="login-menu"> |
||||||
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="scroll-nav-bottom"> |
||||||
|
<div class="logo-sec"> |
||||||
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지"> |
||||||
|
</div> |
||||||
|
<div class="gnb"> |
||||||
|
<ul class="main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">축제안내</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">게시판</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gnb-line"></div> |
||||||
|
<div class="toggle-btn cusor-p"> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
<!--모바일 네비--> |
||||||
|
<div class="m-menu-box hide"> |
||||||
|
<div class="m-menu"> |
||||||
|
<div class="m-login-sec"> |
||||||
|
<ul class="m-login-menu"> |
||||||
|
<li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="m-login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="m-gnb"> |
||||||
|
<ul class="m-main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">축제안내</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">커뮤니티</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--메인--> |
||||||
|
<main id="main"> |
||||||
|
<!--메인 슬라이드--> |
||||||
|
<section class="slider-sec"> |
||||||
|
<div class="slider-outer"> |
||||||
|
<div class="swiper mySwiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="swiper-pagination"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 공지--> |
||||||
|
<section class="notice-sec"> |
||||||
|
<div class="notice notice-fade-out "> |
||||||
|
<h4>공지사항</h4> |
||||||
|
<div class="notice-roll-box"> |
||||||
|
<ul class="notice-roll"> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
||||||
|
</li> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a> |
||||||
|
</li> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button> |
||||||
|
</div> |
||||||
|
<div class="banner"> |
||||||
|
<a href="" class="notice-banner-animation0-off"> |
||||||
|
<img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터"> |
||||||
|
</a> |
||||||
|
<a href="" class="notice-banner-animation1-off"> |
||||||
|
<img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터"> |
||||||
|
</a> |
||||||
|
<a href="" class="notice-banner-animation2-off"> |
||||||
|
<img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 바텀 슬라이드--> |
||||||
|
<section class="bot-slider-sec bot-slider-fade-out"> |
||||||
|
<div class="bot-slider-box"> |
||||||
|
<div class="bot-slider-text-box"> |
||||||
|
<div class="text"> |
||||||
|
<span>음성명작페스티벌</span> |
||||||
|
<span><strong>둘러보기!</strong></span> |
||||||
|
<span>음성명작페스티벌</span> |
||||||
|
<span>백배 즐기기</span> |
||||||
|
</div> |
||||||
|
<div class="bot-slider-btn-box"> |
||||||
|
<button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev"> |
||||||
|
<img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전"> |
||||||
|
</button> |
||||||
|
<button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next"> |
||||||
|
<img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음"> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bot-slider-outer"> |
||||||
|
<div class="swiper bot-swiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기"> |
||||||
|
</a> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기"> |
||||||
|
</a> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 협업사--> |
||||||
|
<section class="alliance-sec"> |
||||||
|
<div class="alliance-bar"> |
||||||
|
<a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a> |
||||||
|
<a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a> |
||||||
|
<a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</main> |
||||||
|
<!--푸터--> |
||||||
|
<footer id="footer"> |
||||||
|
<div class="footer-box"> |
||||||
|
<div class="footer-logo"> |
||||||
|
<img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고"> |
||||||
|
</div> |
||||||
|
<ul class="footer-sns"> |
||||||
|
<li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
</ul> |
||||||
|
<div class="footer-text"> |
||||||
|
<span><strong>음성명작페스티벌 사업단</strong></span> |
||||||
|
<span>충청북도 음성군 음성읍 반기문로 27 2층</span> |
||||||
|
<span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span> |
||||||
|
<span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span> |
||||||
|
</div> |
||||||
|
<div class="call-num"> |
||||||
|
<h1>대표전화</h1> |
||||||
|
<p><strong>043-873-8940</strong></p> |
||||||
|
<p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> |
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
||||||
|
<script> |
||||||
|
var swiper = new Swiper(".mySwiper", { |
||||||
|
direction: 'horizontal', |
||||||
|
loop: true, |
||||||
|
speed: 1000, |
||||||
|
autoplay: { |
||||||
|
delay: 2000, |
||||||
|
}, |
||||||
|
setWrapperSize: true, |
||||||
|
autoHeight: true, |
||||||
|
pagination: { |
||||||
|
el: ".swiper-pagination", |
||||||
|
clickable: true, |
||||||
|
type: "bullets" |
||||||
|
}, |
||||||
|
breakpoints: { //반응형 조건 속성 |
||||||
|
320: { //640 이상일 경우 |
||||||
|
slidesPerView: 1, //레이아웃 2열 |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
var swiper = new Swiper(".bot-swiper", { |
||||||
|
direction: 'horizontal', |
||||||
|
pagination: false, |
||||||
|
loop: true, |
||||||
|
speed: 1000, |
||||||
|
autoplay: { |
||||||
|
delay: 2000, |
||||||
|
}, |
||||||
|
navigation: { |
||||||
|
nextEl: '.bot-swiper-button-next', |
||||||
|
prevEl: '.bot-swiper-button-prev', |
||||||
|
}, |
||||||
|
breakpoints: { //반응형 조건 속성 |
||||||
|
426: { //640 이상일 경우 |
||||||
|
slidesPerView: 2.2, //레이아웃 2열 |
||||||
|
}, |
||||||
|
320: { //640 이상일 경우 |
||||||
|
slidesPerView: 1, //레이아웃 2열 |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<script> |
||||||
|
$(document).ready(function () { |
||||||
|
$(".notice-text").each(() => { |
||||||
|
var length = 16; |
||||||
|
$(this).each(() => { |
||||||
|
if ($(this).text().length >= length) { |
||||||
|
$(this).text($(this).text().substr(0, length) + '...'); |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
$(".toggle-btn").click(() => { |
||||||
|
$(".m-menu-box").toggleClass("hide") |
||||||
|
}) |
||||||
|
$(".notice").removeClass("notice-fade-out") |
||||||
|
$(".notice").addClass("notice-fade-in") |
||||||
|
|
||||||
|
const bannerFn = function () { |
||||||
|
$(".banner a").each((index, item) => { |
||||||
|
$(item).removeClass(`notice-banner-animation${index}-off`) |
||||||
|
$(item).addClass(`notice-banner-animation${index}-on`) |
||||||
|
}) |
||||||
|
} |
||||||
|
setTimeout(bannerFn, 500) |
||||||
|
}) |
||||||
|
$(window).resize(function() { |
||||||
|
if ($(this).width() >= 426) { |
||||||
|
$(".m-menu-box").addClass("hide") |
||||||
|
}else if($(this).width() < 426) { |
||||||
|
console.log("작음"); |
||||||
|
$(".m-menu-box").addClass("hide") |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<script> |
||||||
|
const navScroll = document.querySelector("#scroll-nav"); |
||||||
|
const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item") |
||||||
|
const arryNavSns = Array.from(navSns) |
||||||
|
const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item") |
||||||
|
const arryScrollNavSns = Array.from(scrollNavSns) |
||||||
|
const snsKind = ['insta', 'face', 'blog', 'youtube'] |
||||||
|
const ON = "on" |
||||||
|
const OFF = "off" |
||||||
|
// SNS 호버 이벤트 |
||||||
|
const snsBg = (listArray)=>{ |
||||||
|
if(listArray) { |
||||||
|
listArray.forEach((element, index, array)=>{ |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
const mouseEnter = (listArray)=>{ |
||||||
|
listArray.forEach((element, index, array)=>{ |
||||||
|
element.addEventListener('mouseenter', ()=>{ |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
const mouseLeave = (listArray)=>{ |
||||||
|
listArray.forEach((element, index, array)=>{ |
||||||
|
element.addEventListener('mouseleave', ()=>{ |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
snsBg(arryNavSns) |
||||||
|
mouseEnter(arryNavSns) |
||||||
|
mouseLeave(arryNavSns) |
||||||
|
snsBg(arryScrollNavSns) |
||||||
|
mouseEnter(arryScrollNavSns) |
||||||
|
mouseLeave(arryScrollNavSns) |
||||||
|
|
||||||
|
const scrollNavFn = () => { |
||||||
|
let Y = document.documentElement.scrollTop |
||||||
|
if (Y >= 300) { |
||||||
|
navScroll.classList.add("fixed") |
||||||
|
navScroll.classList.remove("hide") |
||||||
|
} else { |
||||||
|
navScroll.classList.remove("fixed") |
||||||
|
navScroll.classList.add("hide") |
||||||
|
} |
||||||
|
} |
||||||
|
const scrollBotSliderFn = () => { |
||||||
|
let Y = document.documentElement.scrollTop |
||||||
|
const botSliderSec = document.querySelector(".bot-slider-sec") |
||||||
|
const allianceSec = document.querySelector(".alliance-sec") |
||||||
|
const botSliderSecH = document.querySelector(".bot-slider-sec").scrollHeight |
||||||
|
if (Y >= botSliderSecH) { |
||||||
|
botSliderSec.classList.remove("bot-slider-fade-out") |
||||||
|
botSliderSec.classList.add("bot-slider-fade-in") |
||||||
|
allianceSec.classList.remove("bot-slider-fade-out") |
||||||
|
allianceSec.classList.add("bot-slider-fade-in") |
||||||
|
} else { |
||||||
|
botSliderSec.classList.remove("bot-slider-fade-in") |
||||||
|
botSliderSec.classList.add("bot-slider-fade-out") |
||||||
|
allianceSec.classList.remove("bot-slider-fade-in") |
||||||
|
allianceSec.classList.add("bot-slider-fade-out") |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const scrollFn = () => { |
||||||
|
scrollNavFn() |
||||||
|
scrollBotSliderFn() |
||||||
|
} |
||||||
|
|
||||||
|
document.addEventListener("scroll", scrollFn) |
||||||
|
|
||||||
|
</script> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
// SNS리스트 호버 이벤트(백그라운드 이미지)
|
||||||
|
const snsKind = ['insta', 'face', 'blog', 'youtube'] |
||||||
|
const ON = "on" |
||||||
|
const OFF = "off" |
||||||
|
|
||||||
|
// listArray = 리스트 DOM이 담긴 배열
|
||||||
|
const snsBg = (listArray) => { |
||||||
|
if (listArray) {
|
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
const mouseEnter = (listArray) => { |
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.addEventListener('mouseenter', () => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
const mouseLeave = (listArray) => { |
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.addEventListener('mouseleave', () => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,378 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="ko"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>음성명작페스티벌</title> |
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> |
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
||||||
|
<link rel="stylesheet" href="./main.css"> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<!--네비--> |
||||||
|
<nav id="nav" class="nav"> |
||||||
|
<div class="login-sec"> |
||||||
|
<ul class="login-menu"> |
||||||
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="logo-sec"> |
||||||
|
<img class="nav-logo" src="./main/logo/logo_big.png" alt="음성명작 페스티벌"> |
||||||
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 모바일 홈페이지"> |
||||||
|
</div> |
||||||
|
<div class="gnb"> |
||||||
|
<ul class="main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">주요 콘텐츠</li> |
||||||
|
<li class="cusor-p ">이벤트</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">커뮤니티</li> |
||||||
|
</ul> |
||||||
|
<ul class="gnb-sns"> |
||||||
|
<li class="cusor-p gnb-sns-item insta"></li> |
||||||
|
<li class="cusor-p gnb-sns-item blog"></li> |
||||||
|
<li class="cusor-p gnb-sns-item youtube"></li> |
||||||
|
<li class="cusor-p gnb-sns-item face"></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="gnb-line"></div> |
||||||
|
<div class="toggle-btn cusor-p"> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
<!-- 스크롤 네비--> |
||||||
|
<nav id="scroll-nav" class="nav-scroll hide"> |
||||||
|
<div class="scroll-nav-top"> |
||||||
|
<ul class="gnb-sns"> |
||||||
|
<li class="cusor-p gnb-sns-item insta"></li> |
||||||
|
<li class="cusor-p gnb-sns-item face"></li> |
||||||
|
<li class="cusor-p gnb-sns-item blog"></li> |
||||||
|
<li class="cusor-p gnb-sns-item youtube"></li> |
||||||
|
</ul> |
||||||
|
<div class="login-sec"> |
||||||
|
<ul class="login-menu"> |
||||||
|
<li class="sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="scroll-nav-bottom"> |
||||||
|
<div class="logo-sec"> |
||||||
|
<img class="nav-logo-m" src="./main/logo/logo_small.png" alt="음성명작 페스티벌 홈페이지"> |
||||||
|
</div> |
||||||
|
<div class="gnb"> |
||||||
|
<ul class="main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">축제안내</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">게시판</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="gnb-line"></div> |
||||||
|
<div class="toggle-btn cusor-p"> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
<div class="toggle-bar"></div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
<!--모바일 네비--> |
||||||
|
<div class="m-menu-box hide"> |
||||||
|
<div class="m-menu"> |
||||||
|
<div class="m-login-sec"> |
||||||
|
<ul class="m-login-menu"> |
||||||
|
<li class="m-sign-up cusor-p "><a href=""> 회원가입</a></li> |
||||||
|
<li>|</li> |
||||||
|
<li class="m-login cusor-p ">로그인</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="m-gnb"> |
||||||
|
<ul class="m-main-menu"> |
||||||
|
<li class="cusor-p ">축제소개</li> |
||||||
|
<li class="cusor-p ">축제안내</li> |
||||||
|
<li class="cusor-p ">명작스토리</li> |
||||||
|
<li class="cusor-p ">커뮤니티</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--메인--> |
||||||
|
<main id="main"> |
||||||
|
<!--메인 슬라이드--> |
||||||
|
<section class="slider-sec"> |
||||||
|
<div class="slider-outer"> |
||||||
|
<div class="swiper mySwiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide1.png" alt="음성명작 페스티벌 배너 광고1"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide2.png" alt="음성명작 페스티벌 배너 광고2"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href=""> |
||||||
|
<img src="./main/main/img_slide3.png" alt="음성명작 페스티벌 배너 광고3"></a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="swiper-pagination"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 공지--> |
||||||
|
<section class="notice-sec"> |
||||||
|
<div class="notice aos-init aos-animate" data-aos="fade-up" data-aos-once="true"> |
||||||
|
<h4>공지사항</h4> |
||||||
|
<div class="notice-roll-box"> |
||||||
|
<ul class="notice-roll"> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
||||||
|
</li> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">2021 음성명작 페스티벌 사이트가 리뉴얼 되었습니다~</a> |
||||||
|
</li> |
||||||
|
<li class="cusor-p"> |
||||||
|
<a class="notice-text" href="">음성군 6월 대표과일!</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<button class="notice-btn cusor-p "><img src="./main/icon/more.png" alt="공지사항 더보기 버튼"></button> |
||||||
|
</div> |
||||||
|
<div class="banner"> |
||||||
|
<a href="" data-aos="fade-up" data-aos-delay="600" data-aos-once="true" data-aos-duration="1000"> |
||||||
|
<img src="./main/main/con1.png" alt="음성명작 페스티벌 잔치잔치 열렸네! - 포스터"> |
||||||
|
</a> |
||||||
|
<a href="" data-aos="fade-up" data-aos-delay="700" data-aos-once="true" data-aos-duration="1000"> |
||||||
|
<img src="./main/main/con2.png" alt="문예공모전 결과 발표 - 포스터"> |
||||||
|
</a> |
||||||
|
<a href="" data-aos="fade-up" data-aos-delay="800" data-aos-once="true" data-aos-duration="1000"> |
||||||
|
<img src="./main/main/con3.png" alt="명작 스토리 안심농가 방문 - 포스터"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 바텀 슬라이드--> |
||||||
|
<section class="bot-slider-sec" data-aos="fade-up" data-aos-offset="300"> |
||||||
|
<div class="bot-slider-box"> |
||||||
|
<div class="bot-slider-text-box"> |
||||||
|
<div class="text"> |
||||||
|
<span>음성명작페스티벌</span> |
||||||
|
<span><strong>둘러보기!</strong></span> |
||||||
|
<span>음성명작페스티벌</span> |
||||||
|
<span>백배 즐기기</span> |
||||||
|
</div> |
||||||
|
<div class="bot-slider-btn-box"> |
||||||
|
<button class="cusor-p bot-slider-btn bot-swiper-button-prev " id="prev"> |
||||||
|
<img src="./main/icon/card_left.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 이전"> |
||||||
|
</button> |
||||||
|
<button class="cusor-p bot-slider-btn bot-swiper-button-next" id="next"> |
||||||
|
<img src="./main/icon/card_right.png" alt="음성명작 페스티벌 둘러보기 이미지 넘기기 다음"> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bot-slider-outer"> |
||||||
|
<div class="swiper bot-swiper"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban1.png" alt="축제공간구성 위치확인하고 빠르게 찾아가자 바로가기"> |
||||||
|
</a> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban2.png" alt="축제프로그램 다양한 공연과 체험 프로그램 바로가기"> |
||||||
|
</a> |
||||||
|
<a href="" class="swiper-slide"> |
||||||
|
<img src="./main/main/ban3.png" alt="지난이야기 음성명작 페스티벌 발자취 바로가기"> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
<!--메인 협업사--> |
||||||
|
<section class="alliance-sec"> |
||||||
|
<div class="alliance-bar"> |
||||||
|
<a href=""><img src="./main/logo/btm_banner1.png" alt="음성군 홈페이지 바로가기"></a> |
||||||
|
<a href=""><img src="./main/logo/btm_banner2.png" alt="음성장터 바로가기"></a> |
||||||
|
<a href=""><img src="./main/logo/btm_banner3.png" alt="음성명작페스티벌 바로가기"></a> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</main> |
||||||
|
<!--푸터--> |
||||||
|
<footer id="footer"> |
||||||
|
<div class="footer-box"> |
||||||
|
<div class="footer-logo"> |
||||||
|
<img src="./main/logo/footer_logo.png" alt="음성명작 페스티벌 로고"> |
||||||
|
</div> |
||||||
|
<ul class="footer-sns"> |
||||||
|
<li><a><img src="./main/icon/sns_insta_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_face_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_blog_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
<li><a><img src="./main/icon/sns_youtube_on.png" alt="인스타그램 바로가기"></a></li> |
||||||
|
</ul> |
||||||
|
<div class="footer-text"> |
||||||
|
<span><strong>음성명작페스티벌 사업단</strong></span> |
||||||
|
<span>충청북도 음성군 음성읍 반기문로 27 2층</span> |
||||||
|
<span>사업자등록번호 : 308-82-73169 | 대표자 : 조용주</span> |
||||||
|
<span>Copyright ⓒ2020 EUMSEONG MYEONGJAK. ALL RIGHTS RESERVED.</span> |
||||||
|
</div> |
||||||
|
<div class="call-num"> |
||||||
|
<h1>대표전화</h1> |
||||||
|
<p><strong>043-873-8940</strong></p> |
||||||
|
<p>09:00 ~ 18:00 토·일요일·공휴일 휴무</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</footer> |
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> |
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
||||||
|
<script> |
||||||
|
var swiper = new Swiper(".mySwiper", { |
||||||
|
direction: 'horizontal', |
||||||
|
loop: true, |
||||||
|
speed: 1000, |
||||||
|
autoplay: { |
||||||
|
delay: 2000, |
||||||
|
}, |
||||||
|
setWrapperSize: true, |
||||||
|
autoHeight: true, |
||||||
|
pagination: { |
||||||
|
el: ".swiper-pagination", |
||||||
|
clickable: true, |
||||||
|
type: "bullets" |
||||||
|
}, |
||||||
|
breakpoints: { //반응형 조건 속성 |
||||||
|
320: { //320 이상일 경우 |
||||||
|
slidesPerView: 1, //레이아웃 2열 |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
var swiper = new Swiper(".bot-swiper", { |
||||||
|
direction: 'horizontal', |
||||||
|
pagination: false, |
||||||
|
loop: true, |
||||||
|
speed: 1000, |
||||||
|
autoplay: { |
||||||
|
delay: 2000, |
||||||
|
}, |
||||||
|
navigation: { |
||||||
|
nextEl: '.bot-swiper-button-next', |
||||||
|
prevEl: '.bot-swiper-button-prev', |
||||||
|
}, |
||||||
|
breakpoints: { //반응형 조건 속성 |
||||||
|
426: { //426 이상일 경우 |
||||||
|
slidesPerView: 2.2, //레이아웃 2열 |
||||||
|
}, |
||||||
|
320: { //320 이상일 경우 |
||||||
|
slidesPerView: 1, //레이아웃 2열 |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
<script> |
||||||
|
AOS.init({ |
||||||
|
easing: 'ease-out-back', |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<script> |
||||||
|
$(document).ready(function () { |
||||||
|
// 공지사항 롤링 👇 |
||||||
|
let height = $(".notice-roll-box").height() |
||||||
|
let leng = $(".notice-roll li").length |
||||||
|
let count = 0 |
||||||
|
function noticeRoll() { |
||||||
|
count++ |
||||||
|
$('.notice-roll').animate({"top":`-${height * count}px` }, 1000, |
||||||
|
()=>{ |
||||||
|
if (count >= (leng-1)) { |
||||||
|
count = 0 |
||||||
|
$('.notice-roll').css({top: "0"}) |
||||||
|
}} |
||||||
|
) |
||||||
|
} |
||||||
|
setInterval(noticeRoll, 2000) |
||||||
|
//모바일 메뉴 버튼 클릭 👇 |
||||||
|
$(".toggle-btn").click(() => { |
||||||
|
$(".m-menu-box").toggleClass("hide") |
||||||
|
}) |
||||||
|
}) |
||||||
|
//모바일 메뉴 리사이징시 숨김👇 |
||||||
|
$(window).resize(function () { |
||||||
|
if ($(this).width() >= 426) { |
||||||
|
$(".m-menu-box").addClass("hide") |
||||||
|
} else if ($(this).width() < 426) { |
||||||
|
$(".m-menu-box").addClass("hide") |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<script> |
||||||
|
const navScroll = document.querySelector("#scroll-nav"); |
||||||
|
const navSns = document.querySelectorAll("#nav .gnb-sns .gnb-sns-item") |
||||||
|
const arryNavSns = Array.from(navSns) |
||||||
|
const scrollNavSns = document.querySelectorAll("#scroll-nav .gnb-sns .gnb-sns-item") |
||||||
|
const arryScrollNavSns = Array.from(scrollNavSns) |
||||||
|
const snsKind = ['insta', 'face', 'blog', 'youtube'] |
||||||
|
const ON = "on" |
||||||
|
const OFF = "off" |
||||||
|
// SNS 리스트 백그라운드 깔기 👇 |
||||||
|
const snsBg = (listArray) => { |
||||||
|
if (listArray) { |
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
// SNS 리스트 마우스 enter, leave 효과 👇 |
||||||
|
const mouseEnter = (listArray) => { |
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.addEventListener('mouseenter', () => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${ON}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
const mouseLeave = (listArray) => { |
||||||
|
listArray.forEach((element, index, array) => { |
||||||
|
element.addEventListener('mouseleave', () => { |
||||||
|
element.style.background = `url('./main/icon/sns_${snsKind[index]}_${OFF}.png') no-repeat` |
||||||
|
}) |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
snsBg(arryNavSns) |
||||||
|
mouseEnter(arryNavSns) |
||||||
|
mouseLeave(arryNavSns) |
||||||
|
snsBg(arryScrollNavSns) |
||||||
|
mouseEnter(arryScrollNavSns) |
||||||
|
mouseLeave(arryScrollNavSns) |
||||||
|
// 스크롤에 따른 NAV 변경 👇 |
||||||
|
const scrollNavFn = () => { |
||||||
|
let Y = document.documentElement.scrollTop |
||||||
|
if (Y >= 300) { |
||||||
|
navScroll.classList.add("fixed") |
||||||
|
navScroll.classList.remove("hide") |
||||||
|
} else { |
||||||
|
navScroll.classList.remove("fixed") |
||||||
|
navScroll.classList.add("hide") |
||||||
|
} |
||||||
|
} |
||||||
|
const scrollFn = () => { |
||||||
|
scrollNavFn() |
||||||
|
} |
||||||
|
|
||||||
|
document.addEventListener("scroll", scrollFn) |
||||||
|
|
||||||
|
</script> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,870 @@ |
|||||||
|
* { |
||||||
|
font-family: 'Noto Sans KR', 'sans-serif'; |
||||||
|
} |
||||||
|
body { |
||||||
|
margin: 0 auto; |
||||||
|
overflow-x: hidden; |
||||||
|
} |
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
a:visited, a:link { |
||||||
|
text-decoration: none; |
||||||
|
color: black; |
||||||
|
} |
||||||
|
h1, h2, h3, h4, h5, p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
div, section, nav, main, footer, span { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.hide { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
.fixed{ |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.dot-color { |
||||||
|
background-color: #7CE063 !important; |
||||||
|
} |
||||||
|
.cusor-p { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.nav { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-start; |
||||||
|
text-align: center; |
||||||
|
padding-top: 15px; |
||||||
|
overflow: hidden; |
||||||
|
background-color: #fff; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
.nav .login-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding-bottom: 10px; |
||||||
|
} |
||||||
|
.nav .login-sec .login-menu { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.nav .login-sec .login-menu li:nth-child(2) { |
||||||
|
margin-left: 8px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.nav .logo-sec { |
||||||
|
width: auto; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo{ |
||||||
|
width: 355px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo-m { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .gnb { |
||||||
|
width: 100%; |
||||||
|
max-width: 1150px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
} |
||||||
|
.nav .gnb .main-menu { |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 600; |
||||||
|
margin-bottom: 20px; |
||||||
|
flex: 5; |
||||||
|
} |
||||||
|
.nav .gnb .gnb-sns { |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
.nav .gnb .gnb-sns li { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
transition: all 0.2s; |
||||||
|
} |
||||||
|
.nav .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url("./main/main/line.png") no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.nav .toggle-btn { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.m-menu-box { |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
/*********************************************************************/ |
||||||
|
#main { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
#main .slider-sec{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
min-height: 240px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
margin-top: 50px; |
||||||
|
|
||||||
|
} |
||||||
|
#main .notice-sec .notice { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .notice-sec .notice h4 { |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 800; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box{ |
||||||
|
width: 900px; |
||||||
|
height: 24px; |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 700; |
||||||
|
margin-left: 25px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box .notice-roll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll li{ |
||||||
|
width: 100%; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn { |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
#main .notice-sec .banner { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding-bottom: 80px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec { |
||||||
|
width: 100%; |
||||||
|
background-color: #B4A0FF; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 50px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box { |
||||||
|
width: 300px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
align-items: flex-start; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ |
||||||
|
font-size: 2em; |
||||||
|
display: block; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ |
||||||
|
font-size: 2.4em; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ |
||||||
|
font-size: 1.5em; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ |
||||||
|
font-size: 1.3em; |
||||||
|
padding-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { |
||||||
|
width: 150px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
filter: contrast(170%); |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer { |
||||||
|
width: 780px; |
||||||
|
height: auto; |
||||||
|
padding: 0px 15px 0px 15px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{ |
||||||
|
padding: 0px 10px 0px 10px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
#main .alliance-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a { |
||||||
|
margin-right: 70px; |
||||||
|
} |
||||||
|
#footer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 30px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#footer .footer-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo img { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
flex: 2; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num h1{ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500 |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p > strong{ |
||||||
|
font-size: 35px; |
||||||
|
font-weight: 600 |
||||||
|
} |
||||||
|
.nav-scroll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
z-index: 9999; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .gnb-sns { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .gnb-sns li { |
||||||
|
width: 28px; |
||||||
|
height: 28px; |
||||||
|
margin-right: 25px; |
||||||
|
transition: all 0.2s; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec .login-menu{ |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) { |
||||||
|
margin-left: 8px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .logo-sec{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .logo-sec img{ |
||||||
|
width: 60%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
flex: 2; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb .main-menu{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.nav-scroll .scroll-nav-bottom .gnb .main-menu li{ |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
.nav-scroll .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url(./main/main/line.png) no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
} |
||||||
|
.swiper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.swiper-wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
min-height: 240px ; |
||||||
|
} |
||||||
|
.swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.swiper-slide img { |
||||||
|
display: block ; |
||||||
|
width: 100% ; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.swiper .swiper-pagination-bullet { |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
background-color: #7CE063; |
||||||
|
margin: 0 15px !important; |
||||||
|
} |
||||||
|
@media (max-width: 425px) { |
||||||
|
#scroll-nav { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
.m-menu-box { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||||
|
z-index: 9999; |
||||||
|
position: absolute; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu { |
||||||
|
width: 85%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding: 25px 0px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec .m-login-menu { |
||||||
|
margin: 0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row-reverse nowrap; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){ |
||||||
|
margin-left: 30px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb .m-main-menu { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
.m-menu-box .m-menu .m-gnb .m-main-menu > li { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 800; |
||||||
|
padding: 15px 30px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.nav .login-sec { |
||||||
|
width: 100%; |
||||||
|
height: 70px; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .logo-sec { |
||||||
|
width: 50%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .logo-sec .nav-logo-m { |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.nav .gnb { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.nav .gnb-line{ |
||||||
|
width: 100%; |
||||||
|
height: 5px; |
||||||
|
background: url("./main/main/line.png") no-repeat center; |
||||||
|
background-size: cover; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.nav .toggle-btn{ |
||||||
|
width: 50px; |
||||||
|
height: 29px; |
||||||
|
position: absolute; |
||||||
|
top: calc((80px - 29px) / 2); |
||||||
|
left: calc((100% - 60px )); |
||||||
|
padding: 0px ; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
justify-content: space-around; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.nav .toggle-btn > div { |
||||||
|
width: 30px; |
||||||
|
height: 4px; |
||||||
|
background-color: #B4A0FF; |
||||||
|
display: block; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
/* nav m-menu */ |
||||||
|
|
||||||
|
/*silder-sec*/ |
||||||
|
#main .slider-sec .slider-outer .slider-btn { |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer .slider-btn .slider-bullet { |
||||||
|
content: ""; |
||||||
|
display: inline-block; |
||||||
|
vertical-align: middle; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
background-color: rgba(0, 0, 0, 0.4); |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
#main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) { |
||||||
|
margin-left: 25px; |
||||||
|
margin-right: 25px; |
||||||
|
} |
||||||
|
#main .notice-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
margin-top: 0px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
align-items: center; |
||||||
|
padding: 10px 10px; |
||||||
|
margin-bottom: 0px; |
||||||
|
} |
||||||
|
#main .notice-sec .notice h4 { |
||||||
|
width: 25%; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box{ |
||||||
|
width: 70%; |
||||||
|
height: 24px; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
margin-left: 0px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll-box .notice-roll{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
margin: 0; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-roll li{ |
||||||
|
width: 100%; |
||||||
|
height: 24px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 400; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn { |
||||||
|
width: auto; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
#main .notice-sec .notice .notice-btn img{ |
||||||
|
width: 15px; |
||||||
|
height: 15px; |
||||||
|
} |
||||||
|
#main .notice-sec .banner { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 0px 20px 20px 20px; |
||||||
|
} |
||||||
|
#main .notice-sec .banner a{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .notice-sec .banner a img{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
/*notice*/ |
||||||
|
#main .bot-slider-sec { |
||||||
|
width: 100%; |
||||||
|
background-color: #B4A0FF; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
margin: 0 auto; |
||||||
|
padding-top: 50px; |
||||||
|
padding-bottom: 50px; |
||||||
|
display: flex; |
||||||
|
flex-flow: column nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { |
||||||
|
display: block; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ |
||||||
|
font-size: 1.75rem;; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ |
||||||
|
font-size: 1.6em; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ |
||||||
|
font-size: 18px; |
||||||
|
display: inline-block; |
||||||
|
font-weight: normal; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ |
||||||
|
font-size: 18px; |
||||||
|
padding-bottom: 0px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
padding-top: 20px; |
||||||
|
padding-bottom: 25px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
filter: contrast(170%); |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
padding: 0px 0px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
padding: 0px; |
||||||
|
transition: all 1s; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
padding: 0px 30px; |
||||||
|
} |
||||||
|
#main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) { |
||||||
|
margin-left: 0px; |
||||||
|
margin-right: 0px; |
||||||
|
} |
||||||
|
/*bot-slider-sec*/ |
||||||
|
#main .alliance-sec { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-top: 15px; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a { |
||||||
|
margin-right: 0px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#main .alliance-sec .alliance-bar a img{ |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
/*.alliance-sec*/ |
||||||
|
#footer { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
border-top: 1px solid #e0e0e0; |
||||||
|
padding-top: 0px; |
||||||
|
padding-bottom: 30px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
#footer .footer-box { |
||||||
|
width: 100%; |
||||||
|
max-width: 1080px; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo { |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
flex: 1; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-logo img { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:first-child{ |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:nth-child(2){ |
||||||
|
margin: 0px 5px 0px 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:nth-child(3){ |
||||||
|
margin: 0px 5px 0px 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-sns li:last-child{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
align-items: center; |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
flex: 2; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
#footer .footer-box .footer-text span:last-child { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num { |
||||||
|
flex: 1; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num h1{ |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500 |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p { |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
#footer .footer-box .call-num p > strong{ |
||||||
|
font-size: 35px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.mySwiper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper .swiper-slide{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-height: 240px; |
||||||
|
} |
||||||
|
.mySwiper .swiper-wrapper .swiper-slide img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
max-height: 240px !important; |
||||||
|
object-fit: fill; |
||||||
|
} |
||||||
|
.mySwiper .swiper-pagination-bullet { |
||||||
|
width: 9px; |
||||||
|
height: 9px; |
||||||
|
background-color: #7CE063; |
||||||
|
margin: 0 5px !important; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
After Width: | Height: | Size: 916 B |
|
After Width: | Height: | Size: 922 B |
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 251 B |
|
After Width: | Height: | Size: 581 B |
|
After Width: | Height: | Size: 580 B |
|
After Width: | Height: | Size: 401 B |
|
After Width: | Height: | Size: 401 B |
|
After Width: | Height: | Size: 663 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 461 B |
|
After Width: | Height: | Size: 463 B |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 255 KiB |
|
After Width: | Height: | Size: 162 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 848 KiB |
|
After Width: | Height: | Size: 226 B |
@ -0,0 +1,28 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>Document</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<section id="fade"> |
||||||
|
<div class="swiper-container swiper-container-h"> |
||||||
|
<div class="swiper-wapper"> |
||||||
|
<?php foreach ($mainbanner as $o): ?> |
||||||
|
<!--$mainbanner라는 배열을 foreach함수를 사용하여 swiper-slide를 생성--> |
||||||
|
<div class="swiper-slide"> |
||||||
|
<a href="<?=$o->href?>"> |
||||||
|
<!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 href인 갑을 추출 한다--> |
||||||
|
<img src="/data/banner/<?=$o->bf_file?>" alt="음성명작페스티벌" width="100%"> |
||||||
|
<!--$mainbanner 라는 변수(배열)에 오브젝트속 키워드가 "bf_file" 갑을 추출 한다--> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<?php endforeach; ?> |
||||||
|
</div> |
||||||
|
<div class="swiper-pagination swiper-pagination-h"></div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue