style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077
							<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : OrderFormWeb.html
 * @desc    : 주문/결제 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.01   jsh77b     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<div id="container" class="container od">
	<div class="wrap">
		<div class="content odPayment">
			<!-- 페이지특정 클래스 = odPayment -->
			<div class="cont_head">
				<h2>주문/결제</h2>
				<div class="oder_steps">
					<ul>
						<li>01 쇼핑백</li>
						<li class="on">02 주문/결제</li>
						<li>03 주문완료</li>
					</ul>
				</div>
			</div>
			<div class="cont_body">
				<!-- CONT-BODY -->
				<div class="od_cont">
					<form class="form_wrap">
						<div class="sec_head">
							<div class="tbl type4">
								<table>
									<colgroup>
										<col width="240">
										<col width="*">
									</colgroup>
									<tbody>
										<tr>
											<th>총 <span class="number">8</span> 건으로 나뉘어 배송 예정</th>
											<td><span> 총알배송<em class="number">2</em>건
											</span> <span> STYLE24<em class="number">2</em>건
											</span> <span> 업체직배송<em class="number">1</em>건
											</span> <span> 예약배송<em class="number">2</em>건
											</span></td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="sec_body">
							<!-- -->
							<div class="foldGroup">
								<ul>
									<li class="fold_mbinfo">
										<!-- 주문고객정보 -->
										<div class="fold_head">
											<a href="javascript:void(0)">
												<div>
													<div class="fold_tit">
														<span>주문고객</span>
													</div>
													<div class="data">
														<span>홍길동</span> <span>abcdefg@naver.com</span> <span>010-1234-5647</span>
													</div>
												</div>
											</a>
										</div>
										<div class="fold_cont" style="display: none;">
											<div class="area_mbinfo">
												<dl>
													<div>
														<dt>
															<span class="sr-only">주문자명</span>
														</dt>
														<dd>홍길동</dd>
													</div>
													<div>
														<dt>
															<span class="sr-only">이메일</span>
														</dt>
														<dd>abcdefg@naver.com</dd>
													</div>
													<div>
														<dt>
															<span class="sr-only">휴대폰 번호</span>
														</dt>
														<dd>010-1234-5647</dd>
													</div>
												</dl>
											</div>
										</div> <!-- //주문고객정보 -->
									</li>
									<li class="fold_mbinfo">
										<!-- 배송지정보 -->
										<div class="fold_head">
											<a href="javascript:void(0)">
												<div>
													<div class="fold_tit">
														<span>배송지 정보</span>
													</div>
													<div class="data">서울시 영등포구 은행로 11,8층(여의도동,일신빌딩)</div>
												</div>
											</a>
										</div>
										<div class="fold_cont" style="display: none;">
											<div class="area_receiveinfo">
												<dl>
													<div>
														<dt>
															<span class="sr-only">배송지명</span>
														</dt>
														<dd>
															홍길동 <span class="icon_tag"> <em class="tag gray">기본
																	배송지</em> <em class="tag primary_line">총알배송</em>
															</span>
														</dd>
													</div>
													<div>
														<dt>
															<span class="sr-only">배송주소</span>
														</dt>
														<dd>
															서울시 영등포구 은행로 11,8층(여의도동,일신빌딩)
															<button type="button" class="btn btn_default btn_sm"
																id="btn_adrsChange_pop">
																<span>배송지 변경</span>
															</button>
														</dd>
													</div>
													<div>
														<dt>
															<span class="sr-only">휴대폰 번호</span>
														</dt>
														<dd>010-1234-5647</dd>
													</div>
													<div>
														<dt>배송요청 사항</dt>
														<dd>
															직접받고 부재 시 문앞
															<button type="button" class="btn_underline"
																id="btn_rqstModify_pop">
																<span>변경하기</span>
															</button>
														</dd>
													</div>
												</dl>
											</div>
											<!-- 해외배송상품일 경우 노출 -->
											<div class="area_overseas">
												<dl>
													<div>
														<dt>개인통관고유부호</dt>
														<dd>
															<div class="form_field">
																<div>
																	<input type="radio" name="rdi-overseas"
																		id="rdi-overs1" value="" checked=""> <label
																		for="rdi-overs1"><span>받는사람 개인통관고유부호</span></label>
																</div>
																<div>
																	<input type="radio" name="rdi-overseas"
																		id="rdi-overs2" value=""> <label
																		for="rdi-overs2"><span>입력 안 함</span></label>
																</div>
																<div class="info_box overs1">
																	<div class="input_wrap">
																		<input type="text" class="form_control err"
																			maxlength="13" placeholder="P로 시작하는 13자리">
																		<!-- 유효하지 않은 개인통관고유부호 일때 class명 'err' 추가 -->
																	</div>
																	<div class="t_err">개인통관고유부호가 유효하지 않습니다.</div>
																	<!-- 유효하지 않은 개인통관고유부호 일때 노출 -->
																	<div class="agree_overs">
																		<input id="chk-overs-agr" type="checkbox" checked="">
																		<label for="chk-overs-agr"><span>위
																				정보는 원활한 통관을 위해 수집 및 판매자에게 제공하며,계속 사용하도록 안전하게
																				STYLE24에서 저장 / 관리 합니다.&nbsp;&nbsp;<em
																				class="tmark_required">(필수)</em>
																		</span></label>
																	</div>
																</div>
																<div class="info_box overs2" style="display: none;">
																	<p>개인통관고유부호를 입력하지 않아도 관세사무소에서 개인정보 확인을 위해 별도 연락을
																		드릴 예정입니다.</p>
																</div>
															</div>
															<div class="info_txt">
																<ul>
																	<li>물품가액이 $150초과할 경우 관/부과세가 발생 할 수 있습니다.</li>
																	<li>물품 종류와 해외공급자 관계없이 같은 날 입항하게 되면 합산과세 대상이 됩니다.</li>
																</ul>
															</div>
														</dd>
													</div>
												</dl>
											</div>
											<!-- //해외배송상품일 경우 노출 -->
											<!-- 주문제작상품일 경우 노출 -->
											<div class="area_customitem">
												<div class="form_field">
													<div class="agree_custom">
														<input id="chk-custom-agr1" type="checkbox" checked="">
														<label for="chk-custom-agr1"><span>고객님께서
																주문하신 상품에는 주문제작상품이 포함되어 있습니다.<br>주문제작상품에 대한 안내를
																확인하였으며 배송에 동의합니다.&nbsp;&nbsp;<em
																class="tmark_required">(필수)</em>
														</span></label>
													</div>
												</div>
												<div class="info_txt">
													<ul>
														<li>주문 제작 상품은 주문 후 제작이 진행되며, 제작 완료 후 배송이 시작됩니다.</li>
														<li>주문 제작 상품의 특성상 주문 완료 후 취소/교환이 불가능합니다. (상품 하자에 한해
															가능)</li>
													</ul>
												</div>
											</div>
											<!-- //주문제작상품일 경우 노출 -->
										</div> <!-- //배송지정보 -->
									</li>
									<li>
										<!-- 사은품선택 -->
										<div class="fold_head">
											<a href="javascript:void(0)">
												<div>
													<div class="fold_tit">
														<span>사은품 선택</span>
													</div>
													<div class="data">
														<span>사은품 총 <em class="total_gift">2</em>개 선택
														</span> <span><em class="total_deduct">0</em>P 차감</span>
													</div>
												</div>
											</a>
										</div>
										<div class="fold_cont" style="display: none;">
											<div class="area_selgift">
												<div class="gift_box">
													<p class="txt">
														<span>사은품선택1</span> TBJ 남성 제기장 스웨이드 트러커 자켓 에서 주는 사은품
													</p>
													<div class="form_field">
														<div class="gift">
															<input type="radio" name="rdi-gift1" id="rdi-gift1"
																class="chk_img" value=""> <label
																for="rdi-gift1"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
																<span class="name">유니 NBA 팀로고 양말 (N215AO225P)</span> <span
																class="deduct">무료</span>
															</label>
														</div>
														<div class="gift">
															<input type="radio" name="rdi-gift1" id="rdi-gift2"
																class="chk_img" value=""> <label
																for="rdi-gift2"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
																<span class="name">사은품이름</span> <span class="deduct">-4,000P</span>
															</label>
														</div>
														<div class="gift">
															<input type="radio" name="rdi-gift1" id="rdi-gift3"
																class="chk_img" value=""> <label
																for="rdi-gift3"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
																<span class="name">사은품이름</span> <span class="deduct">-4,000P</span>
															</label>
														</div>
														<div class="gift">
															<input type="radio" name="rdi-gift1" id="rdi-gift4"
																class="chk_img" value=""> <label
																for="rdi-gift4"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift_empty.jpg" width=""
																	alt=""></span> <span class="name">사은품 수령안함</span> <span
																class="deduct">수령거부</span>
															</label>
														</div>
													</div>
												</div>
												<div class="gift_box">
													<p class="txt">
														<span>사은품선택2</span> 10만원 이상 구매시 사은품
													</p>
													<div class="form_field">
														<div class="gift">
															<input type="radio" name="rdi-gift2" id="rdi-gift11"
																class="chk_img" value=""> <label
																for="rdi-gift11"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
																<span class="name">유니 NBA 팀로고 양말 (N215AO225P)</span> <span
																class="deduct">무료</span>
															</label>
														</div>
														<div class="gift">
															<input type="radio" name="rdi-gift2" id="rdi-gift12"
																class="chk_img" value=""> <label
																for="rdi-gift12"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift1.jpg" width="" alt=""></span>
																<span class="name">사은품이름</span> <span class="deduct">-4,000P</span>
															</label>
														</div>
														<div class="gift">
															<input type="radio" name="rdi-gift2" id="rdi-gift13"
																class="chk_img" value=""> <label
																for="rdi-gift13"> <span class="thumb"><img
																	src="/images/pc/thumb/tmp_gift_empty.jpg" width=""
																	alt=""></span> <span class="name">사은품 수령안함</span> <span
																class="deduct">수령거부</span>
															</label>
														</div>
													</div>
												</div>
												<div class="form_field">
													<div class="agree_gift">
														<p>
															<input id="chk-agree_gift" type="checkbox"><label
																for="chk-agree_gift"><span>동의합니다</span></label>
														</p>
														<p class="txt">
															사은품 지금에 대한 내용을 확인하였으며, 이에 동의합니다.
															<button type="button" class="btn_underline"
																id="btn_infoGift_pop">
																<span>보기</span>
															</button>
														</p>
													</div>
												</div>
											</div>
										</div> <!-- //사은품선택 -->
									</li>
									<li>
										<!-- 할인/혜택 사용 -->
										<div class="fold_head on">
											<a href="javascript:void(0)">
												<div>
													<div class="fold_tit">
														<span>할인/혜택 사용</span>
													</div>
													<div class="data maxdisc">
														<div class="form_field">
															<input id="chk-maxdisc" type="checkbox" checked="">
															<label for="chk-maxdisc"><span>최대 할인혜택을
																	바로 적용하세요!</span>&nbsp;<span class="maxdisc_amount">(<em>-3,000</em>원
																	할인)
															</span></label>
														</div>
													</div>
												</div>
											</a>
										</div>
										<div class="fold_cont" style="display: block;">
											<div class="area_seldiscount">
												<dl>
													<div>
														<dt>할인쿠폰</dt>
														<dd>
															<div class="sale_coupon_box">
																<div>
																	<span class="maxdisc_amount">총&nbsp;<em>-3,000</em>원
																		할인
																	</span>
																	<button id="btn_couponModify_pop"
																		class="btn btn_default btn_sm">
																		<span>쿠폰변경</span>
																	</button>
																</div>
																<div class="form_field">
																	<div class="input_wrap">
																		<input type="text" class="form_control"
																			maxlength="13" placeholder="할인코드를 입력해주세요.">
																		<button type="button" class="btn btn_dark btn_sm">
																			<span>적용</span>
																		</button>
																	</div>
																</div>
															</div>
														</dd>
													</div>
													<div>
														<dt>배송비 쿠폰</dt>
														<dd>
															<div class="dlvr_fee_box">

																<div class="form_field">
																	<div class="select_custom coupon_list">
																		<div class="combo">
																			<div class="select">
																				<div class="dlvr_coupon">
																					<p class="empty">선택</p>
																				</div>
																			</div>
																			<ul class="list" style="display: none;">
																				<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true"추가  -->
																				<li class="selected">
																					<div class="dlvr_coupon">
																						<p class="name">TBJ 배송비 무료쿠폰</p>
																						<p class="txt">
																							<span>30,000</span>원 이상 구매시 최대 <span>3,000</span>원
																							할인
																						</p>
																						<p class="discount">
																							<span>15,000</span>원 할인
																						</p>
																					</div>
																				</li>
																				<li>
																					<div class="dlvr_coupon">
																						<p class="name">TBJ 배송비 무료쿠폰</p>
																						<p class="txt">
																							<span>30,000</span>원 이상 구매시 최대 <span>3,000</span>원
																							할인
																						</p>
																						<p class="discount">
																							<span>15,000</span>원 할인
																						</p>
																					</div>
																				</li>
																				<li>
																					<div class="dlvr_coupon">
																						<p class="name">TBJ 배송비 무료쿠폰</p>
																						<p class="txt">
																							<span>30,000</span>원 이상 구매시 최대 <span>3,000</span>원
																							할인
																						</p>
																						<p class="discount">
																							<span>15,000</span>원 할인
																						</p>
																					</div>
																				</li>
																				<li aria-disabled="true">
																					<div class="dlvr_coupon">
																						<p class="name">TBJ 배송비 무료쿠폰</p>
																						<p class="txt">
																							<span>30,000</span>원 이상 구매시 최대 <span>3,000</span>원
																							할인
																						</p>
																						<p class="discount">
																							<span>15,000</span>원 할인
																						</p>
																					</div>
																				</li>
																				<li>
																					<div class="dlvr_coupon">
																						<p class="empty">적용 안함</p>
																					</div>
																				</li>
																			</ul>
																		</div>
																	</div>
																</div>

															</div>
														</dd>
													</div>
												</dl>
											</div>
											<div class="area_selpoint">
												<dl>
													<div>
														<dt>선 포인트 사용</dt>
														<dd>
															<div class="form_field">
																<div>
																	<input type="radio" name="rdi-beforpoint"
																		id="rdi-beforpoint1" value="" checked=""> <label
																		for="rdi-beforpoint1"><span>사용 안함</span></label>
																</div>
																<div>
																	<input type="radio" name="rdi-beforpoint"
																		id="rdi-beforpoint2" value=""> <label
																		for="rdi-beforpoint2"><span>사용함</span></label> <span
																		class="useable_point">(<em>1,500P</em>&nbsp;사용
																		가능)
																	</span>
																</div>
															</div>
														</dd>
													</div>
													<div>
														<dt>스타일 포인트</dt>
														<dd>
															<div class="form_field">
																<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
																<div class="input_wrap">
																	<input type="text" class="form_control" maxlength=""
																		placeholder="사용할 포인트를 입력해주세요.">
																	<button type="button" class="btn btn_dark btn_sm">
																		<span>적용</span>
																	</button>
																</div>
																<!-- 스타일 포인트 3만원 이상 결제시 노출 -->
																<!-- 스타일 포인트 3만원 미만 결제시 노출 -->
																<div class="input_wrap">
																	<input type="text" class="form_control" maxlength=""
																		placeholder="3만원 이상 결제시에만 포인트 사용이 가능합니다."
																		disabled="">
																	<button type="button" class="btn btn_dark btn_sm">
																		<span>적용</span>
																	</button>
																</div>
																<!-- //스타일 포인트 3만원 미만 결제시 노출 -->
																<p>
																	<span class="remain_point">보유:&nbsp;<em>25,500</em>P
																	</span>(결제금액의 최대 40%까지 사용가능)
																</p>
															</div>
														</dd>
													</div>
													<div>
														<dt>상품권</dt>
														<dd>
															<div class="form_field">
																<div class="input_wrap">
																	<input type="text" class="form_control" maxlength=""
																		placeholder="사용할 금액을 입력해주세요.">
																	<button type="button" class="btn btn_dark btn_sm">
																		<span>적용</span>
																	</button>
																</div>
																<p>
																	<span class="remain_point">보유:&nbsp;<em>25,500</em>원
																	</span>
																</p>
																<div class="agree_receipt">
																	<input id="chk-receipt" type="checkbox"> <label
																		for="chk-receipt"><span>상품권 현금영수증 신청</span></label>
																	<div class="info_box">
																		<div class="input_wrap">
																			<input type="text" class="form_control"
																				maxlength="11" placeholder="">
																		</div>
																	</div>
																</div>
															</div>
														</dd>
													</div>
												</dl>
											</div>
										</div> <!-- //할인/혜택 사용 -->
									</li>
									<li class="fold_paymethod">
										<!-- 결제수단 선택 -->
										<div class="fold_head">
											<a href="javascript:void(0)">
												<div>
													<div class="fold_tit">
														<span>결제수단 선택</span>
													</div>
													<div class="data">
														<span>신용카드</span>
													</div>
												</div>
											</a>
										</div>
										<div class="fold_cont" style="display: none;">
											<div class="area_paymethod">
												<div class="form_field">
													<div class="paymethod_box">
														<ul class="sel_method">
															<li><input type="radio" name="rdi-paynormal"
																id="payCreditCard" value="" checked="checked">
																<label for="payCreditCard"><span>신용카드</span></label></li>
															<li><input type="radio" name="rdi-paynormal"
																id="payCellphone" value=""> <label
																for="payCellphone"><span>휴대폰 결제</span></label></li>
															<li><input type="radio" name="rdi-paynormal"
																id="payKakao" value=""> <label for="payKakao"><span><em
																		class="sr-only">카카오페이 결제</em><em
																		class="payimg kakao"></em></span></label></li>
															<li><input type="radio" name="rdi-paynormal"
																id="payNaver" value=""> <label for="payNaver"><span><em
																		class="sr-only">네이버페이 결제</em><em
																		class="payimg naver"></em></span></label></li>
															<li><input type="radio" name="rdi-paynormal"
																id="payPayco" value=""> <label for="payPayco"><span><em
																		class="sr-only">페이코 결제</em><em class="payimg payco"></em></span></label>
															</li>
															<li><input type="radio" name="rdi-paynormal"
																id="payRealBank" value=""> <label
																for="payRealBank"><span>실시간계좌이체</span></label></li>
															<li><input type="radio" name="rdi-paynormal"
																id="payVirtualBank" value=""> <label
																for="payVirtualBank"><span>무통장입금</span></label></li>
														</ul>
													</div>
												</div>
												<div class="form_field">
													<div class="agree_paymethod">
														<input id="chk-agree_paymethod" type="checkbox">
														<label for="chk-agree_paymethod"> <span>선택한
																결제수단으로 향후 결제 이용에 동의합니다.&nbsp;&nbsp;<em
																class="tmark_optional">(선택)</em>
														</span>
														</label>
													</div>
												</div>
												<div class="form_field">
													<div class="agree_insurance">
														<input id="chk-insurance" type="checkbox"> <label
															for="chk-insurance"> <span>소비자 피해 보상보험
																신청&nbsp;&nbsp;<em class="tmark_optional">(선택)</em>
														</span> <a href="" class="btn_underline"><span>FAQ확인</span></a>
														</label>
														<p>
															‘전자상거래 등에서의 소비자보호에 관한 법률‘에 따라 현금 결제 시 서울보증보험㈜가 제공하는 소비자
															피해보상보험을<br>신청할 수 있도록 해드리고 있습니다. (2013.11.28부터 시행)
														</p>
													</div>
												</div>
											</div>
										</div> <!-- //결제수단 선택 -->
									</li>
								</ul>
							</div>
							<div class="area_paymentinfo">
								<div class="paymentinfo">
									<div class="payinfo_blk">
										<a href=""> 개인정보 제공에 대한 동의 <span>보기</span>
										</a>
										<div class="infotxt">개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의 내용입니다.개인정보제공에 대한 동의
											내용입니다.개인정보제공에 대한 동의 내용입니다.</div>
									</div>
									<div class="payinfo_blk">
										<a href=""> 결제대행 서비스 약관 동의 <span>보기</span>
										</a>
										<div class="infotxt">결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의 내용입니다.결제대행서비스 약관 동의
											내용입니다.결제대행서비스 약관 동의 내용입니다.</div>
									</div>
								</div>

								<div class="agree_payment">위 주문내역을 확인 하였으며, 회원 본인은 결제에
									동의합니다.</div>
							</div>
							<div class="area_paybtn">
								<div class="form_field">
									<button type="button" class="btn btn_primary btn_block">
										<span>동의 후 <em>123,456,789원</em> 결제하기
										</span>
									</button>
								</div>
							</div>
						</div>
					</form>


				</div>
				<div class="od_side">
					<div class="area_order">
						<div class="tit_box">
							<h3>주문내역</h3>
							<span> <em class="number">14</em>개의 상품
							</span>
						</div>
						<div class="od_item_box">
							<!-- 총알배송 -->
							<div class="part_dlvr">
								<h4 class="subH3">
									STYLE24 총알배송 <span>오늘 자정까지 도착</span>
								</h4>
								<div class="gd_list">
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
								</div>
							</div>
							<!-- //총알배송 -->
							<!-- 일반배송 -->
							<div class="part_dlvr">
								<h4 class="subH3">STYLE24 일반배송</h4>
								<div class="gd_list">
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
								</div>
							</div>
							<!-- //일반배송 -->
							<!-- 업체직배송 -->
							<div class="part_dlvr">
								<h4 class="subH3">업체직배송</h4>
								<div class="gd_list">
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
								</div>
								<div class="gd_list">
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide2.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
									</div>
								</div>
							</div>
							<!-- //업체직배송 -->
							<!-- 예약배송 -->
							<div class="part_dlvr">
								<h4 class="subH3">예약배송</h4>
								<div class="gd_list">
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
										<p class="info_reserv">
											<i class="ico ico_calender"></i><span>2021.01.15</span>
											배송예정상품
										</p>
									</div>
									<div class="item_gd">
										<figure>
											<span class="thumb"><img
												src="/images/pc/thumb/tmp_odSide1.jpg" alt=""></span>
											<figcaption>
												<div class="brand">CURLYSUE 컬리수</div>
												<div class="name">[★2020 겨울신상★] 리버시블 경량점퍼 CPW0XQJM51
													[겨울] 리버시블 경량점퍼 CPW0XQJM51 [겨울]</div>
												<div class="option">
													<span>01_루돌프융기모상하복_D오렌지/110</span> <span>수량:<em>99</em>개
													</span>
												</div>
												<div class="price">
													<span class="selling_price">1,000,000</span>
												</div>
											</figcaption>
										</figure>
										<p class="info_reserv">
											<i class="ico ico_calender"></i><span>2021.01.15</span>
											배송예정상품
										</p>
									</div>
								</div>
							</div>
							<!-- //예약배송 -->
						</div>
						<div class="od_amount_box">
							<dl>
								<div>
									<dt>상품금액</dt>
									<dd>1,590,000 원</dd>
								</div>
								<div>
									<dt>배송비</dt>
									<dd>0원</dd>
								</div>
								<div>
									<dt>할인금액</dt>
									<dd>
										<span class="disc_amount">-1,746,500원</span>
									</dd>
								</div>
								<div>
									<dt>다다익선할인</dt>
									<dd>
										<span class="disc_amount">25,000원</span>
									</dd>
								</div>
								<div>
									<dt>쿠폰할인</dt>
									<dd>
										<span class="disc_amount">3,000원</span>
									</dd>
								</div>
								<div>
									<dt>선포인트 사용</dt>
									<dd>
										<span class="disc_amount">-1,500P</span>
									</dd>
								</div>
								<div>
									<dt>포인트 사용</dt>
									<dd>
										<span class="disc_amount">-5,500P</span>
									</dd>
								</div>
								<div>
									<dt>상품권 사용</dt>
									<dd>
										<span class="disc_amount">-50,000원</span>
									</dd>
								</div>
							</dl>
						</div>
						<div class="totalprice_box">
							<dl>
								<dt>총 결제 예정 금액</dt>
								<dd>
									<span>3,546,200</span>원
								</dd>
							</dl>
							<p class="info_point">
								<span class="save_point">3,500 P</span> 적립예정
							</p>
						</div>
					</div>
				</div>
				<!-- // CONT-BODY -->
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready( function() {
	//해외배송 입력
	$(document).on('change','.odPayment .area_overseas #rdi-overs1',function(e){
		$('.info_box.overs2').hide();
		$('.info_box.overs1').show();
		return false;
	}).on('change','.odPayment .area_overseas #rdi-overs2',function(e){
		$('.info_box.overs1').hide();
		$('.info_box.overs2').show();
		return false;
	});

	//할인쿠폰 확인
	$(document).on('click','.odPayment .area_seldiscount .btn_coupon_toggle',function(e){
		$('.coupon_list').toggle();
		$(this).toggleClass('on');
		return false;
	});

	//결제수단 선택
	$(document).on('change','.odPayment .area_paymethod .paymethod_radio input',function(e){
		$('.radio_blk').removeClass('on');
		$(this).parents('.radio_blk').addClass('on');
		$(this).parents('.radio_blk').find('.paymethod_box').show();
		$(this).parents('.radio_blk').siblings('div').find('.paymethod_box').hide();

		var paymethodlabel =  $(this).prop('labels');
		$(this).parents('li').find('.fold_head .data span').text($(paymethodlabel).text());

		//간편결제 카드추가 슬라이드
		var swiper = new Swiper('.paymethod_box .card_quickpay .list_card.swiper-container', {
			slidesPerView: 'auto',
			spaceBetween: 160,
			centeredSlides: true,
			navigation: {
				nextEl: '.list_card .swiper-button-next',
				prevEl: '.list_card .swiper-button-prev',
			},
		});
		return false;
	});

	//STYLE24 간편결제 배너닫기
	$(document).on('click','.odPayment .area_paymethod .quickpay_bnr .btn_close_bnr',function(e){
		$('.quickpay_bnr').hide();
	});

	//결제수단 선택 > 즐겨찾기 추가시 
	$(document).on('click','.odPayment .area_paymethod .paymethod_box .card .etc .btn_favorcard',function(e){
		$(this).toggleClass('active');
		return false;
	});

	//결제수단 > 일반결제> 실시간계좌이체 선택시            
	$(document).on('change','.odPayment input:radio[name=rdi-paynormal]',function(e){
		var paynormalValue = $(this).attr('id');
		if (paynormalValue == 'rdi-paynormal2') {
			$('.area_paymethod .agree_insurance').show();
		} else {
			$('.area_paymethod .agree_insurance').hide();
		}
		return false;
	});

	//개인정보동의 열고닫기
	$(document).on('click','.area_paymentinfo .payinfo_blk a',function(e){
		e.preventDefault();
		$(this).parents('.payinfo_blk').toggleClass('on');
		var privacyToggle = $(this).find('span');
		$(privacyToggle).text($(privacyToggle).text() == '보기' ? '닫기' : '보기');
		return false;
	});

	//배송지변경 팝업열기
	$(document).on('click','#btn_adrsChange_pop',function(e){
		$("#adrsChangePop").modal("show");
		return false;
	});

	//배송지추가 팝업열기
	$(document).on('click','#btn_addrAdd_pop',function(e){
		$("#adrsAddPop").modal("show");
		return false;
	});

	//배송지수정 팝업열기
	$(document).on('click','#btn_addrModify_pop',function(e){
		$("#adrsModifyPop").modal("show");
		return false;
	});

	//배송요청사항 팝업열기
	$(document).on('click','#btn_rqstModify_pop',function(e){
		$("#rqstModifyPop").modal("show");
		return false;
	});

	//사은품지급안내 팝업열기
	$(document).on('click','#btn_infoGift_pop',function(e){
		$("#infoGiftPop").modal("show");
		return false;
	});

	//간편결제등록 > STEP1.이용약관 팝업열기
	$(document).on('click','.btn_addcard',function(e){
		$("#qPayAgree_pop").modal("show");
		return false;
	});

	//간편결제등록 > STEP1.이용약관 체크
	$(document).on('click','.area_QpayCk .agr_select button',function(e){
		$(this).parents('.area_QpayCk').find('.info_agrQpay').toggle();
		var payagrToggle = $(this).find('span');
		$(payagrToggle).text($(payagrToggle).text() == '약관열기' ? '약관닫기' : '약관열기');
		return false;
	});

	//간편결제등록 > STEP1.이용약관 체크박스 전체선택
	$(document).on('click','#chk-Qpay-agrAll',function(e){
		$(this).parents(".qPayAgree_pop").find('.agree_Qpay input').prop("checked", $(this).is(":checked"));
	});

	//간편결제등록 > STEP1.이용약관 체크박스 개별선택
	$(document).on("click", ".agree_Qpay input",function(e){
		var is_checked = true;
		$(".agree_Qpay input").each(function(){
			is_checked = is_checked && $(this).is(":checked");
		});
		$("#chk-Qpay-agrAll").prop("checked", is_checked);
	});

	//간편결제등록 > 본인인증 팝업열기
	$(document).on('click','#btn_qPayidConfirm_pop',function(e){
		$("#qPayidConfirm_pop").modal("show");
		return false;
	});

});
</script>

</th:block>
</body>
</html>