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
|
<style>
.n_fix_menu{position: fixed; left: 0px;right: 0px;bottom: 0px;width: 100%;/* background: #c53836; */background: #a32b2a;z-index: 99;}
.n_fix_menu *{font-family: 'GmarketSansTTF', san-serif !important;}
.n_fix_box{width: 1400px;margin: 0 auto; height: 75px;}
.n_fix_box input {font-family: 'Pretendard', san-serif !important; font-size:15px}
.n_fix_tel_box{float:left; margin-top:23px; animation:change3 infinite linear alternate 1s;}
.n_fix_tel_box img{margin-right: 6px; width:30px; display:inline-block; vertical-align:middle; line-height:1.1}
.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: 16px; line-height:1.1; display:inline-block; vertical-align:middle;}
.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"]{float:right; width:858.7px; box-sizing:border-box; white-space: nowrap;
text-wrap: nowrap;}
.n_fix_select{position: relative;margin-right: 20px; float:left; margin-top:14px;}
.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: 15px;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;}
.n_fix_info {margin-top:13px;}
[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;border:0;}
[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: 38px;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;}
}
</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:5px">실시간 도입상담</p>
<p class="after" style="font-size: 21px; margin-top:4px; color:#fff"> <span style="font-size: 19px; color:#fff; line-height:1.3">02) </span>401-5121</p>
<p style="font-size: 21px; margin-top:3px; 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>
|