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
|
<style>
.n_fix_menu{position: fixed;left: 0px;right: 0px;bottom: 0px;width: 100%;/* background: #c53836; */background: #e98046;z-index: 99;}
.n_fix_menu *{font-family: 'GmarketSansTTF', san-serif !important;}
.n_fix_box{width: 1400px;margin: 0 auto;display: flex;justify-content: space-between;height: 85px;}
.n_fix_tel_box{display: flex;align-items: center;margin-right: 70px;}
.n_fix_tel_box img{margin-right: 20px;}
.n_fix_tel_box p:nth-child(1){margin: 0 20px 0 10px;}
.n_fix_tel_box p{font-size: 24px;color: #fff; font-weight: 600;}
[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 #f5b997;}
.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.4);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.4);line-height: 48px;margin-right: 20px;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: 25px;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: #e98046;background: #fff;padding: 0px;border: 0px;border-radius: 8px;text-align: center;cursor: pointer;}
</style>
<div class="n_fix_menu">
<div class="n_fix_box">
<div class="n_fix_tel_box">
<img src="./images/n_intro/240709/pc_img_phone.png" alt="ico_tel">
<p style="margin-right: 20px;">½Ç½Ã°£ µµÀÔ»ó´ã</p>
<p style="font-size: 21px;line-height: 30px;"> <span style="font-size: 19px;">02) </span>501-5121<br> 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="./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="½º¸¶Æ®Æù ¿µ¾÷°ü¸®">½º¸¶Æ®Æù ¿µ¾÷°ü¸®</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="±âŸ">±âŸ</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_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>
|