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

<style>
.n_fix_menu{position: fixed;left: 0px;right: 0px;bottom: 0px;width: 100%;/* background: #c53836; background: #e98046;*/ background:#a32b2a; z-index: 9999;}
.n_fix_menu *{font-family: 'GmarketSansTTF', san-serif !important;}
.n_fix_box{width: 1400px;margin: 0 auto;display: flex; flex-wrap:nowrap; justify-content: space-between;height: 75px;}

.n_fix_tel_box{display: flex;align-items: center;flex-wrap:nowrap; animation:change3 infinite linear alternate 1s;}
.n_fix_tel_box img{margin-right: 10px; margin-top:0; width:30px; }
.n_fix_tel_box p:nth-child(1){margin: 0 20px 0 10px;}

.n_fix_tel_box p{position:relative; font-size: 23px;color: #fff; font-weight: 600; margin-right: 22px; line-height:1.1}
.n_fix_tel_box p.after::after {content:''; position:absolute; background-color:rgba(255,255,255,0.7); width:1px; height:15px; top: 3px; right: -12px; display:block;} 
[name="tel_write_form"]{display: flex;justify-content: space-between;align-items: center;}

.n_fix_select{position: relative;margin-right: 20px;}
.n_fix_select *{font-family: 'Pretendard', san-serif !important;}
.n_fix_select ul{display: none;position: absolute;left: 0px;bottom: calc(100% + 10px);width: 100%;background: #fff;overflow: hidden;border-radius: 8px;/* border: 1px solid #ed918f; */border: 1px solid #a32b2a;}
.n_fix_select ul button{border: 0px;padding: 0px;width: 100%;height: 52px;line-height: 52px;font-size: 16px;padding: 0px 10px;text-align: left;background: #fff;cursor: pointer;}
.n_fix_select ul button:hover{font-weight: 600;}
.n_fix_s_btn {position: relative;width: 220px;height: 48px;border-radius: 8px;background: rgba(255,255,255,0.2);line-height: 48px;padding: 0px;border: 0px;padding: 0px 10px;text-align: left;cursor: pointer;}
.n_fix_s_btn span{color: #fff;font-size: 15px;}
.n_fix_s_btn img {position: absolute;top: 50%;transform: translateY(-50%);right: 15px;transition: 0.3s;}
.n_fix_s_btn.on img {transform: translateY(-50%) rotate(180deg);}
.n_fix_s_btn.on::after{display: none !important;}

[name="n_fix_tel"]{width: 250px;height: 48px;border-radius: 8px;background: rgba(255,255,255,0.2);line-height: 48px;margin-right: 32px;padding: 0px 10px;color: #fff;outline: 0;font-size: 15px;font-family: 'Pretendard', san-serif !important;}
[name="n_fix_tel"]::placeholder{color: #fff;}
#n_fix_chg{display: none;}
#n_fix_chg + label{position: relative;font-size: 16px;color: #fff;font-weight: 600;padding-left: 35px;margin-right: 40px;cursor: pointer; font-family: 'Pretendard', san-serif !important;}
#n_fix_chg + label::after{content: '';position: absolute;width: 18px;height: 18px;left: 0px;top: 50%;transform: translateY(-50%);border: 1px solid #fff;text-align: center;}
#n_fix_chg:checked + label::after{content: 'V';position: absolute;width: 18px;height: 18px;left: 0px;top: 50%;transform: translateY(-50%);border: 1px solid #fff;text-align: center;}

.n_fix_btn{display: inline-block;width: 120px;height: 48px;line-height: 52px;font-size: 20px;font-weight: 600;color: #a32b2a;background: #fff;padding: 0px;border: 0px;border-radius: 8px;text-align: center;cursor: pointer; animation:change2 linear alternate infinite 1s}
@keyframes change2{
 0%{background: #fff; color:#a32b2a;}
 100%{background:rgba(255,255,255,.5); color: #fff;}
}

@keyframes change3{
  0%{opacity: 1;}
 100%{opacity: .5;}
} 

.ft_con{padding-bottom: 75px;}
</style>

<div class="n_fix_menu">
    <div class="n_fix_box">
        <div class="n_fix_tel_box">
            <img src="https://mjsoft.co/html/millennium/images/n_intro/240709/pc_img_phone.png" alt="ico_tel">
            <p style="margin-top:7px">½Ç½Ã°£ µµÀÔ»ó´ã</p>
            <p class="after" style="font-size: 21px; margin-top:5px; color:#fff"> <span style="font-size: 19px; color:#fff">02) </span>401-5121</p> 
            <p style="font-size: 21px; margin-top:5px; color:#fff">1566-8680</p>
        </div>

        <form name="tel_write_form" method="post">
            <input type="hidden" name="n_fix_select" value="">
            
            <div class="n_fix_select">
                <button type="button" class="n_fix_s_btn"><span>µµÀÔ »ó´ãºÐ¾ß ¼±ÅÃ</span><img src="https://mjsoft.co/html/millennium/images/n_intro/240709/pc_img_quick.png" alt="pc_img_quick"></button>
                <ul>
                    <li><button type="button" data-id="õ³â°æ¿µERP µµÀÔ">õ³â°æ¿µERP µµÀÔ</button></li>
                    <li><button type="button" data-id="½º¸¶Æ®Æù(+PDA)¿µ¾÷°ü¸®">½º¸¶Æ®Æù(+PDA)¿µ¾÷°ü¸®</button></li>
                    <li><button type="button" data-id="½º¸¶Æ®Æù(+¿Â¶óÀÎ) ¼ö¹ßÁÖ°ü¸®">½º¸¶Æ®Æù(+¿Â¶óÀÎ) ¼ö¹ßÁÖ°ü¸®</button></li>
                    <li><button type="button" data-id="µµ¸Å¸ô/°³Àθô/¿ÀǸ¶ÄÏ°ü¸®">µµ¸Å¸ô/°³Àθô/¿ÀǸ¶ÄÏ°ü¸®</button></li>
                    <li><button type="button" data-id="½º¸¶Æ®½ºÅä¾î(³×À̹ö) ÆǸŰü¸®">½º¸¶Æ®½ºÅä¾î(³×À̹ö) ÆǸŰü¸®</button></li>
                    <li><button type="button" data-id="´ë¿©°ü¸®/POS/ÀÚ»ê°ü¸®">´ë¿©°ü¸®/POS/ÀÚ»ê°ü¸®</button></li>
                    <li><button type="button" data-id="¹°·ù(¹è¼Û)½Ã½ºÅÛ/SW°³¹ß»ó´ã">¹°·ù(¹è¼Û)½Ã½ºÅÛ/SW°³¹ß»ó´ã</button></li>
                </ul>
            </div> 

            <div class="n_fix_info">
                <input type="text" name="n_fix_tel" value="" placeholder="¿¬¶ô󸦠ÀÔ·ÂÇØÁÖ¼¼¿ä" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" maxlength="11" autocomplete="off">
                
                <input type="checkbox" id="n_fix_chg" name="n_fix_chg">
                <label for="n_fix_chg">°³ÀÎÁ¤º¸¼öÁý µ¿ÀÇ</label>

                <div class="n_fix_btn">»ó´ã½Åû</div>
            </div>
        </form>
    </div>
</div>

<script>

$(function(){
    $('.n_fix_s_btn').click(function(){
        $(this).toggleClass('on');
        $(this).next('ul').slideToggle();
    });

    $('.n_fix_select ul button').click(function(){
        var id = $(this).attr('data-id');

        $('.n_fix_s_btn span').text(id);
        $("input[name='n_fix_select']").val(id);
        $(this).toggleClass('on');
        $('.n_fix_select ul').slideToggle();
    });

    $('.n_fix_btn').click(function(){ //»ó´ã½Åû ¹öÆ° Å¬¸¯

        var fix_form = $('[name="tel_write_form"]')

        if( fix_form.find('.n_fix_s_btn span').text() == 'µµÀÔ »ó´ãºÐ¾ß ¼±ÅÃ'){
            alert('µµÀÔ »ó´ãºÐ¾ß¸¦ ¼±ÅÃÇØÁÖ¼¼¿ä!');
            return;
        }
        
        if(fix_form.find('[name="n_fix_tel"]').val().trim() == ''){
            alert('¿¬¶ô󸦠ÀÔ·ÂÇØÁÖ¼¼¿ä');
            fix_form.find('[name="n_fix_tel"]').focus();
            return;
        }

        if(!fix_form.find('[name="n_fix_chg"]').is(':checked')){
            alert('°³ÀÎÁ¤º¸¼öÁý¿©ºÎ¿¡ µ¿ÀÇÇØÁÖ¼¼¿ä');
            return;
        }

        var form_data = fix_form.serialize();
        $.post("n_fix_callmenu_process.php",form_data,function(rtn){
            alert(rtn);

            $("input[name='n_fix_select']").val("");
            $(".n_fix_s_btn span").text("µµÀÔ »ó´ãºÐ¾ß ¼±ÅÃ");
            $("input[name='n_fix_tel']").val("");
            $("input[name='n_fix_chg']").prop("checked",false);
        });
    });

    $("input[name='n_fix_tel']").blur(function(){
        var val = $("input[name='n_fix_tel']").val();
        $("input[name='n_fix_tel']").val(val.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`));
    });
});
</script>