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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
|
<?php include("head.php"); ?>
<style>
.jassor_iframe_class {width:100%;height:420px;}
.ui-dialog .ui-dialog-content{padding:0}
.pro_bn_opt td{height:50px;font-weight:600;color:#0e8db5;font-size:16px;border-right:none;border-bottom:1px solid #d7d7d7;}
/* .pro_bn_opt td:nth-child(even){color:#f36e5d;} */
.pro_bn_opt tr:last-child td{border-bottom:none;}
/* 모달창 버튼수정 08.03 */
.ui-dialog .ui-dialog-titlebar .ui-button .ui-button-text{display:none;}
#modal_member_box{height:610px !important;}
/* 240828 스마트스토어 CSS */
#smartstore * { letter-spacing:-1px; }
.section { padding:100px 0; }
.section h2 {font-size:32px; font-weight:300;}
.section h2 b {font-weight:600}
.section p {font-size:24px; font-weight:300; color:#999;}
#store_main { position: relative; width: 100%; background: url('./images/smartstore/banner_bg_1.png') top center no-repeat; background-size: cover; overflow: hidden; z-index: 1; line-height:1.5 ;}
.w1200 { position: relative; margin:0 auto; width:1200px; box-sizing:border-box;}
.banner_wrap { display:flex; justify-content: space-between; align-items: center; box-sizing:border-box;}
.banner_wrap .txt_cont,
.banner_wrap .img_cont {position:relative; display:block; width:50%}
.banner_wrap .txt_cont p {color:#fff; font-size:24px; margin:50px 0 90px; }
.banner_wrap .txt_cont .btn_wrap {position:relative;}
.banner_wrap .txt_cont .btn_wrap a {display:inline-block; width:250px; line-height:65px ; text-align:center; font-size:23px; color:#fff; box-sizing:border-box; font-weight:500; transition:0.3s all}
.banner_wrap .txt_cont .btn_wrap a:first-child {margin-right:10px;}
.banner_wrap .txt_cont .btn_wrap a:hover {opacity:0.8; line-height:65px ; font-size:24px; font-weight:700;}
.green {background-color:#00D148; border:1px solid #00D148}
.white_line {border:1px solid #fff}
.t_green {color:#00d148}
.banner_wrap .img_cont img {max-width:100%;}
#store_link { position: relative; width: 100%; text-align:center; background: url('./images/smartstore/link_bg_1.png') top center no-repeat; background-size: cover; overflow: hidden; z-index: 1; line-height:1.5 ;}
#store_link img {margin-top:40px}
#worklink { background-color:#f8f8f8; line-height: 1.5; text-align:center}
#worklink #tab .tab_menu ul {display: flex; flex-wrap:wrap; margin: 60px auto 0; width:680px}
#worklink #tab .tab_menu ul li {width: calc(100% / 5); font-size:21px; box-sizing: border-box; color:#aaa; text-align:center; display: block; cursor:pointer; transition: all 0.3s}
#worklink #tab .tab_menu ul li:nth-child(-n+8) {margin-bottom:30px;}
#worklink #tab .tab_menu ul li p {margin-top:20px; font-size:18px; font-weight:400}
#worklink #tab .tab_menu ul li > div {margin:0 auto; background-color:#fff; border:1px solid #ccc; width:100px; height:100px; box-sizing: border-box; border-radius:100px; transition:0.2s all}
#worklink #tab .tab_menu ul li .tab_icon_1 {background:url('./images/smartstore/tab_icon_1.png')center center no-repeat #fff;}
#worklink #tab .tab_menu ul li .tab_icon_2 {background:url('./images/smartstore/tab_icon_2.png')center center no-repeat #fff;}
#worklink #tab .tab_menu ul li .tab_icon_3 {background:url('./images/smartstore/tab_icon_3.png')center center no-repeat #fff;}
#worklink #tab .tab_menu ul li .tab_icon_4 {background:url('./images/smartstore/tab_icon_4.png')center center no-repeat #fff;}
#worklink #tab .tab_menu ul li .tab_icon_5 {background:url('./images/smartstore/tab_icon_5.png')center center no-repeat #fff;}
#worklink #tab .tab_menu ul li.on { box-sizing: border-box; }
#worklink #tab .tab_menu ul li.on p {color:#333; font-weight:500}
#worklink #tab .tab_menu ul li.on > div {background-color:#00D148; border:1px solid #00D148;}
#worklink #tab .tab_menu ul li.on .tab_icon_1 {background:url('./images/smartstore/tab_icon_1_on.png') center center no-repeat #00D148;}
#worklink #tab .tab_menu ul li.on .tab_icon_2 {background:url('./images/smartstore/tab_icon_2_on.png') center center no-repeat #00D148;}
#worklink #tab .tab_menu ul li.on .tab_icon_3 {background:url('./images/smartstore/tab_icon_3_on.png') center center no-repeat #00D148;}
#worklink #tab .tab_menu ul li.on .tab_icon_4 {background:url('./images/smartstore/tab_icon_4_on.png') center center no-repeat #00D148;}
#worklink #tab .tab_menu ul li.on .tab_icon_5 {background:url('./images/smartstore/tab_icon_5_on.png') center center no-repeat #00D148;}
#worklink #tab .tab_contents { position: relative; width: 950px; height: 560px; margin:0 auto; background-color:#00D148; overflow:hidden; box-sizing: border-box;}
#worklink #tab .tab_contents .tab_c {margin-top:16px; box-sizing: border-box; position: relative; width: 950px; height: 560px; display: none; }
#worklink #tab .tab_contents .tab_c.on { position: relative; top:-16px; display: block;}
#worklink #tab .tab_contents .tab_c.on .tab_in {width:100%; height:100%; transition:0.2s all}
#worklink #tab .tab_contents .tab_c.on .tab_in_1 {background:url('./images/smartstore/tab1_1.png') center center no-repeat ; background-size:cover}
#worklink #tab .tab_contents .tab_c.on .tab_in_2 {background:url('./images/smartstore/tab2_1.png') center center no-repeat;
background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_3 {background:url('./images/smartstore/tab3_1_1.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_4 {background:url('./images/smartstore/tab4_1_1.png') center center no-repeat; background-size:cover; image-rendering: -moz-pixelated; /* firefox */
image-rendering: -o-pixelated; /* opera */
image-rendering: -webkit-pixelated; /* chrome(비표준) */
image-rendering: pixelated;transform: translateZ(0); backface-visibility: hidden;}
#worklink #tab .tab_contents .tab_c.on .tab_in_5 {background:url('./images/smartstore/tab5_1_1.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_1:hover {background:url('./images/smartstore/tab1_1_on.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_2:hover {background:url('./images/smartstore/tab2_1_on.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_3:hover {background:url('./images/smartstore/tab3_1_on.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_4:hover {background:url('./images/smartstore/tab4_1_on.png') center center no-repeat; background-size:cover }
#worklink #tab .tab_contents .tab_c.on .tab_in_5:hover {background:url('./images/smartstore/tab5_1_on.png') center center no-repeat; background-size:cover }
#flow {position:relative; text-align:center; background:#edf2ec; line-height:1.5 }
#flow img {margin-top: 60px;}
#tel_wrap {position:relative; text-align:center; background:#54bb9b; padding:40px 0 }
</style>
<div id="smartstore">
<section id="store_main" class="section">
<div class="banner_wrap w1200">
<div class="txt_cont">
<img src="./images/smartstore/banner_title_1.png" alt="">
<p>타 업체 프로그램과의 연동 없이 천년경영에서 다이렉트로<br>
네이버 스마트스토어와 연동하여 편리하게 사용해 보세요.</p>
<div class="btn_wrap">
<a href="https://mjsoft.co/html/millennium/customer_buy_cs.php" target="_blank" class="green">구매상담</a>
<a href="https://mjsoft.co/html/millennium/customerprice.php" target="_blank" class="white_line">견적요청</a>
</div>
</div>
<div class="img_cont">
<img src="./images/smartstore/banner_img_1.png" alt="">
</div>
</div>
</section>
<section id="store_link" class="section">
<div class="link_wrap w1200">
<h2><b class="t_green">네이버 스마트스토어</b> 연동 구성도</h2>
<p>스마트스토어의 주문 및 재고를 천년경영과 연동!</p>
<img src="./images/smartstore/store_link_1.png" alt="">
</div>
</section>
<section id="worklink" class="section">
<h2><b class="t_green">네이버 스마트스토어</b> 연동</h2>
<p>5가지의 업무 연동으로 편리해진 업무를 경험해 보세요.</p>
<div class="tab_wrap w1200">
<!-- TAB MENU 탭 메뉴 -->
<div id="tab">
<div class="tab_menu">
<ul>
<li class="on"><div class="tab_icon_1"></div><p>상품관리</p></li>
<li><div class="tab_icon_2"></div><p>재고관리</p></li>
<li><div class="tab_icon_3"></div><p>주문관리</p></li>
<li><div class="tab_icon_4"></div><p>송장지원</p></li>
<li><div class="tab_icon_5"></div><p>문의관리</p></li>
</ul>
</div>
<div class="tab_contents">
<div class="tab_c on">
<div class="tab_in tab_in_1">
</div>
</div>
<div class="tab_c">
<div class="tab_in tab_in_2">
</div>
</div>
<div class="tab_c">
<div class="tab_in tab_in_3">
</div>
</div>
<div class="tab_c">
<div class="tab_in tab_in_4">
</div>
</div>
<div class="tab_c">
<div class="tab_in tab_in_5">
</div>
</div>
</div>
</div>
</div>
</section>
<section id="flow" class="section">
<h2>복잡한 <b class="t_green">네이버 스마트스토어 연동 하나</b>로 해결!</h2>
<p></p>
<img src="./images/smartstore/flowchart.png" alt="">
</section>
<section id="tel_wrap">
<img src="./images/smartstore/tell_icon1.png" alt="">
</section>
</div>
<!--나에게맞는제품찾기-->
<div id="modal_member_box" style="display:none;width:900px; height:684px; padding-top:15px;padding-left:17px;padding-right:3px;position:relative;"><iframe id='pop_box_iframe' style='width:100%;height:100%;' frameborder=0 src=''></iframe></div>
<script>
$(document).ready(function(){
//조이렌트 대여반납 기능 탭 메뉴
$(".tab_menu ul li").on('mouseenter', function() {
let index = $(".tab_menu ul li").index(this);
//모든 div의 on 클래스 제거
$(".tab_menu ul li").removeClass('on');
$('.tab_c').removeClass('on');
//클릭된 index에 해당하는 div에 on 추가
$('.tab_menu ul li:eq('+ index +')').addClass('on');
$('.tab_contents .tab_c:eq('+ index +')').addClass('on');
});
});
$(function(){
$(".show_program_open").css("cursor","pointer").click(function(){ //엠제이 소프트란 팝업처리
main_popup_show("http://mjsoft.co/html/millennium/index_new_program_new2.php","725","900","나에게 맞는 제품찾기");
});
});
function main_popup_show(url,v_width,v_height,v_title){
$("#pop_box_iframe").attr("src","");
$("#modal_member_box").dialog({
resizable: true, height:v_width, width:v_height, modal: true, title: v_title,
show : {effect:'blind',duration:500},
buttons: {
닫기: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$("#pop_box_iframe").attr("src","");
}
});
setTimeout(function(){
$("#pop_box_iframe").attr("src",url);
},500);
}
function dialog_close(){
$("#modal_member_box").dialog( "close" );
}
</script>
<?php include("foot.php"); ?>
|