태화복지재단 후원

<!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/taiwha/page/5fa27d5c-831c-4120-acd7-4103e0825ba3.png" type="image/png" /> <style> /* 결제페이지 배경 이미지 */ #donate-page-background {background-image: url(https://cdn.donus.org/media-file/5CD31519-CF8A-4F27-9128-71A5AD11C70C/page/6a883794-d264-44f0-a8ed-63220a945ef4.jpg);} /* 결제페이지 Step3 배경 이미지 */ #donate-confirm-page-background {background-image: url(https://media.donus.org/MediaFile/taiwha/page/b782312b-26cf-40a3-acf7-4a1a651d3248.jpg);} /* 주요 색상: 배경 - 결제페이지 데스크탑 상단 박스 배경색상 */ #nav .member, .donate-page-box, .submit, .submit-100, .btn-modal-agree {background-color: #c8b570;} #donate-page-left, #donate-confirm-left {border-top: 5px solid #c8b570;} /* 주요 색상: 폰트 */ #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: #2b2b2b !important; border: 1px solid #2b2b2b !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: #2b2b2b;} #nav .menu {background-color: #2b2b2b;} #nav .menu li.active {background-color: #2b2b2b;} @media screen and (max-width: 1024px) {#nav {background-color: #2b2b2b;}} /* 보조 색상: 폰트 */ .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: #2b2b2b;} #nav .menu li .dropdown-btn.down {background-color: #c8b570;} #nav .menu .dropdown-container {background-color: #c8b570;} .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/5CD31519-CF8A-4F27-9128-71A5AD11C70C/page/f8809b50-a2b4-4762-9d1b-9d3d3cf88bbd.jpg);} .donate-page-box {background-color: #000; color: #fff;} } /* 마이페이지 로그인 배경 이미지 */ #login-page-background {background-image: url(https://media.donus.org/MediaFile/taiwha/page/2ef0dbe2-eb91-4168-bda5-761a8b9992d3.jpg);} /* 마이페이지 로그인 우측 디스플레이 이미지 */ #login-page-right:before {background-image: url(https://cdn.donus.org/media-file/5CD31519-CF8A-4F27-9128-71A5AD11C70C/page/ed3bf013-8b73-426a-ada3-5b41b233572e.jpg);} /* 마이페이지 배경 이미지 */ #support-page-background {background-image: url(https://cdn.donus.org/media-file/shared/pay/mypage_bg_d.jpg);} #memberinfo-page-right .btn50.confirm {background-color: #c8b570; color: #ffffff !important; border: 1px solid #9c9c9c !important;} /* 마이페이지 약정상세화면 버튼 색상 */ #recordinfo-page-right .btn40.active { background-color: #2b2b2b !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: #2b2b2b !important; color: #ffffff !important;} .pay-subfontcolor { color: #ffffff; } .pay-subbgcolor { background-color: #2b2b2b; } </style>  <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>  <script> /* GTM 전자상거래 코드 (step1) */ window.dataLayer = window.dataLayer || []; dataLayer.push({ 'event': 'begin_checkout', 'ecommerce': { 'checkout': { 'actionField': { 'step': 1, 'step1_mode': 'step1', 'affiliation': 'Donus Pay', }, }, }, }); </script>   <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>     <script async src="https://www.googletagmanager.com/gtag/js?id=-"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); </script>     <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>   <script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>  <script> var g_tenantcode = "taiwha"; var g_ismobile = ""; var g_csrf_token = "csrf_donuspay_token"; var g_csrf_hash = "9b342d86a7a6e4d0925ed18bc029ff24"; var g_callback = $.Callbacks(); var g_paymethodbtnkeyword = "정기후원:일시후원"; </script>  <script type="text/javascript" src="/js/pay_util.js?v=20241125_v1"></script> <script type="text/javascript" src="/js/pay_service.js?v=20241125_v1"></script> <script>$(document).ready(function() {service.init();});</script>  <meta property="og:title" content="태화복지재단" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://taiwhafound.org" /> <meta property="og:image" content="https://media.donus.org/MediaFile/taiwha/page/fdee70ea-b27d-4ceb-b31e-dd17975adfde.png" /> <meta property="og:description" content="소외된 이웃이 없는 따듯한 세상을 꿈꿉니다!" />  <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>  <script> service.current_productlist = [{"productidx":"85647","parentproductidx":"101","code":"G10102","name":"\ud0dc\ud654\ubcf5\uc9c0\uc7ac\ub2e8 \ud574\uc678\uc0ac\uc5c5 \ud6c4\uc6d0","pricelist1":"10000,20000,30000,50000,100000","depth":"3","pricelist2":"10000,20000,30000,50000,100000","ispricecustom1":"1","ispricecustom2":"1","userecurring":"1","useonetime":"1","remaincount":"100","minprice1":"1000","minprice2":"1000","unitprice":"0","thumbnailImageUrl":"https:\/\/media.donus.org"},{"productidx":"92564","parentproductidx":"84301","code":"C10206","name":"\ub77c\uc624\uc2a4 \uc5ec\uc131\uc7a5\uc560\uc778 \uc9c0\uc6d0","pricelist1":"10000,20000,30000,50000,100000","depth":"3","pricelist2":"10000,20000,30000,50000,100000","ispricecustom1":"1","ispricecustom2":"1","userecurring":"1","useonetime":"1","remaincount":"100","minprice1":"1000","minprice2":"1000","unitprice":"0","thumbnailImageUrl":"https:\/\/media.donus.org"},{"productidx":"93601","parentproductidx":"84301","code":"C10207","name":"\uce84\ubcf4\ub514\uc544 \ub4dc\ubcf4\ub77c \ud504\ub85c\uc81d\ud2b8","pricelist1":"10000,20000,30000,50000,100000","depth":"3","pricelist2":"10000,20000,30000,50000,100000","ispricecustom1":"1","ispricecustom2":"1","userecurring":"1","useonetime":"1","remaincount":"100","minprice1":"5000","minprice2":"5000","unitprice":"0","thumbnailImageUrl":"https:\/\/media.donus.org"}]; function set_step1_default() { if ("" != "") { service.get_dontype = ""; } if ("" != "") { service.get_period = ""; } if ("" != "") { service.get_price = ""; } 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 = "taiwha"; 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>  <script type="text/javascript" src="/static/js/step1.js?v=20241125_v1"></script> <script type="text/javascript" src="/js/pay/step1.js?v=20241125_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>  <script type="text/javascript" src="/static/js/step1_nice.js?v=20241125_v2"></script>  <script src="https://web.nicepay.co.kr/v3/webstd/js/nicepay-3.0.js" type="text/javascript"></script> </head> <body class=""> <div id="wrap-donate"> <div id="donate-page-background" class="none-logout">  <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.taiwhafound.org"> <img src="https://media.donus.org/MediaFile/taiwha/page/377911f5-6ab0-4756-9c27-776537e9b872.png" alt="logo"/> </a> </div> <div id="header-mobile-logo"> <a href="http://m.taiwhafound.org/"> <img src="https://media.donus.org/MediaFile/taiwha/page/0fcf4e22-95de-4ac9-be56-50cb6d1f3574.png" 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>태화복지재단 해외사업 후원</p> </div> </div> <div id="donate-page-left" class="donate-page-left01"> <input type="hidden" id="pagetoken" value="674340091f4d3"/> <input type="hidden" id="uselogin" value=""/> <div class="donate-inner">  <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>  <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="G10102" data-product-name="태화복지재단 해외사업 후원" >태화복지재단 해외사업 후원</option> <option value="C10206" data-product-name="라오스 여성장애인 지원" >라오스 여성장애인 지원</option> <option value="C10207" data-product-name="캄보디아 드보라 프로젝트" >캄보디아 드보라 프로젝트</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 "> 본 캠페인의 후원금은 태화복지재단 해외사회복지사업을 통해 소외된 이웃에게 전달됩니다. </ul> </div> </fieldset> </div> </div>  <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="" /> </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="0"/> </div> <div class="info-box-container"> <ul class="info-box-content "> <li>이름, 휴대전화, 이메일을 빠짐없이 입력해주세요.</li> <li>후원내역 확인 등 마이페이지 이용 시 꼭 필요한 정보입니다.</li> </ul> </div> </fieldset> </div> </div>  <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>  <div id="div-promise" class="hidden"> <div class="form npt"> <fieldset> <p class="fourth-p">약정정보</p> <div class="form-row hidden"> <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 hidden"> </ul> </div> </fieldset> </div> </div>  <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="R015" id="payment1_1" checked> <label for="payment1_1"><span>신용카드</span></label> </li> <li role="presentation" class="dtype"> <input type="radio" name="paymethodcode1" class="radio-paymethod bank-account-inquiry-request-disabled" value="R001" id="payment1_2" > <label for="payment1_2"><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 "> <label>결제일</label> <select id="withdrawalday1" class="nice nice03 nice05"> <option value="15"> 매월 15일 </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 "> <label>출금일</label> <select id="withdrawalday2" class="nice nice03 nice05"> <option value="15"> 매월 15일 </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>* 정기출금일은 <b>매월 15일</b>입니다.</li> <li>* 당월 정기출금일에 출금되지 않은 경우, <b>20일, 25일</b>에 재출금이 시도됩니다.</li> <li>* 첫 후원금은 가입일과 가장 가까운 출금일에 결제됩니다.</li> <li>* 자동이체(CMS)는 출금 동의를 위한 ARS 인증 절차가 필요합니다.</li> <li>* <b>신청 완료 후 ARS 인증 전화가 연결되오니, 안내되는 음성메시지를 확인하신 후 1번을 눌러 동의해주시기 바랍니다.</b></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="M032" 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> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M031" id="payment2_2" > <label for="payment2_2" 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> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M001" id="payment2_3" > <label for="payment2_3" 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> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M03A" id="payment2_4" > <label for="payment2_4" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full flex justify-center items-center"> <img class="h-1/2" src="/static/img/logos/logo-npay.svg" alt="네이버 페이"> </span> </label> </li> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M03B" id="payment2_5" > <label for="payment2_5" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full flex justify-center items-center"> <img class="h-1/2" src="/static/img/logos/logo-kakaopay.svg" alt="카카오 페이"> </span> </label> </li> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M03C" id="payment2_6" > <label for="payment2_6" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full flex justify-center items-center"> <img class="h-1/2" src="/static/img/logos/logo-payco.svg" alt="Payco"> </span> </label> </li> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M03D" id="payment2_7" > <label for="payment2_7" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full flex justify-center items-center"> <img class="h-1/2" src="/static/img/logos/logo-samsungpay.svg" alt="삼성페이"> </span> </label> </li> <li role="presentation" class="pay-dtype"> <input type="radio" name="paymethodcode2" class="radio-paymethod-once" value="M03E" id="payment2_8" > <label for="payment2_8" class="leading-none inline-block flex items-center justify-center h-full"> <span class="inline-block h-full flex justify-center items-center"> <img class="h-1/2" src="/static/img/logos/logo-applepay.svg" alt="애플페이"> </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">  <label> 입금예정일</label>  <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="11" 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="25" 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><b>[무통장입금]은 아래의 계좌로 이체를 먼저 완료하신 후,</li> <li>[후원하기] 버튼을 눌러 진행해주세요.</b></li><br> <b>* 무통장입금(계좌이체) 계좌안내</b><br> - 국민은행 : 006001-04-107085<br> - 우리은행 : 1005-701-764194<br> - 신한은행 : 100-028-194078<br> - 농협 : 301 - 0109-9311-51<br> <br> <li><b>※ 입금 후 꼭 연락주시기 바랍니다. [02-733-9592]</b></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://taiwhafound.org/?mode=policy" 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://taiwhafound.org/?mode=privacy" 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>  <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="/taiwha/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"/>  <input type="hidden" name="TransType" value="0"/>  <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>  <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=""/>  <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/taiwha/pay/finish/nice"/> <input type="hidden" id="motivecode" value=""/> <input type="hidden" id="channelcode" value=""/> <input type="hidden" id="fundraisercode" value=""/>  <div id="global_payform"></div>  <footer> <div class="footer-pc"> <ul class="company-info-pc"> <li>단체명: 사회복지법인 감리회 태화복지재단 | 대표자: 김정석 | 사업자등록번호: 101-82-01875</li><li>주소: 서울특별시 종로구 인사동5길 29 태화빌딩 2층 | Tel: 02-733-9597 | Fax: 02-733-3889</li> </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=taiwha" 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">사업자등록번호: 101-82-01875<br>Tel: 02-733-9597 | Fax: 02-733-3889</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=taiwha" target="_blank"> <img src="/static/img/donuspay_logo_m.png" alt="도너스페이 로고"> </a> </div> </div> </footer> </div>  <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>

CINXE.COM

태화복지재단 후원