Document

Mobile 개별디자인 (모바일4.0) - HTML 수정 전

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : HTML

<div id="join" class="wrapper">  <div class="hd"> <h5>청약철회 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>    <section class="orderBody"> <div> <table> <colgroup> <col width="100" /> <col width="*" /> </colgroup> <thead> <tr> <th colspan="2" id="terms_agree_tit">약관동의</th> </tr> </thead> <tbody> <tr> <td colspan="2" style="padding-left:0;padding-right:0;"> <div class="txt-l"> <div id="terms_agree"></div> </div> </td> </tr> </tbody> </table> </div> </section>   <div class="hd"> <h5>이용약관 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>      <div class="hd"> <h5>개인정보 수집 이용안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="privercy-contract-tap clearfix"> <ul> <li class="sel"><a href="#none">수집하는 항목</a></li> <li><a href="#none">수집·이용 목적</a></li> <li class="end"><a href="#none">보유 및 이용기간</a></li> </ul> </div> <div class="tab-content terms"> <div class="privercy-contract"> <p></p> </div> <div class="privercy-contract" style="display: none;"> <p></p> </div> <div class="privercy-contract" style="display: none;"> <p></p> </div> </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>  <div class="hd"> <h5>개인정보의 제3자 제공 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>   <div class="hd"> <h5>개인정보 처리위탁안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>    <div class="hd"> <h5>개인정보 수집 이용안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>      </div>  <div id="join" class="wrapper"> <div class="hd"> <h5>주문동의</h5> </div> <div class="cont">  <div class="before_pay"> <label> 선택하신 결제수단을 다음에도 사용합니다.</label> </div>  <div class="payagree"> <label> 상기 결제정보를 확인하였으며, 구매진행에 동의합니다.</label> </div> </div> </div> </tbody> </table> </div>

Mobile 개별디자인 (모바일4.0) - HTML 수정 후

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : HTML

<div id="join" class="wrapper"> <div class="new-tit">주문자 동의</div>  <div class="hd"> <h5>청약철회</h5><a href="" class="open-pop">전체보기</a> </div> <div class="cont"> <div class="terms">  </div> </div>    <section class="orderBody"> <div> <table> <colgroup> <col width="100" /> <col width="*" /> </colgroup> <thead> <tr> <th colspan="2" id="terms_agree_tit">약관동의</th> </tr> </thead> <tbody> <tr> <td colspan="2" style="padding-left:0;padding-right:0;"> <div class="txt-l"> <div id="terms_agree"></div> </div> </td> </tr> </tbody> </table> </div> </section>   <div class="hd"> <h5>이용 약관</h5> <a href="" class="open-pop">전체보기</a> </div> <div class="cont"> <div class="terms">  </div> </div>   <div class="hd"> <h5>개인정보 수집 이용안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="privercy-contract-tap clearfix"> <ul> <li class="sel"><a href="#none">수집하는 항목</a></li> <li><a href="#none">수집·이용 목적</a></li> <li class="end"><a href="#none">보유 및 이용기간</a></li> </ul> </div> <div class="tab-content terms"> <div class="privercy-contract"> <p></p> </div> <div class="privercy-contract" style="display: none;"> <p></p> </div> <div class="privercy-contract" style="display: none;"> <p></p> </div> </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>  <div class="hd"> <h5>개인정보의 제3자 제공 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>   <div class="hd"> <h5>개인정보 처리위탁안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>    <div class="hd"> <h5>개인정보 수집 이용안내 <a href="" class="open-pop">전체보기</a></h5> </div> <div class="cont"> <div class="terms">  </div> <div class="agree"> <label> 동의함</label> <label> 동의안함</label> </div> </div>      <div class="hd"> <h5>개인정보 공급자 제공 동의</h5> </div> <div class="cont"> <div class="terms">  </div> </div>     </div>  <div id="join" class="wrapper"> <div class="hd"> <h5>주문동의</h5> </div> <div class="cont">  <div class="before_pay"> <label> 선택하신 결제수단을 다음에도 사용합니다.</label> </div>  <div class="payagree"> <label></label><br /> <label><span class="txt">상기 약관 및 개인정보 수집 · 이용에 대한 동의 내용과 결제정보를 확인하였으므로 구매진행에 동의합니다.</span></label> </div> </div> </div> </tbody> </table> </div>

Mobile 개별디자인 (모바일4.0) - CSS 추가

수정 경로 = 중앙디자인 > 주문관련 > 고급형 주문서 작성 : CSS

/* s 약관 */ #join .new-tit { margin-bottom: 13px; padding: 10px 3px 7px 10px; border-bottom: 2px solid #000; font-weight: bold; font-size: 1em; } #join .hd { position: relative; } #join .hd h5 { border: 0 none; background: none; text-indent: 18px; font-size: 13px; color: #000; line-height: 34px; font-weight: bold; } #join .hd h5:before { position: absolute; top: 14px; left: 8px; width: 3px; height: 3px; background: #000; content: ""; } #join .hd a { position: absolute; top: 4px; right: 10px; padding: 4px 10px; border: 1px solid #000; font-size: 12px; font-weight: bold; } #join .cont { padding: 8px 8px 15px; } #join .cont .terms { min-height: 45px; padding: 12px 8px; border: 2px solid #cfcfcf; } #join .cont .agree { display: none; } #join .cont .agree label { margin: 0 15px; } #join .cont a { color: #1172b6; font-weight: bold; font-size: 0.75em; text-align: right; display: block; padding-top: 10px; } #join .privacy-wrap h5 { border: 0 none; background: none; text-indent: 18px; font-size: 13px; color: #000; line-height: 34px; } #join .privacy-wrap h5:before { position: absolute; top: 14px; left: 8px; width: 3px; height: 3px; background: #000; content: ""; } #join .privacy-wrap .control-area { display: none; } #order .new-hd h5 { border: 0 none; background: none; text-indent: 18px; font-size: 13px; color: #000; line-height: 34px; } #order .new-hd h5:before { position: absolute; top: 14px; left: 8px; width: 3px; height: 3px; background: #000; content: ""; } .privacy .tb-style { border: 1px solid #cfcfcf; table-layout: fixed; word-break: break-all; } .privacy .tb-style table { width: 100%; } .privacy .tb-style table th, .privacy .tb-style table td { padding: 8px; border: 1px solid #ddd; font-size: 12px; color: #777; vertical-align: middle; } .privacy .tb-style table th { background: #f8f8f8; } .privacy .tb-style table tr td p.chk { padding-left: 10px; } .privacy .tb-style table tr td:nth-child(3) { font-size: 13px; font-weight: bold; color: #000; } /* e 약관 */