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

<style>
    #main_banner { ; }
    #spos_main {position:relative; display:block;  width:100%; height:100%;  background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) ), url("./images/smart/smart_main_bg.jpg") ; background-attachment: fixed; background-attachment: fixed;  background-repeat: no-repeat; background-size: auto; background-position-x: center; }

    .n_wrap2 { padding:70px 0;}
    .smart_wrap {position:relative; display:flex; justify-content: center; align-items: flex-end; width: 100%; }
    .middle_wrap {position:relative;}

    /*app_wrap*/
    
    .app_wrap {position:relative; width:850px; top:0; left: 50%; transform: translateX(-50%);}
    .app_wrap .top {position:relative; top:-30px; display: flex; justify-content: center; z-index: 9;} 
    .app_wrap .mid_1,
    .app_wrap .mid_2,
    .app_wrap .bot {position:relative; display:flex; justify-content: space-between;}

    .app_wrap .mid_1 {top:-100px; max-width: 650px; left: 50%; transform: translateX(-50%);}
    .app_wrap .mid_2 {top:-50px;}
    .app_wrap .bot {max-width: 650px; left: 50%; transform: translateX(-50%);}

    .white_point2 {position:relative;align-content: space-evenly; width: 160px; height:160px; border-radius:40px;}
    .white_point2 img {display:block; max-width: 45px; margin: 0 auto;}
    .white_point2 p {font-size:20px; font-family: 'GmarketSansMedium', sans-serif; margin-top:10px; line-height: 1.5; font-weight:600; display:inline-block;}
    .white_point2 span {display:block; font-weight:200; line-height: 1.5; font-size:16px; margin-top:5px}
 
    /*ÀϹݽºÅ²*/
    .white_point2 {background:rgba(255,255,255,1); border:1px solid rgba(255,255,255,1); backgdrop-filter: blur(0); }
    .white_point2 p { color:#2a416d; border-bottom:2px solid #2a416d; transition:0.5s}
    .white_point2 span {color:#333; font-weight:400; transition:0.5s}
    .white_point2 img {filter:invert(21%) sepia(75%) saturate(494%) hue-rotate(182deg) brightness(93%) contrast(91%); transition:0.5s}
    .white_point2:hover {background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255, 0.3); }
    .white_point2:hover img {filter:invert(100%); transform:scale(1.15)}
    .white_point2:hover p {color:#fff; border-bottom:2px solid #fff; transform:scale(1.15)}
    .white_point2:hover span { color:#fff; transform:scale(1.15)}
    
    .app_wrap .top .white_point2::after {content:''; position:absolute; display:block; left:50%; transform: translateX(-50%); bottom:-82px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:75px;} 
    .app_wrap .mid_1 .white_point2:first-child::after {content:''; position:absolute; display:block; right:-32px; transform: rotate(-52deg); bottom:-50px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:75px;}
    .app_wrap .mid_1 .white_point2:last-child::after {content:''; position:absolute; display:block; left:-32px; transform: rotate(52deg); bottom:-50px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:75px;}
    .app_wrap .mid_2 .white_point2:first-child::after {content:''; position:absolute; display:block; right:-68px; transform: rotate(90deg); bottom:16px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:119px;} 
    .app_wrap .mid_2 .white_point2:last-child::after {content:''; position:absolute; display:block; left:-68px; transform: rotate(-90deg); bottom:16px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:119px;} 
    .app_wrap .bot .white_point2:first-child::after {content:''; position:absolute; display:block; right:-28px; transform: rotate(52deg); top:-54px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:75px;}
    .app_wrap .bot .white_point2:last-child::after {content:''; position:absolute; display:block; left:-28px; transform: rotate(-52deg); top:-54px; border-left:4px dotted rgba(255,255,255,0.8); width:3px; height:75px;}
    


 



    /*¹öÆ°¸®½ºÆ®*/
    
    .white_point_gr {position:absolute; top:217px; left:50%; left:50%; transform:translate(-50%, 0);}
    .white_point {width: 270px; height:270px; border-radius:50%; background: rgba(255, 255, 255, .0); backdrop-filter: blur(6px); overflow:hidden; border:10px solid rgba(255, 255, 255, 0.5); box-sizing:border-box;}
    .white_point img { max-width:150px;}
    
    .btn_list {position:relative; top:27px; width:215px; margin:0 auto;}
     .btnst1 {display:block; padding:7px 0 !important;  font-size:26px; font-weight:600; border-radius:5px; line-height:1.5;box-sizing:border-box; background-color: #ffbc2e; color:#000 !important; transition:0.4s; cursor:pointer;}
    
    .btnst1 img, 
    .btnst2 img { margin-right: 5px; max-width: 27px; margin-top: -4px; transition: 1.2s; filter:invert(100%) }

    .btnst2 {display:block; padding:7px 0 !important; margin-top:10px !important; font-size:21px; font-weight:600; border-radius:5px; line-height:1.5;box-sizing:border-box; background-color: #fff; color:#000 !important; transition:0.4s; cursor:pointer;}
    
    .btnst1:hover,
    .btnst2:hover {background-color:#2a416d; color:#fff !important;; border-radius:50px;}
    .btnst1:hover img, 
    .btnst2:hover img {filter:invert(0)}
    
</style>

<div id="spos_main">
    <div class="n_wrap2">
        <div class="smart_wrap">            
            <div class="middle_wrap">
                <div class="app_wrap">
                    <div class="top">
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_1.png" alt=""><p>ÀÔÃâ°í°ü¸®</p><span>µî·Ï/Á¶È¸</span></div>
                    </div>
                    <div class="mid_1">
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_2.png" alt=""><p>Àç°í°ü¸®</p><span>À̵¿/Á¶È¸/½Ç»ç</span></div>
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_3.png" alt=""><p>¼ö¹ßÁÖ°ü¸®</p><span>µî·Ï/Á¶È¸</span></div>
                    </div>
                    <div class="mid_2">
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_4.png" alt=""><p>°Å·¡Ã³°ü¸®</p><span>¸ÅÃâ/¹Ì¼ö Á¶È¸</span></div>
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_5.png" alt=""><p>ÀüÀÚ¼¼±Ý°è»ê¼­</p><span>¹ßÇà/Á¶È¸/À̸ÞÀÏ</span></div>
                    </div>
                    <div class="bot">
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_6.png" alt=""><p>Àåºñ¿¬µ¿</p><span>½ºÄ³³Ê/¿µ¼öÁõ/Ä«µå</span></div>
                        <div class="white_point2"><img src="./images/smart/ico/smart_ico_7.png" alt=""><p>À̸ÞÀÏ ¹ßÇà</p><span>¸í¼¼Ç¥/°ßÀû¼­/¼öÁÖ¼­</span></div>
                    </div>
                </div>
                <div class="white_point_gr">
                    <div class="white_point"><img src="./images/smart/smart_illu_2.png" alt="¼ÕÀÏ·¯½ºÆ®"></div>
                </div>
            </div>
        </div>
        <div style="position:relative; width:350px; margin:30px auto 0;text-align: left;">
            <span style="font-size:32px; color:#f8de16; font-weight:600; line-height:1.5">°¶·°½Ã, ¾ÆÀÌÆù  Áö¿ø </span>
            <a style="position:absolute; top:8px; right:0;font-size:16px; color:#fff; border-bottom: 2px solid #fff; display:inline-block; font-weight:600; line-height:1.5; padding-bottom:2px;" href="./web_manual/ns_manual.pdf">¾ÆÀÌÆù ¸Þ´º¾ó</a>
        </div>
    </div>
</div>