/home/mjc1/public_html/html/millennium/n_slide_main_250108.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<?php include_once("./_common2.php"); ?>
<!-- slick ºÒ·¯¿À±â -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">



<style>
body * {font-family: 'Pretendard', sans-serif;}
 /* ¸ÞÀΠ½½¶óÀÌ´õ */
.main-visual {position:relative;width:100%; height:570px;}
.main-visual .main-slider {font-size:0; position:relative; width:100%; height:100%; overflow:hidden}
.main-visual > .main-slider .slick-list,
.main-visual > .main-slider .slick-track,
.main-visual > .main-slider .slick-slide,
.main-visual > .main-slider .slider-visual {height:100%; background-color:#000}


/* ¸ÞÀΠ½½¶óÀÌ´õ ¹è³Ê ¾Ö´Ï¸ÞÀ̼Ǡ*/
.main-visual .main-slider .slider-visual > .img-box > .img {background-repeat:no-repeat; background-position:center top; background-size:cover; filter: blur(5px); position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.52}
  

/* ½½¶óÀÌ´õ À̵¿ ¹öÆ° */
.main-visual > .arrow-con {display:none; position:absolute; bottom:67px; width:100%;}
.main-visual > .arrow-con > .arrows {max-width:1645px; margin:0 auto;}
.main-visual > .arrow-con > .arrows::after {content:""; display:block; clear:both;} 
.main-visual > .arrow-con > .arrows > .slick-arrow {position:static; font-size:15px; color:#fff; width:auto; height:auto; line-height:normal;}
.main-visual > .arrow-con > .arrows > .slick-arrow::before {display:none;}
.main-visual > .arrow-con > .arrows > .slick-prev {display:none; float:left; left: 0 !important}
.main-visual > .arrow-con > .arrows > .slick-next {display:none; float:right; right: 0 !important}
.main-visual > .arrow-con > .arrows > .slick-arrow > i {font-size:24px;}
.main-visual > .arrow-con > .arrows > .slick-arrow > i,
.main-visual > .arrow-con > .arrows > .slick-arrow > span {display:inline-block; vertical-align:middle;}

/* ½½¶óÀÌ´õ ³»ºÎ ÅؽºÆ® */
.main-visual .main-slider .slider-visual > .visual-txt {position:absolute; left:60%; transform:translateX(-50%);text-align:center; bottom:43%;  }
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con {max-width:1645px; margin:0 auto;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-1 {display:inline-block; display:none; font-size:14px; color:#fff;
padding:10px; margin-bottom:15px; border-radius:5px; background-color:#3a75bf; letter-spacing:1px; line-height:1;}

.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-2 {font-size:72px; font-weight:800; color:#fff; letter-spacing:-2px; line-height:1.5; margin-bottom:15px;    white-space: nowrap;}
.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt-3 {font-size:38px; color:#fff; opacity:.9; line-height:1.5;}


.main-visual .main-slider .slider-visual > .visual-txt > .inner-txt-con > .inner-txt { transform:translateY(-50px); opacity:0;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt {animation-name:fadeInTop; animation-duration:2s; animation-fill-mode: forwards;}

@keyframes fadeInTop {
    0% {
        transform:translateY(-50px);
        opacity:0;
    }
    100% {
        transform:translateY(0);
        opacity:1;
    }
}

/* .main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-1 {
    animation-delay:2s;
} */

.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-2 {animation-delay:0.5s;}
.main-visual .main-slider .slick-active .visual-txt > .inner-txt-con > .inner-txt-3 {animation-delay:2.5s;}

.main-visual .main-slider .slick-dots {bottom:45px !important; width:auto; left:57.5%}
.main-visual .main-slider .slick-dots li {background-color:rgba(255,255,255,0.5); width:40px; height:15px; border-radius:50px; transition:0.5s}
.main-visual .main-slider .slick-dots li.slick-active {background-color:rgba(255,255,255,1);}
    
</style>    
        

<!-- ¸ÞÀΠ½½¶óÀÌ´õ -->
<div class="main-visual">
    <?php include ("./n_slide_menu.php"); ?>
    <div class="main-slider">
        <div class="slider-visual slider-visual-1">
            <div class="visual-pc img-box only-pc">
                <div class="img" style="background-image:url('./images/n_intro/250109/slider_bg_01.jpg');"></div>
            </div>
 
            <div class="visual-txt">
                <div class="inner-txt-con">
                    <strong class="inner-txt inner-txt-1"></strong>
                    <p class="inner-txt inner-txt-2">
                        ½Å±Ôȸ¿ø, 1°³¿ù ¹«·á»ç¿ë Áö¿ø                        
                    </p>
                    <p class="inner-txt inner-txt-3">
                       À¯Åë &middot; ¿µ¾÷ &middot; Àç°í &middot; µµ¸Å &middot; ¼ö¹ßÁÖ &middot; ½º¸¶Æ®Æù °ü¸®
                    </p>
                </div>
            </div>
        </div>
        <div class="slider-visual slider-visual-2">
            <div class="visual-pc img-box only-pc">
                <div class="img" style="background-image:url('./images/n_intro/250109/slider_bg_02.jpg');"></div>
            </div>
 
            <div class="visual-txt">
                <div class="inner-txt-con">
                    <strong class="inner-txt inner-txt-1"></strong>
                    <p class="inner-txt inner-txt-2">
                        ½º¸¶Æ®Æù, ¸ðµç ¾÷¹« ÇØ°á
                    </p>
                    <p class="inner-txt inner-txt-3">
                        ÇöÀ念¾÷ &middot; ¼ö¹ßÁÖ &middot; Àç°í &middot; ÀÔÃâ°í &middot; °è»ê¼­
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="arrow-con">
        <div class="arrows"></div>
    </div> 
</div>

<script>
    console.clear();

    // ¸ÞÀΠºñÁÖ¾ó ½½¶óÀÌ´õ slick Àû¿ë
    $('.main-slider').slick({
        fade:true,
        dots: true,
        draggable:false,
        speed:3000,
        lazyLoad: 'progressive',
        autoplay:true,
        autoplaySpeed:4500,
        pauseOnFocus:false,
        pauseOnHover:false,
             customPaging : function(slider, index) { 
    var num = index + 1;
    var tit = ['ŸÀÌƲ1','ŸÀÌƲ2','ŸÀÌƲ3','ŸÀÌƲ4','ŸÀÌƲ5','ŸÀÌƲ6','ŸÀÌƲ7'];
    return '<span class="dot">'+ tit[index] +'</span>';
            }
/*         appendArrows:$('.arrow-con > .arrows'),
        prevArrow:'<button type="button" class="slick-prev"><i class="xi-angle-left-min"></i><span class="font-poppins">PREV</span></button>',
        nextArrow:'<button type="button" class="slick-next"><span class="font-poppins">NEXT</span><i class="xi-angle-right-min"></i></button>', */
    });
</script>


<? include("./demo_popup_total.inc.php"); ?>
<!--üÇèÆǼ³Ä¡ Æ˾÷â °ü·Ã ³¡-->