@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/myclass/lecture.css') !!}
@endsection



@section("ielts-content")
<!-- 결제하기 -->
<div class="lecture-wrapper ielts">
    <div class="container lecture-container">
        <div class="path-wrapper pay-path">
            <div class="wrapper">
                <dl class="path">
                    <dt class="blind">path</dt>
                    <dd class="pc-display">전체</dd>
                    <dd class="pc-display">수강신청</dd>
                    <dd class="current">
                        <span class="pc-display">결제하기</span>
                        <a href="javascript:history.back()" class="m-display"><span>결제하기</span></a>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="page-title">주문상품</h2>
            <table class="pay-table pc-display">
                <colgroup>
                    <col style="width:13.6%">
                    <col>
                    <col style="width:28.3%">
                </colgroup>
                <thead>
                    <tr>
                        <th></th>
                        <th>상품명</th>
                        <th>상품가격</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="pay-catagory">어학원</td>
                        <td class="pay-lecture">오전기본반 1개월</td>
                        <td class="pay-price">
                            <button class="pay-coupon-button" onclick="showPop('coupon')">쿠폰선택</button>
                            <span class="pay-price-text">
                                <span class="price">160,000원</span>
                                <em>47%</em>
                                <span class="price-before">260,000원</span>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="wrap-pay-box m-display">
                <div class="pay-box">
                    어학원
                    <strong>오전기본반 1개월</strong>
                </div>
                <div class="pay-box pay-table">
                    <div>
                        <strong>상품가격</strong>
                        <span class="pay-price-text">
                            <span class="price-before">260,000원</span>
                            <span class="price">160,000원</span>
                        </span>
                    </div>
                    <div>
                        <strong>쿠폰할인</strong>
                        <div class="pay-price">
                            <span class="price-discount">0원</span>
                            <button class="pay-coupon-button" onclick="showPop('coupon')">쿠폰선택</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay-wrap">
                <div class="pay-cont">
                    <div class="pay-section">
                        <strong class="pay-title">배송지정보</strong>
                        <div class="table-shipping">
                            <div class="cell-shipping-input address-option">
                                <p class="label-option">
                                    <label for="address-option01">배송지 선택</label>
                                </p>
                                <div class="td-address-option">
                                    <dl class="radio-wrapper">
                                        <dt>배송지 선택</dt>
                                        <dd>
                                            <input type="radio" name="address-option" id="address-option01" class="default" checked>
                                            <label for="address-option01">기본배송지</label>
                                        </dd>
                                        <dd>
                                            <input type="radio" name="address-option" id="address-option02" class="new">
                                            <label for="address-option02">신규배송지</label>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                            <div class="display-address-option default-address show">
                                <p>
                                    <span>대한민국/ 홍길동/ 010-1234-5678</span>
                                    <span>(06241) 서울 강남구 강남대로84길 16</span>
                                </p>
                                <div class="input">
                                    <input id="default-address-detail" name="default-address-detail" type="text" value="6층 edm 에듀케이션" autocomplete="off" disabled>
                                </div>
                                <div class="input">
                                    <input id="m-default-address-message" name="m-default-address-message" type="text" placeholder="배송시 요청사항을 입력해 주세요 (선택)" autocomplete="off">
                                </div> 
                            </div>
                            <div  class="display-address-option new-address">
                                <div class="cell-shipping-input">
                                    <p>
                                        <label class="ncsr" for="shipping-country">배송 국가</label>
                                    </p>
                                    <div>
                                        <div class="select-wrapper">
                                            <!-- 선택 시 인풋 레이어 변경 -->
                                            <select name="shipping-country" id="shipping-country">
                                                <option value="korea" class="korea">대한민국</option>
                                                <option value="abroad" class="abroad">해외</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="display-kor">
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label class="ncsr" for="name">받는 분</label>
                                        </p>
                                        <div>
                                            <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                            <div class="input">
                                                <input id="name" name="name" type="text" placeholder="홍길동" autocomplete="off">
                                                <span class="text-error">받는 분을 입력해 주세요.</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label class="ncsr" for="address">주소</label>
                                        </p>
                                        <div class="td-address">
                                            <div class="address-post-num">
                                                <div class="input">
                                                    <input id="post-num" name="post-num" type="text" placeholder="우편 번호를 검색해 주세요." disabled>
                                                </div>
                                                <button>우편번호 검색</button>
                                            </div>
                                            <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                            <div class="input address-input">
                                                <input id="address" name="address" type="text" disabled>
                                                <span class="text-error">주소를 입력해 주세요.</span>
                                            </div>
                                            <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                            <div class="input">
                                                <input id="address-detail" name="address-detail" type="text" autocomplete="off">
                                                <span class="text-error">상세 주소를 입력해 주세요.</span>
                                            </div>
                                            <div class="check-label-wrapper">
                                                <input type="checkbox" id="chk-default-address" name="chk-default-address">
                                                <label for="chk-default-address">해당 주소를 기본배송지로 설정</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label class="ncsr" for="phone-num01">휴대폰 번호</label>
                                        </p>
                                        <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                        <div class="td-num">
                                            <div>
                                                <div class="input-num-wrap">
                                                    <div>
                                                        <div class="input">
                                                            <input id="phone-num01" name="phone-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="input">
                                                            <input id="phone-num01-2" name="phone-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="input">
                                                            <input id="phone-num01-3" name="phone-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="check-label-wrapper">
                                                <input type="checkbox" id="chk-phone-mine" name="chk-phone-mine">
                                                <label for="chk-phone-mine">회원님 본인 휴대폰 번호</label>
                                            </div>
                                            <span class="text-error">
                                                휴대폰 번호를 입력해 주세요. 
                                            </span>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label for="tel-num01">전화번호</label>
                                        </p>
                                        <div class="td-num">
                                            <div class="input-num-wrap">
                                                <div>
                                                    <div class="input">
                                                        <input id="tel-num01" name="tel-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="input">
                                                        <input id="tel-num01-2" name="tel-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="input">
                                                        <input id="tel-num01-3" name="tel-num" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label for="default-address-message">배송 메시지</label>
                                        </p>
                                        <div>
                                            <div class="input">
                                                <input id="default-address-message" name="default-address-message" type="text" placeholder="50자 이내로 작성 가능합니다." maxlength="50" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="display-abroad">
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label class="ncsr" for="first-name">영문 이름</label>
                                        </p>
                                        <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                        <div class="td-eng-name">
                                            <div class="input">
                                                <input id="first-name" name="eng-name" type="text" placeholder="이름 (First name)" autocomplete="off">
                                            </div>
                                            <div class="input">
                                                <input id="last-name" name="eng-name" type="text" placeholder="성 (Last name)" autocomplete="off">
                                            </div>
                                            <span class="text-error">영문 이름을 입력해 주세요.</span>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p class="th-label-desc">
                                            <label for="kakao-id">
                                                카카오톡 ID
                                                <span class="ncsr text-desc">해외배송알림</span>
                                            </label>
                                        </p>
                                        <div>
                                            <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                            <div class="input">
                                                <input id="kakao-id" name="kakao-id" type="text" autocomplete="off">
                                                <span class="text-error">카카오톡 ID를 입력해 주세요.</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p class="th-label-desc">
                                            <label for="local-phone">
                                                현지 연락처
                                                <span class="ncsr">(휴대폰)</span>
                                            </label>
                                        </p>
                                        <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                        <div class="td-local-phone">
                                            <div>
                                                <div class="select-wrapper">
                                                    <select name="local-phone" id="local-phone">
                                                        <option value="usa">(+1)미국</option>
                                                        <option value="canada">(+1)캐나다</option>
                                                        <option value="korea">(+82)대한민국</option>
                                                        <option value="japan">(+81)일본</option>
                                                        <option value="china">(+86)중국</option>
                                                        <option value="england">(+44)영국</option>
                                                        <option value="germany">(+49)독일</option>
                                                        <option value="france">(+33)프랑스</option>
                                                        <option value="italy">(+39)이탈리아</option>
                                                        <option value="russia">(+7)러시아</option>
                                                        <option value="australia">(+61)호주</option>
                                                        <option value="newzeland">(+64)뉴질랜드</option>
                                                        <option value="india">(+91)인도</option>
                                                        <option value="brazil">(+55)브라질</option>
                                                        <option value="southAfrica">(+27)남아프리카 공화국</option>
                                                        <option value="mexico">(+52)멕시코</option>
                                                        <option value="argentina">(+54)아르헨티나</option>
                                                        <option value="chile">(+56)칠레</option>
                                                        <option value="colombia">(+57)콜롬비아</option>
                                                        <option value="egypt">(+20)이집트</option>
                                                        <option value="nigeria">(+234)나이지리아</option>
                                                        <option value="kenya">(+254)케냐</option>
                                                        <option value="saudiArabia">(+966)사우디아라비아</option>
                                                        <option value="unitedArabEmirates">(+971)아랍에미리트</option>
                                                        <option value="singapore">(+65)싱가포르</option>
                                                        <option value="thailand">(+66)태국</option>
                                                        <option value="vietnam">(+84)베트남</option>
                                                        <option value="philippins">(+63)필리핀</option>
                                                        <option value="hongkong">(+852)홍콩</option>
                                                        <option value="indonesia">(+62)인도네시아</option>
                                                        <option value="etc">기타</option>
                                                    </select>
                                                </div>
                                                <div class="input">
                                                    <input id="local-phone-num" name="local-phone-num" type="number" autocomplete="off">
                                                </div>
                                            </div>
                                            <span class="text-error">휴대폰 번호를 입력해 주세요.</span>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label for="local-post-num">현지 우편번호</label>
                                        </p>
                                        <div>
                                            <div class="input">
                                                <input id="local-post-num" name="local-post-num" type="number" placeholder="정확한 우편번호를 입력해 주세요." autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p class="th-label-desc">
                                            <label>현지 주소</label>
                                        </p>
                                        <div class="td-local-address">
                                            <label for="local-address">주소(City)</label>
                                            <div class="input">
                                                <input id="local-address" name="local-address" type="text">
                                            </div>
                                            <label for="local-address-detail">동 호수(Street Address)</label>
                                            <div class="input">
                                                <input id="local-address-detail" name="local-address-detail" type="text" autocomplete="off">
                                            </div>
                                            <div class="check-label-wrapper">
                                                <input type="checkbox" id="chk-local-address" name="chk-local-address">
                                                <label for="chk-local-address">해당 주소를 기본배송지로 설정</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cell-shipping-input">
                                        <p>
                                            <label for="new-address-message">배송 메시지</label>
                                        </p>
                                        <div>
                                            <div class="input">
                                                <input id="new-address-message" name="new-address-message" type="text" placeholder="50자 이내로 작성 가능합니다." maxlength="50" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pay-section pay-way pc-display">
                        <strong class="pay-title">결제 수단</strong>
                        <ul class="pay-way-list">
                            <li><button>신용카드</button></li>
                            <li><button>계좌이체</button></li>
                            <li><button class="btn-naverpay"><img src="{{ env('AWS_S3_IMG_URL') }}/common/lecture/logo-naverpay.svg" alt="네이버페이"></button></li>
                        </ul>
                    </div>
                    <div class="pay-section">
                        <strong class="pay-title">
                            응시자 정보<span>응시권 수령을 위한 필수 정보를 입력해 주세요.</span>
                        </strong>
                        <div class="table-shipping">
                            <div class="cell-shipping-input">
                                <p>
                                    <label class="ncsr" for="first-name-passport">여권 영문 이름</label>
                                </p>
                                <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                <div class="td-eng-name">
                                    <div class="input">
                                        <input id="first-name-passport" name="eng-name-passport" type="text" placeholder="이름 (First name)" autocomplete="off">
                                    </div>
                                    <div class="input">
                                        <input id="last-name-passport" name="eng-name-passport" type="text" placeholder="성 (Last name)" autocomplete="off">
                                    </div>
                                    <span class="text-error">영문 이름을 입력해 주세요.</span>
                                </div>
                            </div>
                            <div class="cell-shipping-input">
                                <p>
                                    <label class="ncsr" for="kor-name-passport">여권 한글 이름</label>
                                </p>
                                <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                <div class="td-half">
                                    <div class="input">
                                        <input id="kor-name-passport" name="kor-name-passport" type="text" placeholder="홍길동" autocomplete="off">
                                    </div>
                                    <span class="text-error">한글 이름을 입력해 주세요.</span>
                                </div>
                            </div>
                            <div class="cell-shipping-input">
                                <p>
                                    <label class="ncsr" for="birth">여권 생년월일</label>
                                </p>
                                <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                <div class="td-half">
                                    <div class="input">
                                        <input id="birth" name="birth" type="number" placeholder="YYYYMMDD" maxlength="8" autocomplete="off" oninput="maxLengthCheck(this)">
                                    </div>
                                    <span class="text-error">생년월일을 입력해 주세요.</span>
                                </div>
                            </div>
                            <div class="cell-shipping-input">
                                <p>
                                    <label class="ncsr" for="phone-num02">휴대폰 번호</label>
                                </p>
                                <!-- validation msg display: 아래 태그 error 클래스 추가 -->
                                <div class="td-num">
                                    <div>
                                        <div class="input-num-wrap">
                                            <div>
                                                <div class="input">
                                                    <input id="phone-num02" name="phone-num02" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                </div>
                                            </div>
                                            <div>
                                                <div class="input">
                                                    <input id="phone-num02-2" name="phone-num02" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                </div>
                                            </div>
                                            <div>
                                                <div class="input">
                                                    <input id="phone-num02-3" name="phone-num02" type="number" maxlength="4" autocomplete="off" oninput="maxLengthCheck(this)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="check-label-wrapper">
                                        <input type="checkbox" id="chk-phone-mine02" name="chk-phone-mine02">
                                        <label for="chk-phone-mine02">회원님 본인 휴대폰 번호</label>
                                        <span class="text-num-desc m-display">시험신청시 사용할 번호</span>
                                    </div>
                                    <span class="text-error">휴대폰 번호를 입력해 주세요.</span>
                                    <span class="text-num-desc pc-display">시험신청시 사용할 번호</span>
                                </div>
                            </div>
                        </div>
                        <div class="text-ticket-desc">
                            <p>응시권은 국내에서만 사용이 가능하며, 해외에서 신청 시 정가 결제 후 응시권 책정 금액(16만원)이 부분취소로 진행됩니다.</p>
                            <p>마이페이지 &gt; 회원정보 수정에서 웅시자 정보를 변경, 추가하실 수 있습니다.</p>
                        </div>
                    </div>
                </div>
                <div class="pay-article">
                    <div class="pay-article-section pc-display">
                        <strong class="pay-article-title">총 상품금액</strong>
                        <dl class="pay-article-list">
                            <div>
                                <dt>상품금액</dt>
                                <dd>840,000원</dd>
                            </div>
                            <div>
                                <dt>상품할인</dt>
                                <dd>-84,000원</dd>
                            </div>
                            <div>
                                <dt>쿠폰적용</dt>
                                <dd>-70,000원</dd>
                            </div>
                            <div>
                                <dt>총 결제금액</dt>
                                <dd>690,000원</dd>
                            </div>
                        </dl>
                    </div>
                    <div class="pay-article-section">
                        <div class="pay-way m-display">
                            <strong class="pay-title">결제 수단</strong>
                            <ul class="pay-way-list">
                                <li><button>신용카드</button></li>
                                <li><button>계좌이체</button></li>
                                <li><button class="btn-naverpay"><img src="{{ env('AWS_S3_IMG_URL') }}/common/lecture/logo-naverpay.svg" alt="네이버페이"></button></li>
                            </ul>
                        </div>
                        <div>
                            <div class="check-label-wrapper">
                                <input type="checkbox" id="chk-privacy" name="chk-privacy">
                                <label for="chk-privacy">개인정보 수집이용 및 제공 동의(필수)</label>
                                <a href="#none" onclick="showPop('privacy');">보기</a>
                            </div>
                            <div class="check-label-wrapper">
                                <input type="checkbox" id="chk-notice" name="chk-notice">
                                <label for="chk-notice">결제 및 배송 관련 유의사항(필수)</label>
                                <a href="#none" onclick="showPop('notice');">보기</a>
                            </div>
                        </div>
                        <button class="lecture-red-button">결제하기</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 팝업 묶음 -->
    <div class="wrap-pop wrap-pay-pop">
        <div class="bg-pop"  onclick="closePop()"></div>
        <div class="pop pop-coupon">
            <div class="inner-pop">
                <p class="bar-pop-title">
                    <strong>선택상품 쿠폰사용</strong>
                    <button class="btn-pop-close" onclick="closePop()"></button>
                </p>
                <div class="box-price">
                    <span>
                        어학원<strong>오전기본반 1개월</strong>
                    </span>
                    <em>760,000원</em>
                </div>
            </div>
            <div class="cont-pop">
                <p class="tit-cont-coupon">보유쿠폰 <em>1개</em></p>
                <div class="wrap-coupon-list">
                    <ul class="list-coupon">
                        <li>
                            <div class="radio-wrapper">
                                <input type="radio" class="only" id="select-coupon-none" name="coupon" onclick="selectOneCoupon(this);">
                                <label for="select-coupon-none">선택안함</label>
                            </div>
                        </li>
                        <li>
                            <div class="radio-wrapper">
                                <input type="radio" class="only" id="coupon01" name="coupon" onclick="selectOneCoupon(this);" checked>
                                <label for="coupon01">
                                    <span class="text-coupon-desc">
                                        ~24/04/30 까지
                                        <span>[ed:m] [첫구매혜택] 7만원 할인</span>
                                    </span>
                                    <strong>70,000원 할인</strong>
                                    <span>중복사용 불가</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="check-label-wrapper">
                                <input type="checkbox" class="duplicate" id="coupon-duplicate01" name="coupon-duplicate01" onclick="selectDuplicateCoupon();">
                                <label for="coupon-duplicate01">
                                    <span class="text-coupon-desc">
                                        ~24/04/30 까지
                                        <span>[ed:m] [첫구매혜택] 7만원 할인</span>
                                    </span>
                                    <strong>70,000원 할인</strong>
                                    <span>중복사용 가능</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="check-label-wrapper">
                                <input type="checkbox" class="duplicate" id="coupon-duplicate02" name="coupon-duplicate02" onclick="selectDuplicateCoupon();">
                                <label for="coupon-duplicate02">
                                    <span class="text-coupon-desc">
                                        ~24/04/30 까지
                                        <span>[ed:m] [첫구매혜택] 7만원 할인</span>
                                    </span>
                                    <strong>70,000원 할인</strong>
                                    <span>중복사용 가능</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="radio-wrapper">
                                <input type="radio" id="coupon03" name="coupon" disabled>
                                <label for="coupon03">
                                    <span class="text-coupon-desc">
                                        ~24/04/30 까지
                                        <span>[ed:m] [첫구매혜택] 7만원 할인</span>
                                    </span>
                                    <strong>70,000원 할인</strong>
                                    <span>중복사용 불가</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box-result">
                <div class="price-result">
                    <dl>
                        <dt>판매가</dt>
                        <dd>17,160,000원</dd>
                    </dl>
                    <dl>
                        <dt>할인쿠폰</dt>
                        <dd>7110,000원</dd>
                    </dl>
                    <dl>
                        <dt>쿠폰 적용 금액</dt>
                        <dd>690,000원</dd>
                    </dl>
                </div>
                <div class="bottom-result">
                    <p>
                        쿠폰은 적용한 상품 환불 및 취소 시 반환되지 않습니다.<br>
                        쿠폰은 유효기간 내에 적용 가능한 상품에만 이용이 가능합니다.<br>
                        쿠폰은 마이페이지> 쿠폰내역에서 등록하실 수 있습니다. <a href="#none">등록하러가기</a>
                    </p>
                    <button onclick="closePop()">적용</button>
                </div>
            </div>
        </div>
        <!-- 개인정보 수집·이용 및 처리 동의 팝업 -->
        <div class="pop pop-privacy">
            <p class="bar-pop-title">
                <strong>개인정보 수집·이용 및 처리 동의</strong>
                <button class="btn-pop-close" onclick="closePop()"></button>
            </p>
            <div class="cont-pop wrap-text">
                <div>
                    <strong>수집항목</strong>
                    <p class="list-text-pop paragraph">
                        <span>[필수] 이름, 받는 분, 주소, 휴대폰 번호</span>
                        <span>[선택] 전화번호, 배송 메모</span>
                    </p>
                </div>
                <div>
                    <strong>보존 기간</strong>
                    <p class="list-text-pop paragraph">
                        <span>제공된 날로부터 edm 교육그룹이 운영하는 사이트 가입 해지(탈퇴 확정) 시까지</span>
                    </p>
                </div>
                <div>
                    <strong>서비스 제공 위탁업체</strong>
                    <p class="list-text-pop paragraph">
                        <span>[물품 배송] 위탁 업체명: 씨제이대한통운(주), 로젠(주)</span>
                        <span>[전자결제 서비스] 위탁업체명: (주)네이버페이, (주)케이지모빌리언스, 코리아포트원</span>
                        <span>[호스팅 및 동영상 서버 관리] VDOCIPHER </span>
                    </p>
                </div>
                <div>
                    <strong>개인정보 취급 위탁</strong>
                    <p class="list-text-pop paragraph">
                        <span>접속 기기를 제한하기 위해 IP를 수집하여 이용 기기를 식별합니다.</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 결제 및 배송 관련 유의사항 팝업 -->
        <div class="pop pop-notice">
            <p class="bar-pop-title">
                <strong>결제 및 배송 관련 유의사항</strong>
                <button class="btn-pop-close" onclick="closePop()"></button>
            </p>
            <div class="cont-pop wrap-text">
                <div>
                    <strong>환불 접수</strong>
                    <p class="list-text-pop paragraph">
                        <span>환불은 일할 공제금액과 교재 공제금액이 적용됩니다.</span>
                        <span>연락처를 꼭 남겨주셔야 원활한 환불 처리가 이루어질 수 있습니다.</span>
                        <span>환불 신청일은 최초 환불 신청서 접수일로 간주하며, 게시판에서 접수 후 환불 가능 금액을 답글로 남겨드립니다.</span>
                        <span>환불 요청 시 결제에 사용된 포인트 또는 쿠폰은 반납되지 않고 소멸되니 신중하게 결정해 주세요.</span>
                    </p>
                </div>
                <div>
                    <strong>환불 규정</strong>
                    <div class="paragraph">
                        <strong class="title-num">1. 강의 환불</strong>
                        <div class="wrap-text-pop">
                            <em>&#9724; 7일 이내 환불 요청 시</em>
                            [단과 강좌]<br>
                            <p class="list-text-pop paragraph">
                                <span>수강률 50% 미만인 경우 전액 환불, 50% 이상인 경우 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불, 수강률 100%(완강) 시 환불 불가</span>
                                <span>OT/맛보기 강의 제외, 2강 이하 수강 시 : 전액 환불 가능</span>
                                <span>3강 이상 수강 시 : 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불</span>
                            </p>
                            [패키지 강의]<br>
                            <p class="list-text-pop paragraph">
                                <span>OT/맛보기 강의 제외, 2강 이하 수강 시 : 전액 환불 가능</span>
                                <span>3강 이상 수강 시 : 경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불</span>
                            </p>
                        </div>
                        <div class="wrap-text-pop">
                            <em>&#9724; 8일 이내 환불 요청 시</em>
                            [단과 강좌]<br>
                            <p class="list-text-pop paragraph">
                                <span>경과 일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불<br>*단, 수강률 100%(완강) : 환불 불가</span>
                            </p>
                            [패키지 강의]<br>
                            <p class="list-text-pop paragraph">
                                <span>
                                    경과일수(결제일로부터 환불 요청한 날짜까지) 만큼 일할 차감 후 부분 환불<br>
                                    - 단, 수강률 100%(완강) : 환불 불가<br>
                                    * 강의 파일을 다운로드 한 경우 시청 여부와 관계없이 해당 강의는 수강한 것으로 인정합니다.<br>
                                    * 한 강의의 시청 완료 기준은 강의 시간의 80%를 초과 시청 시 수강한 것으로 인정합니다.<br>
                                    * 환불 규정은 사이트 하단 이용약관 내 "제 33조 [회원의 청약철회 불가 시의 환불 규정]"에 따릅니다.
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="paragraph">
                        <strong class="title-num">2. 교재 환불</strong>
                        <div class="wrap-text-pop">
                            교재 환불은 결제일로부터 10일 이내의 사용하지 않은 교재에 한 해 아래 기준에 따라 가능 (강의와 별도로 교재만 따로 환불 불가)<br><br>
                            [결제일로부터 10일 이내 요청 시]
                            <em>◼ 교재가 이미 출고된 경우</em>
                            <p class="list-text-pop paragraph padding-none">
                                <span>환불 처리는 교재 반납 후 교재에 이상이 없는 것을 확인한 후 진행</span>
                                <span>취소된 금액이 입금되는 시점은 카드사마다 상이</span>
                            </p>
                            <em>◼ 교재가 출고되지 않은 경우
                            </em>
                            <p class="list-text-pop paragraph">
                                <span>1:1문의 또는 전화 문의 시 100% 환불</span>
                            </p>
                            [결제일로부터 10일 이후 요청 시] 환불 불가
                        </div>
                    </div>
                </div>
                <div>
                    <strong>유의사항</strong>
                    <p class="list-text-pop paragraph">
                        <span>반납 가능한 교재명을 정확하게 작성해 주세요.</span>
                        <span>캠브리지 교재의 경우 비닐이 뜯겨져 있으면 환불이 불가하며, 비닐이 없는 교재는 사용 흔적, 접힌 흔적 등이 전혀 없어야 합니다.</span>
                        <span>교재 반납을 원하시는 경우 배송비는 본인이 부담해야 합니다.</span>
                        <span>교재 반납하거나, 하지 않는 경우 모두 무료로 진행해 드렸던 배송비 2,900원이 차감되어 최종 환불금이 책정됩니다.</span>
                        <span>교재를 이미 사용하셨거나 파손된 경우 교재비를 공제 후 환불해 드리니 주의 부탁드립니다.</span>
                        <span>교재 반납을 원하시지 않은 경우 환불금액에서 교재비(소비자가 기준)를 공제 후 지급됩니다.</span>
                        <span>결제일로부터 10일이 경과한 교재는 반품 불가</span>
                        <span>응시권의 경우, 이미 영국문화원에 접수/응시 이력이 있거나 유효기간이 지난 경우(구매 후 6개월) 변경/환불이 불가합니다.</span>
                        <span>교재 반납 주소 : 서울특별시 서초구 서초대로 78길 22, 서초홍우빌딩(제2홍우) 6층, edm아이엘츠인강 (배송비 본인 부담)</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- // 결제하기 -->
