[스마트디자인] [PC] 주문서에 통관 정보(개인통관고유부호 인증) 영역 추가(
) - HTML/CSS
▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.
[구)스마트디자인] 주문서작성
주문
/order/orderform.html
CHANGED
|
@@ -433,6 +433,88 @@
|
|
|
433
433
|
</div>
|
|
434
434
|
</div>
|
|
435
435
|
|
|
436
|
+
<div class="orderArea ecCustomsClearance {$customs_clearance_display|display}">
|
|
437
|
+
<div class="title">
|
|
438
|
+
<h3>報關資訊</h3>
|
|
439
|
+
<p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" /> 必須</p>
|
|
440
|
+
</div>
|
|
441
|
+
<div class="ec-base-table typeWrite">
|
|
442
|
+
<table border="1" summary="">
|
|
443
|
+
<caption>填寫報關資訊</caption>
|
|
444
|
+
<colgroup>
|
|
445
|
+
<col style="width:139px;" />
|
|
446
|
+
<col style="width:auto;" />
|
|
447
|
+
</colgroup>
|
|
448
|
+
<tbody>
|
|
449
|
+
<tr>
|
|
450
|
+
<th scope="row">
|
|
451
|
+
報關號碼 <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" />
|
|
452
|
+
<div class="mTooltip">
|
|
453
|
+
<a href="#none" class="eTip"><img src="//img.echosting.cafe24.com/skin/base_zh_TW/common/ico_tooltip.gif" alt="說明" /></a>
|
|
454
|
+
<div class="ec-base-tooltip">
|
|
455
|
+
<div class="content">
|
|
456
|
+
<strong>個人報關代碼</strong>
|
|
457
|
+
<ul class="ec-base-help typeDash gBlank10">
|
|
458
|
+
<li>對於自海外配送至大韓民國的商品,依《海關法》規定,須向韓國海關提交收件人的個人報關代碼及訂單、配送資訊。</li>
|
|
459
|
+
<li>個人報關代碼是辦理進口報關申報時,用以代替居民登錄號碼的個人識別號碼,由以P開頭的13位數字組成。</li>
|
|
460
|
+
<li>您可於韓國海關官網申請取得個人報關代碼。</li>
|
|
461
|
+
</ul>
|
|
462
|
+
</div>
|
|
463
|
+
<a href="#none" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="關閉" /></a>
|
|
464
|
+
<span class="edge"></span>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
</th>
|
|
468
|
+
<td>
|
|
469
|
+
<input type="text" name="personal_clearance_code" id="personal_clearance_code" class="inputTypeText" maxlength="13" placeholder="請輸入個人報關代碼。(以P開頭的13位)" />
|
|
470
|
+
<button type="button" id="btnCustomsAuthRequest" class="btnNormal {$customs_auth_display|display}">請求驗證</button>
|
|
471
|
+
<p class="customsMessage displaynone" id="customsCooldown"><span class="txtEm">已發送・<span id="customsCooldownTime">3:00</span>後可重新發送</span></p>
|
|
472
|
+
<p class="customsMessage displaynone" id="customsResendReady">可重新發送(發送後已過3分鐘)</p>
|
|
473
|
+
<p class="customsMessage displaynone" id="customsErrFormat"><span class="txtWarn">報關號碼格式(P+12位數字)不正確。請重新輸入。</span></p>
|
|
474
|
+
<p class="customsMessage displaynone" id="customsErrInvalid"><span class="txtWarn">報關號碼無效。請於<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韓國海關UNI-PASS</a>確認後重新輸入。</span></p>
|
|
475
|
+
<p class="customsMessage displaynone" id="customsErrMismatch"><span class="txtWarn">與報關號碼登記的收件人資訊不符。請重新確認。 (<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韓國海關UNI-PASS</a>)</span></p>
|
|
476
|
+
<p class="customsAgree">
|
|
477
|
+
<input type="checkbox" name="customsAgree" id="customsAgree" value="T" /><label for="customsAgree"> <span class="txtEm">[必須]</span> 我同意收集並使用個人資訊。</label>
|
|
478
|
+
<a href="#none" id="btnCustomsConsentDetail"><img src="//img.echosting.cafe24.com/skin/base_zh_TW/common/ico_tooltip.gif" alt="查看詳情" /></a>
|
|
479
|
+
</p>
|
|
480
|
+
</td>
|
|
481
|
+
</tr>
|
|
482
|
+
<tr id="customsEmailAuthRow" class="clearanceEmailAuth typeDisabled {$customs_auth_display|display}">
|
|
483
|
+
<th scope="row">電子郵件驗證</th>
|
|
484
|
+
<td>
|
|
485
|
+
<p class="customsGuide displaynone" id="customsEmailGuide"><strong>已將6位數驗證碼發送至<span id="customsEmailMasked"></span>。</strong> (收件人於報關號碼登記的電子郵件)<br />郵件將於1~2分鐘內送達。若未收到,請查看垃圾郵件夾。</p>
|
|
486
|
+
<input type="text" id="customs_auth_code" class="inputTypeText" maxlength="6" placeholder="6位數驗證碼" disabled="disabled" />
|
|
487
|
+
<button type="button" id="btnCustomsAuthConfirm" class="btnNormal" disabled="disabled">驗證</button>
|
|
488
|
+
<p class="customsMessage displaynone" id="customsErrCodeMismatch"><span class="txtWarn">驗證碼不正確。</span></p>
|
|
489
|
+
<p class="customsMessage displaynone" id="customsSuccessBadge"><span class="txtEm">驗證已完成。</span></p>
|
|
490
|
+
<p class="customsMessage">※申請驗證後超過<strong>30分鐘</strong>才結帳,須重新驗證。</p>
|
|
491
|
+
<p class="customsMessage displaynone" id="customsExemptGuide"><strong>個人報關代碼尚未更新。</strong>此情況下,訂單將於未經電子郵件驗證的情況下自動處理。<br />如需更新,請於<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">韓國海關UNI-PASS</a>更新個人報關代碼。</p>
|
|
492
|
+
<p class="customsMessage displaynone" id="customsFailureGuide"><strong>韓國海關驗證服務暫時中斷。</strong><br /><strong>您可在未輸入驗證碼的情況下完成訂單</strong>,報關身分驗證將於服務恢復後自動處理。請正確填寫報關號碼與收件人資訊。</p>
|
|
493
|
+
</td>
|
|
494
|
+
</tr>
|
|
495
|
+
</tbody>
|
|
496
|
+
</table>
|
|
497
|
+
</div>
|
|
498
|
+
<div id="ecCustomsConsentModal" class="customsConsentLayer" hidden="hidden">
|
|
499
|
+
<div class="dimmed"></div>
|
|
500
|
+
<div class="ec-base-layer" role="dialog" aria-modal="true" aria-labelledby="ecCustomsConsentTitle" tabindex="-1">
|
|
501
|
+
<div class="header">
|
|
502
|
+
<h3 id="ecCustomsConsentTitle">[必須] 同意收集並使用個人資訊</h3>
|
|
503
|
+
</div>
|
|
504
|
+
<div class="content">
|
|
505
|
+
<p>1. 個人資訊收集及使用目的:處理訂購商品之進口報關</p>
|
|
506
|
+
<p>2. 收集之個人資訊項目:個人報關代碼(或護照號碼)</p>
|
|
507
|
+
<p>3. 個人資訊保留及使用期間:原則上,於達成個人資訊收集及使用目的後,將立即銷毀相關資訊。惟依相關法令規定須保存者,得於一定期間內保留個人資訊。</p>
|
|
508
|
+
<p>*您可拒絕本同意,但拒絕時可能限制您使用服務。</p>
|
|
509
|
+
</div>
|
|
510
|
+
<div class="ec-base-button">
|
|
511
|
+
<button type="button" class="btnSubmitFix sizeS" data-action="confirm">確認</button>
|
|
512
|
+
</div>
|
|
513
|
+
<a href="#none" class="close" data-action="confirm"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="關閉" /></a>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
</div>
|
|
517
|
+
|
|
436
518
|
<div class="orderArea {$ordadd.display|display}">
|
|
437
519
|
<div class="title">
|
|
438
520
|
<h3>更多資料</h3>
|
formGlobal.css
css
/css/module/order/formGlobal.css
CHANGED
|
@@ -228,6 +228,23 @@
|
|
|
228
228
|
.xans-order-formglobal #tax_request_email1, .xans-order-formglobal #tax_request_email2 {margin:0 4px 0 0; width:110px; }
|
|
229
229
|
.xans-order-formglobal #tax_request_address1, .xans-order-formglobal #tax_request_address2 { margin:5px 0 0; width:400px; }
|
|
230
230
|
|
|
231
|
+
.xans-order-formglobal .ecCustomsClearance th .mTooltip { display:inline-block; position:relative; margin:0 0 0 2px; vertical-align:middle; }
|
|
232
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .eTip img { vertical-align:middle; }
|
|
233
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip { left:-20px; width:330px; font-weight:normal; }
|
|
234
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip .edge { left:27px; }
|
|
235
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip:hover .ec-base-tooltip,
|
|
236
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip.show .ec-base-tooltip { display:block; }
|
|
237
|
+
.xans-order-formglobal .ecCustomsClearance .inputTypeText.error { border-color:#f76560; }
|
|
238
|
+
.xans-order-formglobal .ecCustomsClearance [class^='btnNormal']:disabled { border-color:#e3e3e3; color:#999; background-color:#fff; cursor:default; }
|
|
239
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage { margin:5px 0 0; }
|
|
240
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide { margin:0 0 5px; }
|
|
241
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage a,
|
|
242
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide a { color:#295cef; text-decoration:underline; }
|
|
243
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree { margin:10px 0 0; }
|
|
244
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree img { vertical-align:middle; }
|
|
245
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer { position:fixed; top:150px; left:50%; width:420px; margin:0 0 0 -210px; }
|
|
246
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer .content p { margin:0 0 6px; line-height:1.6; }
|
|
247
|
+
|
|
231
248
|
#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; line-height:14px; background:#fff; border:1px solid #5B9761; }
|
|
232
249
|
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
|
|
233
250
|
#divNvPointInfo a img { vertical-align:middle; }
|