[스마트디자인] [PC] 주문서에 통관 정보(개인통관고유부호 인증) 영역 추가(
) - HTML/CSS
▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.
[구)스마트디자인] 주문서작성
주문
/order/orderform.html
CHANGED
|
@@ -441,6 +441,88 @@
|
|
|
441
441
|
</div>
|
|
442
442
|
|
|
443
443
|
|
|
444
|
+
<div class="orderArea ecCustomsClearance {$customs_clearance_display|display}">
|
|
445
|
+
<div class="title">
|
|
446
|
+
<h3>通関情報</h3>
|
|
447
|
+
<p class="required"><img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" /> 必須項目</p>
|
|
448
|
+
</div>
|
|
449
|
+
<div class="ec-base-table typeWrite">
|
|
450
|
+
<table border="1" summary="">
|
|
451
|
+
<caption>通関情報入力</caption>
|
|
452
|
+
<colgroup>
|
|
453
|
+
<col style="width:139px;" />
|
|
454
|
+
<col style="width:auto;" />
|
|
455
|
+
</colgroup>
|
|
456
|
+
<tbody>
|
|
457
|
+
<tr>
|
|
458
|
+
<th scope="row">
|
|
459
|
+
通関番号 <img src="//img.echosting.cafe24.com/skin/base/common/ico_required_blue.gif" alt="必須" />
|
|
460
|
+
<div class="mTooltip">
|
|
461
|
+
<a href="#none" class="eTip"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/common/ico_tooltip.gif" alt="ヘルプ" /></a>
|
|
462
|
+
<div class="ec-base-tooltip">
|
|
463
|
+
<div class="content">
|
|
464
|
+
<strong>個人通関固有符号</strong>
|
|
465
|
+
<ul class="ec-base-help typeDash gBlank10">
|
|
466
|
+
<li>海外から大韓民国へ配送される商品の場合、「関税法」に基づき、受取人の個人通関固有符号と注文・配送情報を大韓民国関税庁へ提出することが義務付けられています。</li>
|
|
467
|
+
<li>個人通関固有符号は、輸入通関申告の際に住民登録番号の代わりに使用される個人識別番号で、Pから始まる13桁の数字で構成されています。</li>
|
|
468
|
+
<li>個人通関固有符号は大韓民国関税庁のホームページで発給を受けることができます。</li>
|
|
469
|
+
</ul>
|
|
470
|
+
</div>
|
|
471
|
+
<a href="#none" class="btnClose close"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif" alt="閉じる" /></a>
|
|
472
|
+
<span class="edge"></span>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
</th>
|
|
476
|
+
<td>
|
|
477
|
+
<input type="text" name="personal_clearance_code" id="personal_clearance_code" class="inputTypeText" maxlength="13" placeholder="個人通関固有符号を入力してください。(Pから始まる13桁)" />
|
|
478
|
+
<button type="button" id="btnCustomsAuthRequest" class="btnNormal {$customs_auth_display|display}">認証をリクエスト</button>
|
|
479
|
+
<p class="customsMessage displaynone" id="customsCooldown"><span class="txtEm">送信済み・<span id="customsCooldownTime">3:00</span>後に再送信可能</span></p>
|
|
480
|
+
<p class="customsMessage displaynone" id="customsResendReady">再送信可能(送信から3分経過)</p>
|
|
481
|
+
<p class="customsMessage displaynone" id="customsErrFormat"><span class="txtWarn">通関番号の形式(P+数字12桁)が正しくありません。再度入力してください。</span></p>
|
|
482
|
+
<p class="customsMessage displaynone" id="customsErrInvalid"><span class="txtWarn">通関番号が無効です。<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">関税庁ユニパス</a>で確認の上、再度入力してください。</span></p>
|
|
483
|
+
<p class="customsMessage displaynone" id="customsErrMismatch"><span class="txtWarn">通関番号に登録された受取人情報と一致しません。再度ご確認ください。 (<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">関税庁ユニパス</a>)</span></p>
|
|
484
|
+
<p class="customsAgree">
|
|
485
|
+
<input type="checkbox" name="customsAgree" id="customsAgree" value="T" /><label for="customsAgree"> <span class="txtEm">[必須]</span> 個人情報の収集および利用に同意します。</label>
|
|
486
|
+
<a href="#none" id="btnCustomsConsentDetail"><img src="//img.echosting.cafe24.com/skin/base_ja_JP/common/ico_tooltip.gif" alt="詳細を見る" /></a>
|
|
487
|
+
</p>
|
|
488
|
+
</td>
|
|
489
|
+
</tr>
|
|
490
|
+
<tr id="customsEmailAuthRow" class="clearanceEmailAuth typeDisabled {$customs_auth_display|display}">
|
|
491
|
+
<th scope="row">メール認証</th>
|
|
492
|
+
<td>
|
|
493
|
+
<p class="customsGuide displaynone" id="customsEmailGuide"><strong><span id="customsEmailMasked"></span>に認証番号6桁を送信しました。</strong> (受取人の通関番号登録メールアドレス)<br />メールは1〜2分以内に届きます。届かない場合は迷惑メールフォルダをご確認ください。</p>
|
|
494
|
+
<input type="text" id="customs_auth_code" class="inputTypeText" maxlength="6" placeholder="認証番号6桁" disabled="disabled" />
|
|
495
|
+
<button type="button" id="btnCustomsAuthConfirm" class="btnNormal" disabled="disabled">認証確認</button>
|
|
496
|
+
<p class="customsMessage displaynone" id="customsErrCodeMismatch"><span class="txtWarn">認証番号が一致しません。</span></p>
|
|
497
|
+
<p class="customsMessage displaynone" id="customsSuccessBadge"><span class="txtEm">認証が完了しました。</span></p>
|
|
498
|
+
<p class="customsMessage">※認証リクエスト後<strong>30分</strong>が経過してから決済すると、再認証が必要です。</p>
|
|
499
|
+
<p class="customsMessage displaynone" id="customsExemptGuide"><strong>個人通関固有符号がまだ更新されていません。</strong>この場合、メール認証手続きなしで自動的に注文が処理されます。<br />更新するには、<a href="https://unipass.customs.go.kr/per/persIndex.do" target="_blank">関税庁ユニパス</a>で個人通関固有符号を更新してください。</p>
|
|
500
|
+
<p class="customsMessage displaynone" id="customsFailureGuide"><strong>関税庁認証サービスが一時停止しています。</strong><br /><strong>認証番号の入力なしで注文を完了</strong>でき、通関の本人確認はサービス再開後に自動処理されます。通関番号・受取人情報を正確に入力してください。</p>
|
|
501
|
+
</td>
|
|
502
|
+
</tr>
|
|
503
|
+
</tbody>
|
|
504
|
+
</table>
|
|
505
|
+
</div>
|
|
506
|
+
<div id="ecCustomsConsentModal" class="customsConsentLayer" hidden="hidden">
|
|
507
|
+
<div class="dimmed"></div>
|
|
508
|
+
<div class="ec-base-layer" role="dialog" aria-modal="true" aria-labelledby="ecCustomsConsentTitle" tabindex="-1">
|
|
509
|
+
<div class="header">
|
|
510
|
+
<h3 id="ecCustomsConsentTitle">[必須] 個人情報の収集・利用への同意</h3>
|
|
511
|
+
</div>
|
|
512
|
+
<div class="content">
|
|
513
|
+
<p>1. 個人情報の収集および利用目的:注文商品の輸入通関処理</p>
|
|
514
|
+
<p>2. 収集する個人情報の項目:個人通関固有符号(またはパスポート番号)</p>
|
|
515
|
+
<p>3. 個人情報の保有および利用期間:原則として、個人情報の収集および利用目的が達成された後は、遅滞なく当該情報を破棄します。ただし、関係法令の規定により保存する必要がある場合は、一定期間個人情報を保管することがあります。</p>
|
|
516
|
+
<p>*本同意は拒否できますが、拒否した場合サービスのご利用に制限が生じる場合があります。</p>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="ec-base-button">
|
|
519
|
+
<button type="button" class="btnSubmitFix sizeS" data-action="confirm">確認</button>
|
|
520
|
+
</div>
|
|
521
|
+
<a href="#none" class="close" data-action="confirm"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close.gif" alt="閉じる" /></a>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
444
526
|
<div class="orderArea {$ordadd.display|display}">
|
|
445
527
|
<div class="title">
|
|
446
528
|
<h3>追加情報</h3>
|
formGlobal.css
css
/css/module/order/formGlobal.css
CHANGED
|
@@ -229,6 +229,23 @@
|
|
|
229
229
|
.xans-order-formglobal #tax_request_email1, .xans-order-formglobal #tax_request_email2 {margin:0 4px 0 0; width:110px; }
|
|
230
230
|
.xans-order-formglobal #tax_request_address1, .xans-order-formglobal #tax_request_address2 { margin:5px 0 0; width:400px; }
|
|
231
231
|
|
|
232
|
+
.xans-order-formglobal .ecCustomsClearance th .mTooltip { display:inline-block; position:relative; margin:0 0 0 2px; vertical-align:middle; }
|
|
233
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .eTip img { vertical-align:middle; }
|
|
234
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip { left:-20px; width:330px; font-weight:normal; }
|
|
235
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip .ec-base-tooltip .edge { left:27px; }
|
|
236
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip:hover .ec-base-tooltip,
|
|
237
|
+
.xans-order-formglobal .ecCustomsClearance .mTooltip.show .ec-base-tooltip { display:block; }
|
|
238
|
+
.xans-order-formglobal .ecCustomsClearance .inputTypeText.error { border-color:#f76560; }
|
|
239
|
+
.xans-order-formglobal .ecCustomsClearance [class^='btnNormal']:disabled { border-color:#e3e3e3; color:#999; background-color:#fff; cursor:default; }
|
|
240
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage { margin:5px 0 0; }
|
|
241
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide { margin:0 0 5px; }
|
|
242
|
+
.xans-order-formglobal .ecCustomsClearance .customsMessage a,
|
|
243
|
+
.xans-order-formglobal .ecCustomsClearance .customsGuide a { color:#295cef; text-decoration:underline; }
|
|
244
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree { margin:10px 0 0; }
|
|
245
|
+
.xans-order-formglobal .ecCustomsClearance .customsAgree img { vertical-align:middle; }
|
|
246
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer { position:fixed; top:150px; left:50%; width:420px; margin:0 0 0 -210px; }
|
|
247
|
+
.xans-order-formglobal .customsConsentLayer .ec-base-layer .content p { margin:0 0 6px; line-height:1.6; }
|
|
248
|
+
|
|
232
249
|
#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; }
|
|
233
250
|
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
|
|
234
251
|
#divNvPointInfo a img { vertical-align:middle; }
|