@endsection



@section('ielts-script')
<script>
    $(document).ready(function () {
        // radio 신규/기존 배송지 선택 시
        $("input[name=address-option]").change(function(){
            var radioChecked = $("input[name=address-option]:checked");
            var radioClassName = $(radioChecked).attr("class");
            if(radioClassName.indexOf("new") == 0) {
                $(".display-address-option").removeClass("show");
                $(".display-address-option.new-address").addClass("show");
            } else {
                $(".display-address-option").removeClass("show");
                $(".display-address-option.default-address").addClass("show");
            }
        });
        // select 배송 국가 국내/해외 선택 시 
        $("select[name=shipping-country]").change(function(){
            var selectChecked = $("select[name=shipping-country] option:selected");
            var selectClassName = $(selectChecked).attr("class");

            if(selectClassName.indexOf("abroad") == 0) {
                $(".display-kor").hide();
                $(".display-abroad").show();
            } else {
                $(".display-abroad").hide();
                $(".display-kor").show();
            }
        });
    });
    // 팝업 열기/닫기
    function showPop(popName) {
        $(".wrap-pop").addClass("show");
        $(".pop").hide();
        $(".pop-"+popName).show();
    }
    function closePop() {
        $(".wrap-pop").removeClass("show");
        $(".pop").hide();
    }
    // input number maxlength 확인
    function maxLengthCheck(object){
        if (object.value.length > object.maxLength){
            object.value = object.value.slice(0, object.maxLength);
        }    
    }
    // 쿠폰 선택 안함,중복 사용 불가 선택 시
    function selectOneCoupon (object) {
        $(object).parents(".list-coupon").find("input").prop('checked',false);
        $(object).prop('checked',true);
    }
    // 쿠폰 중복 사용 가능 선택 시
    function selectDuplicateCoupon () {
        $(".list-coupon input.only").prop('checked',false);
    }
</script>
@endsection