CINXE.COM
동물해방물결 후원페이지
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <script> window.g_isShop = false; window.g_isF2F = false; window.g_isDirect = false; window.payMode = '0' </script> <style> .pay-method-logos-label { display: flex; align-items: center; } .pay-method-logos-label img{ vertical-align: top; } .explain-icon-under14 { padding-top: 15px !important; } .check-label-is-under14 { width: auto !important; } .legal-representative-desc-box { margin-left: 118px; margin-top: 12px; } .admit-is-under14-section { float: right; margin-right: 147px; } .confirm-otp-btn { float: right; margin-right: 190px; } .admit-is-under14 { height: auto; margin-top: 14px; width : auto !important; float: left; } .bank-account-inquiry-request-section { float: right; margin-right : 92px; } .bank-account-inquiry-request { background: transparent; border: none; text-decoration: underline; font-size: 15px; padding: 0; margin: 20px 0; } .checkout-input-legal-representative-otp { padding: 0 18px; width: 182px; height: 48px; border: 1px solid #9C9C9C; font-size: 15px; font-weight: 400; color: #0F0F0F; } .donus-collapsible .handle { cursor: pointer; } .donus-collapsible.collapsed .collapsible { display: none; } .shop .product-form { overflow: visible !important; } .modal, .modal-open { padding-right: 0px !important; } .modal .modal-body { max-height: calc(100vh - 300px); overflow-y: auto; } .modal .modal-agreement-content { white-space: pre-wrap; line-height: 1.5em; font-size: 14px; padding: 5px; } .modal .modal-agreement-content li { list-style: none; padding-left: 0 0 5px 20px; } .signature-pad-section{ width: 320px; height: 200px; } .signature-pad-wrapper{ border:1px solid black; position: relative; width: 320px; height: 180px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .signature-pad-wrapper .signature-pad-background{ text-align : center; padding : 83.5px 0; font-size : 15px; color: #7F7F7F; font-weight: 300; height: 180px; } .signature-pad-wrapper .signature-pad{ position: absolute; left: 0; top: 0; /*width:400px;*/ /*height:200px;*/ } .signature-pad-rewrite{ display: block; font-size: 14px; padding: 10px 0 3px 0; text-align: left; text-decoration: underline; color: #7F7F7F; font-weight: 400; } .admit-is-pay-start-month-early{ height: auto; margin-top: 14px; width : auto !important; } .checklist-title { margin-bottom: 30px; } .checklist-content{ line-height: 20px } .checklist-content::first-line{ line-height: calc(1em + 1px); } .full-width { width: 100% !important; } @media (max-width: 767px) { .admit-is-under14-section { margin-right: 0px; } .admit-is-pay-start-month-early{ height: auto; margin-top: 0px; } .check-label-is-pay-start-month-early{ margin-top: 10px; } .bank-account-inquiry-request-section { float: right; margin-right : 1%; } .bank-account-inquiry-request { background: transparent; border: none; text-decoration: underline; font-size: 14px; padding: 0; margin: 0px 0px; } .checkout-input-legal-representative-otp { height: 40px; width: calc(65% - 80px) !important; } .legal-representative-desc-box { margin-left: 30%; margin-top: 1px; } } /* f2f style */ .line-f2f{ width: 100%; max-width: 504px; } #donate-page-left .field-f2f{ width: 100%; max-width: 504px; background: #FFFFFF; color: #2B2B2B; border: 1px solid #9C9C9C; text-overflow: ellipsis; overflow: hidden; display: inline-block !important; white-space: nowrap; text-align: center; align-items: center; line-height: 45px; cursor: pointer; } #donate-page-left .input-long-field-f2f { width: 100%; max-width: 504px; height: 45px; line-height: 45px; color: #0F0F0F; margin-right: 0px; border: 1px solid #9C9C9C; text-align: center; } .step_list03-f2f{ width: 100% !important; max-width: 767px; } .step_list04-f2f{ width: 100% !important; max-width: 522px !important; } @media (max-width: 767px) { #donate-page-left .field-f2f { max-width: 100%; margin-bottom: 60px; font-size: 14px; line-height: 36px; } #donate-page-left .input-long-field-f2f { max-width: 100%; height: 40px; line-height: 40px; font-size: 14px; } .step_list03-f2f{ width: 100% !important; } .step_list04-f2f{ max-width: 767px !important; width: 100% !important; } .line-f2f{ max-width: 100%; } .checklist-title { margin-bottom: 15px; } } </style> <meta charset="utf-8"> <title>동물해방물결 후원페이지</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="/static/css/bootstrap-css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="/static/css/common.css?v=20231012"/> <link rel="stylesheet" href="/static/css/shop-dropdown.css?v=20220818"/> <link rel="icon" href="https://media.donus.org/MediaFile/donghaemul/page/24502fd9-577f-4e9e-b303-c553affa4f2f.jpg" type="image/png" /> <style> /* 결제페이지 배경 이미지 */ #donate-page-background {background-image: url(https://cdn.donus.org/media-file/EBC6648E-1A96-4D34-8550-3843D06B5935/page/d974a5ee-7783-4035-85c6-1a320e41070b.jpg);} /* 결제페이지 Step3 배경 이미지 */ #donate-confirm-page-background {background-image: url(https://media.donus.org/MediaFile/donghaemul/page/9a796cb2-f5df-44eb-ad71-c371dd34cfa8.jpg);} /* 주요 색상: 배경 - 결제페이지 데스크탑 상단 박스 배경색상 */ #nav .member, .donate-page-box, .submit, .submit-100, .btn-modal-agree {background-color: #000000;} #donate-page-left, #donate-confirm-left {border-top: 5px solid #000000;} /* 주요 색상: 폰트 */ #nav .member, .donate-page-box, .submit, .submit-100, #nav .logout, .btn-modal-agree {color: #ffffff;} #nav .logout {border: 1px solid #ffffff;} #nav .mydonus {border: 1px solid #ffffff;} /* 보조 색상: 배경 */ .dtype input[type="radio"]:checked + label { background-color: #454545 !important; border: 1px solid #454545 !important; } .pay-dtype input[type="radio"]:checked + label { background-color: rgba(6, 198, 132, 0.04) !important; border: 1px solid rgba(6, 198, 132, 1) !important; } .step_list04 .step_list04_input.onf {background: #454545;} #nav .menu {background-color: #454545;} #nav .menu li.active {background-color: #454545;} @media screen and (max-width: 1024px) {#nav {background-color: #454545;}} /* 보조 색상: 폰트 */ .dtype input[type="radio"]:checked + label {color: #ffffff !important;} .pay-dtype input[type="radio"]:checked + label {color: black !important;} .step_list04 .step_list04_input.onf {color: #ffffff;} #nav .menu li a {color: #ffffff; opacity: 0.7;} #nav .menu li .dropdown-btn {background-color: #454545;} #nav .menu li .dropdown-btn.down {background-color: #000000;} #nav .menu .dropdown-container {background-color: #000000;} .dropdown-menu-arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; position: relative; top: 35%; left: 5%; } #nav .menu li.active, #nav .menu li.active a, #nav .menu li a:hover {color: #ffffff !important; opacity: 1;} #nav .menu li div a {color: #ffffff; opacity: 0.7;} /* 결제페이지 모바일 상단 박스 배경 이미지 */ @media screen and (max-width: 767px) { .donate-page-box:before {background-image: url(https://cdn.donus.org/media-file/EBC6648E-1A96-4D34-8550-3843D06B5935/page/d1998d87-cef9-4ad7-ba53-7d623ba4e0c3.jpg);} .donate-page-box {background-color: #000; color: #fff;} } /* 마이페이지 로그인 배경 이미지 */ #login-page-background {background-image: url(https://media.donus.org/MediaFile/donghaemul/page/cbf34031-5cbc-4719-be0b-b21e7b6277cd.jpg);} /* 마이페이지 로그인 우측 디스플레이 이미지 */ #login-page-right:before {background-image: url(https://media.donus.org/MediaFile/donghaemul/page/36632bb1-9b13-402f-b3ed-bad74d3816f2.jpg);} /* 마이페이지 배경 이미지 */ #support-page-background {background-image: url(https://media.donus.org/MediaFile/donghaemul/page/a9b525cf-55cb-453c-b751-b58d7de46b67.jpg);} #memberinfo-page-right .btn50.confirm {background-color: #000000; color: #ffffff !important; border: 1px solid #9c9c9c !important;} /* 마이페이지 약정상세화면 버튼 색상 */ #recordinfo-page-right .btn40.active { background-color: #454545 !important; color: #ffffff !important; border:0;} #recordinfo-page-right .btn40.disabled {background-color: #F0F0F0 !important; color: #9C9C9C !important;} #recordinfo-page-right .btn50.confirm {background-color: #454545 !important; color: #ffffff !important;} .pay-subfontcolor { color: #ffffff; } .pay-subbgcolor { background-color: #454545; } </style> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>--> <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="/static/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="/static/js/jquery.jscrollpane.min.js"></script> <script type="text/javascript" src="/static/js/jquery.nice-select.js"></script> <script type="text/javascript" src="/static/js/bootstrap-js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/js/scrolltopcontrol.js?v=220823"></script> <script type="text/javascript" src="/static/js/common.js?version=6"></script> <script type="text/javascript" src="/static/js/moment/moment.min.js"></script> <script type="text/javascript" src="/static/js/signature_pad/signature_pad.umd.min.js"></script> <!-- Google Tag Manager (확장) start --> <script> /* GTM 전자상거래 코드 (step1) */ window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'begin_checkout', 'ecommerce': { 'checkout': { 'actionField': { 'step': 1, 'step1_mode': 'step1', 'affiliation': 'Donus Pay', }, }, }, }); </script> <!-- Google Tag Manager (확장) end --> <!-- Google Tag Manager (기본 (도너스 사용)) start --> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MK4QNS6'); </script> <!-- Google Tag Manager (기본 (도너스 사용)) end --> <!-- Google Tag Manager (기본 (테넌트 사용)) start --> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N6FP5K6'); </script> <!-- Google Tag Manager (기본 (테넌트 사용)) end --> <!-- Google Analytics (기본) start --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-186427934-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); </script> <!-- Google Analytics (기본) end --> <!-- Google Analytics (확장 (테넌트 사용)) start --> <script> gtag('config', 'UA-186427934-1',{ 'user_id': '', 'custom_map': { 'dimension1': 'userId', 'dimension2': 'email', 'dimension3': 'paymentMethod' }, 'groups': 'ua', }); </script> <!-- Google Analytics (확장 (테넌트 사용)) end --> <!-- Google Analytics (확장 (테넌트 사용)) start --> <script> /* GA 전자상거래 코드 (step1) */ gtag('event', 'begin_checkout', { 'send_to': 'ua', 'checkout_step': 1, 'affiliation': 'Donus Pay', 'non_interaction': true }); </script> <script> const measurement_id = '-'; const setGA4Params = (items, event_label, value, currency, sessionId) => { const baseParams = { 'send_to': 'GA4', 'event_category': 'ecommerce', 'event_action': 'begin_checkout', 'engagement_time_msec': 1, 'ignore_referrer': true, 'session_id': sessionId, 'step1_mode': 'step1' }; return { ...baseParams, ...(currency && { currency }), ...(items && { items }), ...(event_label && { event_label }), ...(value && !isNaN(value) && { value }), }; }; const getGtagValue = (measurement_id, key) => new Promise((resolve, reject) => { gtag('get', measurement_id, key, (value) => { if (value) { resolve(value); } else { reject('No value found'); } }); }); async function sendGA4Event(measurementId, items, event_label, value, currency) { try { const client_id = await getGtagValue(measurementId, 'client_id'); const session_id = await getGtagValue(measurementId, 'session_id'); const gaParams = setGA4Params(items, event_label, value, currency, session_id); gtag('event', 'begin_checkout', gaParams); } catch (error) { console.error(error); } } sendGA4Event(measurement_id); </script> <!-- Google Analytics (확장 (테넌트 사용)) end --> <!-- DAUM ZIPCODE API --> <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script> <!-- PAY COMMON VARIABLE --> <script> var g_tenantcode = "donghaemul"; var g_ismobile = ""; var g_csrf_token = "csrf_donuspay_token"; var g_csrf_hash = "c1bcfd8ac2ce57378f2395f1345f70c7"; var g_callback = $.Callbacks(); var g_paymethodbtnkeyword = "정기:일시"; </script> <!-- PAY COMMON JS --> <script type="text/javascript" src="/js/pay_util.js?v=20241214_v1"></script> <script type="text/javascript" src="/js/pay_service.js?v=20241214_v1"></script> <script>$(document).ready(function() {service.init();});</script> <!-- Facebook Open Graph Data --> <meta property="og:title" content="동물해방물결 후원하기" /> <meta property="og:type" content=" " /> <meta property="og:url" content="https://secure.donus.org/donghaemul/pay/" /> <meta property="og:image" content="https://media.donus.org/MediaFile/donghaemul/page/5bc929a5-7436-46c0-92bb-f06f6ef96eac.jpg" /> <meta property="og:description" content="동물 해방을 위한 한 걸음, 동물해방물결 후원으로 함께하세요!" /> <!-- dropdown menu --> <script> $(document).ready(function() { var dropdownBtn = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdownBtn.length; i++) { dropdownBtn[i].addEventListener("click", function() { this.classList.toggle("down"); if ($(".dropdown-container").hasClass("hidden")) { $(".dropdown-container").removeClass('hidden'); } else { $(".dropdown-container").addClass('hidden'); } }); } }); </script> <!-- dropdown menu --> <script> service.current_productlist = [{"productidx":"10101","parentproductidx":"101","code":"P10101","name":"\ub3d9\ubb3c\ud574\ubc29\ubb3c\uacb0 \ud6c4\uc6d0","pricelist1":"10000,20000,50000","depth":"3","pricelist2":"30000,50000,100000","ispricecustom1":"1","ispricecustom2":"1","userecurring":"1","useonetime":"1","remaincount":"100","minprice1":"10000","minprice2":"10000","unitprice":"0","thumbnailImageUrl":"https:\/\/media.donus.org"}]; function set_step1_default() { if ("P10101" != "") { service.get_dontype = "P10101"; } if ("1" != "") { service.get_period = "1"; } if ("20000" != "") { service.get_price = "20000"; } if ("" == "Y") { service.get_fixprice = "1"; } } var pay_step1agreementtermstitle = "이용약관"; var pay_step1agreementprivacytitle = "개인정보처리방침"; var pay_step1agreement3rdpersontitle = "제3자 제공"; var pay_step1paystartdatedisplay = "0"; var pay_step1paystartdatetitle = "입금예정일"; var login_islogin = ""; var login_name = ""; var login_cellphone = ""; var login_email = ""; var tenantcode = "donghaemul"; var tenantname = "동물해방물결"; var useMyDonus = false; var useSaml = false; var param_name = ""; var param_email = ""; $(function () { $("input[type=\"text\"]").change(function () { this.value = this.value.trim(); }); }); const payMethodsAgreementNeeded = new Set("R001".split(",")); </script> <!-- STEP 1 --> <script type="text/javascript" src="/static/js/step1.js?v=20241214_v1"></script> <script type="text/javascript" src="/js/pay/step1.js?v=20241214_v1"></script> <script type="text/javascript" src="/static/js/nice-direct-agreement.js"></script> <script src="https://nsp.pay.naver.com/sdk/js/naverpay.min.js"></script> <!-- NICE Modules --> <script type="text/javascript" src="/static/js/step1_nice.js?v=20241214_v2"></script> <!-- 아래 js는 PC 결제창 전용 js입니다.(모바일 결제창 사용시 필요 없음) --> <script src="https://web.nicepay.co.kr/v3/webstd/js/nicepay-3.0.js" type="text/javascript"></script> </head> <body class=""> <!-- Google Tag Manager (noscript) --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6FP5K6" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) --> <div id="wrap-donate"> <div id="donate-page-background" class="none-logout"> <!-- ie 10 이하 브라우저 미지원 --> <script> $(function () { var ieVersion = (function () { var version = -1; if ( navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.toLowerCase().indexOf('msie') != -1 && new RegExp('MSIE ([0-9]{1,}[\./0-9]{0,})').exec(navigator.userAgent) != null ) { version = parseInt(RegExp.$1); } return version; })(); if (ieVersion !== -1 && ieVersion < 11) { $("#header-ie10-noti").removeClass('hidden'); }else{ $("#header-ie10-noti").addClass('hidden'); } }); (function checkIeAndRedirectToEdge() { if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) { window.location.href = "microsoft-edge:" + window.location.href; setTimeout(function () { window.location.href = "https://go.microsoft.com/fwlink/?linkid=2151617"; }, 100); } })(); </script> <header> <div id="header-ie10-noti" class="hidden"> <div class="header-ie10-noti-icon"> <span class="numberCircle">!</span> </div> <div class="header-ie10-noti-info"> 인터넷 익스플로러 10 이하에서는 정상적으로 동작하지 않을 수 있습니다.<br/> 브라우저를 최신 버전으로 업데이트하거나 다른 브라우저 사용을 권장드립니다. </div> </div> <div id="header-desktop"> <a href="http://www.donghaemul.com/"> <img src="https://media.donus.org/MediaFile/donghaemul/page/bc2c0a9b-c4fe-4151-ad39-83f2003e97d2.jpg" alt="logo"/> </a> </div> <div id="header-mobile-logo"> <a href="http://www.donghaemul.com/"> <img src="https://media.donus.org/MediaFile/donghaemul/page/efc17c7c-3f60-4678-bb75-86920eb3d9cf.jpg" alt="logo"/> </a> </div> </header> <div id="donate-page-frame"> <div class="donate-page-box"> <div class="donate-page-box-title"><h1>동물해방물결</h1></div> <div class="donate-page-box-description"><p>"느끼는 모두에게 자유를"<br>동물해방물결은 종차별주의 타파하고<br>국내 동물권 의식 및 법제도를 확립하기 위해 활동합니다.</p> </div> </div> <div id="donate-page-left" class="donate-page-left01"> <input type="hidden" id="pagetoken" value="675cbc8c4b0d3"/> <input type="hidden" id="uselogin" value=""/> <div class="donate-inner"> <!-- 0. 로그인 확인 --> <div id="div-login" class="mydonus-box hidden"> <a href="https://my.donus.org" target="_blank"><img src="/static/img/mydonus-logo.png"></a> <p class="mydonus-title"><span id="span-login-name"></span> 님, 안녕하세요?</p> <p class="mydonus-desc"><span id="span-login-account"></span> 로그인되어 있습니다.</p> </div> <!-- 1. 상품정보 --> <div id="div-product"> <div class="form npt product-form"> <fieldset> <div class="line-f2f"> <p class="first-p" style="display: inline-block;">후원 정보</p> <p class="hidden" style="display: inline-block; font-size: 14px; font-weight: 300; color: #2b2b2b; float: right; margin-top: 3px;"></p> </div> <div class="form-row hidden"> <label class="donate-label ">상품분류</label> </div> <div class="form-row"> <label class="donate-label ">후원목록</label> <select id="productcode" class="nice nice04"> <option value="P10101" data-product-name="동물해방물결 후원" selected>동물해방물결 후원</option> </select> </div> <div class="form-row hidden"> <label class="">상세용도</label> <input type="text" id="detailuse" class="input-long-field" placeholder=""/> </div> <div class="form-row form-row05 "> <label class="" >후원주기</label> <ul id="donationmethod_row" class="step_list step_list03 "> <li id="dontype1" role="presentation" class="dtype mr11"> <input type="radio" name="donationmethod" class="radio-donate-type" value="1" id="sum1" checked="checked"> <label for="sum1"><span>정기</span></label> </li> <li id="dontype2" role="presentation" class="dtype"> <input type="radio" name="donationmethod" class="radio-donate-type" value="2" id="sum2"> <label for="sum2"><span>일시</span></label> </li> </ul> </div> <div class="form-row form-row02 form-rowAuto"> <label class="">후원금액</label> <ul id="price_row" class="step_list step_list04 "> </ul> </div> <div class="info-box-container"> <ul class="info-box-content "> <li></li>* 동물해방물결의 모든 캠페인 및 활동, 단체의 지속적인 운영을 위한 후원입니다. <li></li>** 달뜨는보금자리를 위한 '살리미' 후원은 동물해방물결 홈페이지 메인 배너를 클릭해주세요. </ul> </div> </fieldset> </div> </div> <!--2. 구성원정보--> <div id="div-member"> <div class="form npt"> <fieldset> <!--구성원기본정보 영역 제목--> <p class="second-p">회원 정보</p> <!--구성원기본정보 영역 설명--> <p class="third-p"></p> <div id="membertype-row" class="form-row "> <label>구분</label> <ul class="step_list step_list03"> <li role="presentation" class="dtype"> <input type="radio" name="member-type" class="radio-member-type" value="1" id="member-type1-1" checked> <label for="member-type1-1"><span>개인</span></label> </li> <li role="presentation" class="dtype"> <input type="radio" name="member-type" class="radio-member-type" value="2" id="member-type1-2"> <label for="member-type1-2"><span>단체(사업자)</span></label> </li> </ul> </div> <div class="tab-content"> <!--구분 - 개인 - 선택시--> <div role="tabpanel" class="tab-pane active" id="checkout-member-type-person"> <div class="tab-member-type"> <div class="tab-content-M"> <div class="form-row" id="name-row"> <label>이름</label> <input type="text" id="name" class="input-name" maxlength="30" value="" /> <span class="admit-btns admit-is-under14-section"> <span class="admit admit-is-under14"> <input type="checkbox" id="is-under14" autocomplete="off" /> <label for="is-under14" class="check-label check-label01 check-label-is-under14"> <span class="floatl">만 14세 미만</span> </label> </span> <span class="explain-icon explain-icon-under14"> <a class="question_w"><img src="/static/img/service/question-mark_webBg.png" alt="tooltip"/></a> <a class="question_m"><img src="/static/img/service/question-mark_Mbg.png" alt="tooltip"/></a> <div class="explain-text1"> 개인정보보호법에 의해 만 14세 미만 아동의 개인정보 처리 시 법정대리인(보호자)의 동의가 필요합니다. </div> </span> </span> </div> <div class="clearboth"></div> </div> </div> </div> <!--구분 - 단체 - 선택시--> <div role="tabpanel" class="tab-pane" id="checkout-member-type-company"> <div class="tab-member-type"> <div class="tab-content-M"> <div class="form-row" id="company-name-row"> <label>단체명</label> <input type="text" id="company-name" class="input-name" maxlength="30" value=""/> </div> </div> </div> </div> </div> <div class="form-row" id="cellphone-row"> <label>휴대전화</label> <select id="cellphone1" class="nice nice03" data-is-required="1"> <option value="010" >010</option> <option value="011" >011</option> <option value="016" >016</option> <option value="017" >017</option> <option value="018" >018</option> <option value="019" >019</option> </select> <div class="hyphen hyphen01">−</div> <input type="tel" id="cellphone2" pattern="[0-9]*" inputmode="numeric" value="" maxlength="4" autocomplete="off" class="input-call" onkeyup="this.value=this.value.replace(/[^\d]+/, '');if(this.value.length == 4){document.getElementById('cellphone3').focus();}" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <div class="hyphen hyphen01">−</div> <input type="tel" id="cellphone3" pattern="[0-9]*" inputmode="numeric" value="" maxlength="4" autocomplete="off" class="input-call" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> <div class="form-row" id="email-row"> <label>이메일</label> <input type="text" id="email" class="input-email" value="" data-is-required="1"/> </div> <div class="info-box-container"> <ul class="info-box-content "> <li></li>* 법인의 경우 기부금영수증 발급이 불가합니다. <li></li>** 휴대전화와 이메일을 잘못 입력하게 될 경우 동물해방물결에서 보내는 각종 공지와 소식이 누락될 수 있습니다. 맞게 작성하셨는지 꼭 다시 한번 확인해 주세요! </ul> </div> </fieldset> </div> </div> <!-- 2.1. 법정대리인 인증 --> <div id="div-legal-representative" class="hidden"> <div class="form npt"> <fieldset> <!--구성원기본정보 영역 제목--> <p class="second-p">법정대리인(보호자) 정보</p> <p class="third-p"></p> <div class="form-row" id="legal-representative-name-row"> <label>보호자명</label> <input type="text" id="legal-representative-name" class="input-name" maxlength="30" value=""/> </div> <div class="form-row" id="legal-representative-cellphone-row"> <label>휴대전화</label> <select id="legal-representative-cellphone1" class="nice nice03"> <option value="010">010</option> <option value="011">011</option> <option value="016">016</option> <option value="017">017</option> <option value="018">018</option> <option value="019">019</option> </select> <div class="hyphen hyphen01">−</div> <input type="tel" id="legal-representative-cellphone2" pattern="[0-9]*" inputmode="numeric" maxlength="4" autocomplete="off" class="input-call" onkeyup="this.value=this.value.replace(/[^\d]+/, '');if(this.value.length == 4){document.getElementById('legal-representative-cellphone3').focus();}" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <div class="hyphen hyphen01">−</div> <input type="tel" id="legal-representative-cellphone3" pattern="[0-9]*" inputmode="numeric" maxlength="4" autocomplete="off" class="input-call" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> <div class="explain request-legal-representative-otp-button-section"> <a id="request-legal-representative-otp-button" class="explain-name" onclick="service.mypage.requestotp(3, 1);">인증번호 받기</a> <span class="explain-icon"> <a class="question_w"><img src="/static/img/service/question-mark_webBg.png" alt="tooltip"/></a> <a class="question_m"><img src="/static/img/service/question-mark_Mbg.png" alt="tooltip"/></a> <div class="explain-text1"> 입력한 법정대리인(보호자)의<br/> 휴대전화로 인증번호가 발송됩니다. </div> </span> </div> <div class="form-row" id="legal-representative-otp-row"> <label>인증번호</label> <input type="tel" id="otp_legal_representative" pattern="[0-9]*" inputmode="numeric" class="checkout-input-legal-representative-otp" maxlength="6" onkeyup="this.value=this.value.replace(/[^\d]/, '');" onblur="this.value=this.value.replace(/[^\d]/, '');" onkeypress="if (window.event.keyCode == 13){}"/> <a id="confirm-legal-representative-otp-button" class="view-button-h48 confirm-otp-btn" onclick="service.mypage.confirmotp(3, 1);">확인</a> <div class="desc-box legal-representative-desc-box"> <div class="desc-rowAuto content-stress hidden"> <span id="otp_counter_legal_representative">(남은시간:)</span> </div> </div> </div> </fieldset> </div> </div> <!--3. 약정정보--> <div id="div-promise" class=""> <div class="form npt"> <fieldset> <p class="fourth-p">약정 정보</p> <div class="form-row "> <label>후원자 한마디</label> <input type="text" id="contributormemo" class="input-long-field"/> </div> <div class="form-row hidden"> <label>약정메모</label> <input type="text" id="promisememo" class="input-long-field" value=""/> </div> <div class="info-box-container"> <ul class="info-box-content "> <li></li>* 동물해방물결에 하고 싶은 말씀을 적어주세요! </ul> </div> </fieldset> </div> </div> <!--4. 결제정보--> <div id="div-paymethod"> <div class="form-bottom pledge"> <fieldset> <p class="fourth-p">결제 정보</p> <div class="form-row form-row02 form-rowAuto mb0"> <label>결제수단</label> <ul class="step_list step_list04"> <li role="presentation" class="dtype"> <input type="radio" name="paymethodcode1" class="radio-paymethod bank-account-inquiry-request-disabled" value="R001" id="payment1_1" checked> <label for="payment1_1"><span>자동이체</span></label> </li> </ul> </div> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="checkout-method-card"> <div class="tab-pay-card"> <div class="tab-content-M"> <div class="form-row"> <div> <label>카드번호</label> <input type="tel" id="regularcardnumber" placeholder="" class="checkout-input" maxlength="19" autocomplete="off" /> </div> </div> <div class="form-row"> <div> <label>유효기간</label> <div class="idNum-inputSet"> <input type="tel" id="regularcardexpiremonth" placeholder="MM" class="idNum-input idNum-input01" maxlength="2" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <input type="tel" id="regularcardexpireyear" placeholder="YY" class="idNum-input idNum-input02 ml28" maxlength="2" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> <div class="form-row"> <div> <label>카드주명</label> <input type="text" id="regularcardowner" placeholder="" class="checkout-input" maxlength="15" autocomplete="off" onblur="this.value=this.value.replace(/[^a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ\x20]+/, '');"/> </div> </div> <div class="form-row "> <label>생년월일</label> <input type="tel" id="regularcardownerbirthday" placeholder="주민번호 앞 6자리 (또는 사업자번호)" class="checkout-input" maxlength="10" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> <div class="form-row "> <label>비밀번호</label> <input type="password" id="regularcardpassword" placeholder="비밀번호 앞 2자리" autocomplete="off" class="checkout-input" maxlength="2" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> <div class="form-row hidden"> <label>결제일</label> <select id="withdrawalday1" class="nice nice03 nice05"> <option value="5"> 매월 5일 </option> </select> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="checkout-method-cms"> <div class="tab-pay-bank"> <div class="form-row"> <label>은행명</label> <select id="regularbankcode" class="select-bank nice nice04 bank-account-inquiry-request-disabled"> <option value="004">국민은행</option> <option value="999">농협은행</option> <option value="088">신한은행</option> <option value="020">우리은행</option> <option value="027">한국씨티은행</option> <option value="003">IBK기업은행</option> <option value="081">KEB하나은행</option> <option value="023">SC제일은행</option> <option value="039">경남은행</option> <option value="034">광주은행</option> <option value="261">교보증권</option> <option value="031">아이엠뱅크</option> <option value="267">대신증권</option> <option value="055">도이치은행</option> <option value="279">동부증권</option> <option value="287">메리츠종합금융증권</option> <option value="238">미래에셋대우</option> <option value="290">부국증권</option> <option value="032">부산은행</option> <option value="064">산림조합중앙회</option> <option value="002">산업은행</option> <option value="240">삼성증권</option> <option value="050">상호저축은행</option> <option value="045">새마을금고중앙회</option> <option value="007">수협중앙회</option> <option value="291">신영증권</option> <option value="278">신한금융투자</option> <option value="048">신협중앙회</option> <option value="266">SK증권</option> <option value="263">현대차투자증권</option> <option value="292">케이프투자증권</option> <option value="071">우체국</option> <option value="209">유안타증권</option> <option value="280">유진투자증권</option> <option value="265">엘에스투자증권</option> <option value="037">전북은행</option> <option value="057">제이피모간체이스은행</option> <option value="035">제주은행</option> <option value="062">중국공상은행</option> <option value="090">카카오뱅크</option> <option value="089">케이뱅크</option> <option value="092">토스뱅크</option> <option value="264">키움증권</option> <option value="262">하이투자증권</option> <option value="243">한국투자증권</option> <option value="270">하나금융투자</option> <option value="269">한화투자증권</option> <option value="218">KB증권</option> <option value="060">BOA은행</option> <option value="054">HSBC은행</option> <option value="247">NH투자증권</option> <option value="061">BNP파리바은행</option> <option value="294">한국포스증권</option> <option value="288">카카오증권</option> </select> </div> <div class="form-row"> <div> <label>계좌번호</label> <input type="tel" id="regularbankaccount" placeholder="전화번호 형식의 계좌번호 사용 불가" autocomplete="off" class="checkout-input bank-account-inquiry-request-disabled" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> <div class="form-row"> <label>예금주명</label> <input type="text" id="regularbankowner" placeholder="" class="checkout-input bank-account-inquiry-request-disabled" autocomplete="off" onblur="this.value=this.value.replace(/[^a-zA-Z가-힣()]*$/, '');"/> </div> <div class="form-row " id="bank-account-owner-type-row"> <label>예금주구분</label> <ul class="step_list step_list03"> <li role="presentation" class="dtype"> <input type="radio" name="bank-account-owner-type" class="radio-bank-account-owner-type bank-account-inquiry-request-disabled" value="1" id="bank-account-owner-type1-1" checked> <label for="bank-account-owner-type1-1"><span>개인</span></label> </li> <li role="presentation" class="dtype"> <input type="radio" name="bank-account-owner-type" class="radio-bank-account-owner-type bank-account-inquiry-request-disabled" value="2" id="bank-account-owner-type1-2"> <label for="bank-account-owner-type1-2"><span>사업자</span></label> </li> </ul> </div> <div class="tab-content"> <!--예금주구분 - 개인 - 선택시--> <div role="tabpanel" class="tab-pane active" id="checkout-bank-account-owner-type-person"> <div class="tab-bank-account-owner-type"> <div class="tab-content-M"> <div class="form-row"> <label>생년월일</label> <input type="tel" id="regularbankownerbirthday" placeholder="주민번호 앞 6자리" class="checkout-input bank-account-inquiry-request-disabled " autocomplete="off" maxlength="6" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> </div> <!--예금주구분 - 사업자 - 선택시--> <div role="tabpanel" class="tab-pane" id="checkout-bank-account-owner-type-company"> <div class="tab-bank-account-owner-type"> <div class="tab-content-M"> <div class="form-row"> <label>사업자번호</label> <input type="tel" id="cms-business-no" placeholder="" class="checkout-input bank-account-inquiry-request-disabled " autocomplete="off" maxlength="10" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> </div> </div> <div style="clear:both;" class="form-row hidden"> <label>출금일</label> <select id="withdrawalday2" class="nice nice03 nice05"> <option value="5"> 매월 5일 </option> </select> </div> </div> </div> <div class="hidden"> <div id="isPayStartMonthEarly-row" class="form-row admit-btns "> <label>결제옵션</label> <div class="admit admit-is-pay-start-month-early"> <input type="checkbox" id="isPayStartMonthEarly" data-default = "0" /> <label for="isPayStartMonthEarly" class="check-label check-label01 check-label-is-pay-start-month-early" style="height: auto !important; width: auto !important;"> <span>가장 빠른 날짜에 첫 결제하기</span> </label> </div> </div> </div> <div class="info-box-container"> <ul class="info-box-content "> <li>* 현재 정기결제는 자동이체(CMS)만 가능합니다.</li> <li>* 정기출금일은 매월 5일입니다.</li> <li>* 출금 실패 시 15일 또는 말일에 재출금이 시도됩니다.</li> <li>* 후원 첫 달은 5, 15일, 말일 중 가까운 일자에 출금되며, 다음 달부터는 매월 5일에 출금됩니다.</li> <li>* 동물해방물결은 개인 후원자의 기부금영수증 발급이 가능합니다. (개인사업자 가능, 법인 불가)</li> </ul> </div> </div> </fieldset> </div> <div class="form-bottom once"> <fieldset> <p class="fourth-p">결제 정보</p> <div class="form-row form-row02 form-rowAuto mb0 flex"> <ul class="step_list step_list05"> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M001" id="payment2_1" checked="checked"> <label for="payment2_1" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full justify-center align-middle flex items-center">무통장입금</span> </label> </li> </ul> </div> <div class="tab-content"> <!-- 무통장 입금 선택시 --> <div role="tabpanel" class="tab-pane" id="checkout-m001-once"> <div class="hidden"> <div class="flex md:flex-col pt-4"> <!-- <div>--> <label> 입금예정일</label> <!-- </div>--> <div class="flex pt-0 md:pt-1"> <input type="tel" id="paystartdate-year" value="2024" pattern="[0-9]*" inputmode="numeric" maxlength="4" placeholder="YYYY" autocomplete="off" class="input-date" onkeyup="this.value=this.value.replace(/[^\d]+/, '');if(this.value.length == 4){document.getElementById('paystartdate-month').focus();}" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <div class="hyphen hyphen01">−</div> <input type="tel" id="paystartdate-month" value="12" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="MM" autocomplete="off" class="input-date" onkeyup="this.value=this.value.replace(/[^\d]+/, '');if(this.value.length == 2){document.getElementById('paystartdate-day').focus();}" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <div class="hyphen hyphen01">−</div> <input type="tel" id="paystartdate-day" value="14" pattern="[0-9]*" inputmode="numeric" maxlength="2" placeholder="DD" autocomplete="off" class="input-date" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="checkout-method-card-once"> <div class="tab-pay-card"> <div class="tab-content-M"> <div class="form-row"> <div> <label>카드번호</label> <input type="tel" id="onetimecardnumber" placeholder="" class="checkout-input" maxlength="19" autocomplete="off" /> </div> </div> <div class="form-row"> <div> <label>유효기간</label> <div class="idNum-inputSet"> <input type="tel" id="onetimecardexpiremonth" placeholder="MM" class="idNum-input idNum-input01" maxlength="2" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> <input type="tel" id="onetimecardexpireyear" placeholder="YY" class="idNum-input idNum-input02 ml28" maxlength="2" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> <div class="form-row"> <div> <label>카드주명</label> <input type="text" id="onetimecardowner" placeholder="" class="checkout-input" maxlength="15" autocomplete="off" onblur="this.value=this.value.replace(/[^a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ\x20]+/, '');"/> </div> </div> <div class="form-row "> <label>생년월일</label> <input type="tel" id="onetimecardownerbirthday" placeholder="주민번호 앞 6자리 (또는 사업자번호)" class="checkout-input" maxlength="10" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> <div class="form-row "> <label>비밀번호</label> <input type="password" id="onetimecardpassword" placeholder="비밀번호 앞 2자리" autocomplete="off" class="checkout-input" maxlength="2" onkeyup="this.value=this.value.replace(/[^\d]+/, '');" onblur="this.value=this.value.replace(/[^\d]+/, '');"/> </div> </div> </div> </div> </div> <div class="info-box-container"> <ul class="info-box-content "> <li>* 후원금은 아래 계좌로 입금해주세요!</li> <li>* 후원계좌: 신한은행 100-032-648005 동물해방물결</li> <li>* 입금 후 후원이 완료(약정종료)됩니다.</li> <li>* 동물해방물결은 개인 후원자의 기부금영수증 발급이 가능합니다. (개인사업자 가능, 법인 불가)</li> </ul> </div> </fieldset> </div> <div class="admit-wrapper"> <div class="admit-btns full-width"> <div class="admit-all"><input type="checkbox" id="admit-all" value="admit-all"> <label for="admit-all" class="check-label check-label01"> <span class="admit-all-weight">전체 동의하기</span> </label> </div> <div class="admit"> <input type="checkbox" id="admit-1" value="admit-1" name="chk"> <label for="admit-1" class="check-label check-label01"><span>[필수] 이용약관 동의</span> <a href="https://docs.google.com/document/d/1gIvS-SrzfL0D4R-jYd1v5sEJzWFAcY1Vw4hHIc6_4yQ/edit?usp=sharing" target="_blank">[보기]</a> </label> </div> <div class="admit"> <input type="checkbox" id="admit-2" value="admit-2" name="chk"> <label for="admit-2" class="check-label check-label01"><span>[필수] 개인정보처리방침 동의</span> <a href="https://docs.google.com/document/d/166i5EyEq84ipb46--i-B6fZ2bwatIebk4CPcdZZ_qp4/edit?usp=sharing" target="_blank">[보기]</a> </label> </div> <div class="admit hidden"> <input type="checkbox" id="admit-nice-direct" value="admit-nice-direct" name="chk"> <label for="admit-nice-direct" class="check-label check-label01"><span>[필수] 간편결제 이용약관 동의</span> <a class="toggle-agreement-modal nice-direct" href="javascript:void(0);">[보기]</a> </label> </div> </div> </div> <!-- sign-pad --> <div class="signature-pad-section hidden"> <div class="signature-pad-wrapper"> <div class="signature-pad-background" >서 명</div> <canvas id="signature-pad" class="signature-pad" width="320" height="180"></canvas> </div> <div class="signature-pad-rewrite"> <a id="signature-rewrite" href="javascript:void(0)">다시 쓰기</a> </div> </div> <a class="donate-submit submit" onclick="step1Page.proceed();">후원하기</a> </div> </div> </div> </div> </div> <form name="payForm" method="post" action="/donghaemul/pay/finish/nice"> <input type="hidden" name="PayMethod"> <input type="hidden" name="GoodsName"> <input type="hidden" name="Amt"> <input type="hidden" name="MID"> <input type="hidden" name="Moid"> <input type="hidden" name="BuyerName"> <input type="hidden" name="BuyerTel"> <input type="hidden" name="ReturnURL"> <!-- 옵션 --> <input type="hidden" name="VbankExpDate" id="vExp"/> <!-- 가상계좌입금만료일 --> <input type="hidden" name="BuyerEmail"/> <!-- 구매자 이메일 --> <input type="hidden" name="GoodsCl" value="1"/> <!-- 상품구분(실물(1),컨텐츠(0)) --> <input type="hidden" name="TransType" value="0"/> <!-- 일반(0)/에스크로(1) --> <input type="hidden" name="CharSet" value="utf-8"/> <!-- 응답 파라미터 인코딩 방식 --> <input type="hidden" name="ReqReserved" value=""/> <!-- 상점 예약필드 --> <input type="hidden" name="DirectShowOpt"> <input type="hidden" name="DirectEasyPay"> <input type="hidden" name="EasyPayMethod"> <input type="hidden" name="NicepayReserved"> <!-- 변경 불가능 --> <input type="hidden" name="EdiDate"/> <!-- 전문 생성일시 --> <input type="hidden" name="SignData"/> <!-- 해쉬값 --> </form> <!-- google utm --> <input type="hidden" id="utm_source" value=""/> <input type="hidden" id="utm_medium" value=""/> <input type="hidden" id="utm_term" value=""/> <input type="hidden" id="utm_content" value=""/> <input type="hidden" id="utm_campaign" value=""/> <!-- hidden --> <input type="hidden" id="contributor_custom" value=""/> <input type="hidden" id="fixprice" value=""/> <input type="hidden" id="stbvalue" value=""/> <input type="hidden" id="returnURL" value="https://secure.donus.org/donghaemul/pay/finish/nice"/> <input type="hidden" id="motivecode" value=""/> <input type="hidden" id="channelcode" value=""/> <input type="hidden" id="fundraisercode" value=""/> <!-- Pay form --> <div id="global_payform"></div> <!-- 푸터 --> <footer> <div class="footer-pc"> <ul class="company-info-pc"> <li></li>대표 : 이지연 | 전화번호 : 02-554-8835 | 이메일 : donghaemul@donghaemul.com <li></li>주소 : 서울시 종로구 성균관로 19 2층 (우) 03073 | 고유번호 : 411-82-80516 <li></li>후원 : 신한 100 032 648005 동물해방물결 </ul> <div class="footer-pc-logo"> <a href="https://donus.org?utm_source=donusPayStandard&utm_medium=ownedMedia&utm_content=footerLogo&utm_campaign=20180327&utm_term=donghaemul" target="_blank"> <img src="/static/img/donuspay_logo.png" alt="도너스페이 로고"> </a> </div> </div> <div class="footer-mobile"> <div class="company-info-mobile"> <p class="company-info-mobile-title"></p> <p class="company-info-mobile-description">대표 : 이지연 | 전화번호 : 02-554-8835 <br>이메일 : donghaemul@donghaemul.com <br>주소 : 서울시 종로구 성균관로 19 2층 (우) 03073 <br>고유번호 : 411-82-80516 <br>후원 : 신한 100 032 648005 동물해방물결</p> </div> <div class="footer-mobile-logo"> <a href=" https://donus.org?utm_source=donusPayStandard&utm_medium=ownedMedia&utm_content=footerLogo&utm_campaign=20180327&utm_term=donghaemul" target="_blank"> <img src="/static/img/donuspay_logo_m.png" alt="도너스페이 로고"> </a> </div> </div> </footer> </div> <!-- Agreement Modal --> <div class="modal fade" id="modalAgreement" tabindex="-1" role="dialog" aria-labelledby="modalAgreement" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modalTitle">개인정보처리방침 동의</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-25px;"> <span aria-hidden="true">×</span> </button> </div> <div id="modalContent" class="modal-body"> <div id="agreementTextTerms" class="modal-agreement-content hidden"></div> <div id="agreementTextPrivacy" class="modal-agreement-content hidden"></div> <div id="agreementText3rdPerson" class="modal-agreement-content hidden"></div> <div id="agreementDirect" class="modal-agreement-content hidden"></div> </div> <div class="modal-footer"> <button id="modalBtnAgree" type="button" class="btn btn-modal-agree" data-dismiss="modal">동의</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button> </div> </div> </div> </div> </body> <script> const step1CellPhoneDisplay = '1'; const step1EmailDisplay = '1'; const useCardOwnerBirthday = '1'; const useCardPassword = '1'; // 입력 값 변경을 감지하고 이모지를 제거하는 함수 function setCardFormat({target}) { const position = target.selectionStart - 1; target.value = Array.from(target.value.replace(/[^0-9]/g, '')) .reduce((acc, digit, i, arr) => acc + digit + (((i + 1) % 4 === 0 && i < arr.length - 1) ? '-' : ''), ''); const newPosition = target.value.charAt(position) === '-' ? position + 2 : position + 1; target.setSelectionRange(newPosition, newPosition); } document.addEventListener("DOMContentLoaded", function() { const regularCardInput = document.getElementById("regularcardnumber"); const onetimeCardInput = document.getElementById("onetimecardnumber"); regularCardInput.addEventListener('input', setCardFormat); onetimeCardInput.addEventListener('input', setCardFormat); }); </script> </html>