Noto Sans CJK KR Regular (300)

Noto Sans CJK KR Medium (400)

Noto Sans CJK KR Bold (500)

포인트 컬러1 : t_orange

포인트 컬러2 : t_red

포인트 컬러3 : t_blue

컨텐츠 타이틀

본인 확인서

해외 거주자 여부 확인

HTML 소스

	<div class="warrant_wrap">
		<p class="tit">본인 확인서</p>
		<div class="warrant_cont">
			<div class="top_title">해외 거주자 여부 확인</div>
		</div>
	</div>

도트형 리스트

투자권유를 희망하지 않거나, 투자자정보를 제공하지 않는 경우에는 고객의 별도 의사가 있기 전까지 회사가 투자권유를 할 수 없습니다.
투자 시 원금 손실이 발생할 수 있으며, 투자 손익에 대한 책임은 모두 고객에게 귀속됩니다.

HTML 소스

	<ul class="dot_list">
		<li>투자권유를 희망하지 않거나, 투자자정보를 제공하지 않는 경우에는 고객의 별도 의사가 있기 전까지 회사가 투자권유를 할 수 없습니다.</li>
		<li>투자 시 원금 손실이 발생할 수 있으며, 투자 손익에 대한 책임은 모두 고객에게 귀속됩니다.</li>
	</ul>

도트형 리스트2

복사본이나 사진은 사용할 수 없습니다.
신분증 원본으로 촬영하세요.
정보 확인이 어렵거나 훼손된 신분증은 거래가 거절될 수 있습니다.

HTML 소스

	<ul class="dot_list2">
		<li>복사본이나 사진은 사용할 수 없습니다.<br>
			<span class="t_orange">신분증 원본으로 촬영하세요.</span>
		</li>
		<li>정보 확인이 어렵거나 훼손된 신분증은 거래가 거절될 수 있습니다.</li>
	</ul>

숫자 리스트

귀사에 제공한 투자자정보는 본인의 투자목적, 재산상황 및 투자경험 등의 정보를 정확히 알려드린 것입니다.
향후 24개월 동안에는 본인의 투자자정보를 변경되지 않은 것으로 귀사가 간주한다는 점을 설명 받았습니다.
본인의 투자자정보에 변경사항이 발생한 경우에는 이를 귀사에 통지하여야 귀사가 본인에게 적합한 투자권유를 할 수 있다는 점을 설명 받았습니다.

HTML 소스

	<ol class="num_list">
		<li>귀사에 제공한 투자자정보는 본인의 투자목적, 재산상황 및 투자경험 등의 정보를 정확히 알려드린 것입니다.</li>
		<li>향후 24개월 동안에는 본인의 투자자정보를 변경되지 않은 것으로 귀사가 간주한다는 점을 설명 받았습니다.</li>
		<li>본인의 투자자정보에 변경사항이 발생한 경우에는 이를 귀사에 통지하여야 귀사가 본인에게 적합한 투자권유를 할 수 있다는 점을 설명 받았습니다.</li>
	</ol>

버튼형 라디오/체크박스 : info_check_type1

라디오/체크박스 라디오/체크박스

HTML 소스

	<div class="info_check info_check_type1">
		<label class="btn_chk"><input type="radio" name="infoCheck1" checked="checked"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck1"><span>라디오/체크박스</span></label>
	</div>

버튼형 라디오/체크박스 : info_check_type2

라디오/체크박스 라디오/체크박스 라디오/체크박스 라디오/체크박스

HTML 소스

	<div class="info_check info_check_type2">
		<label class="btn_chk"><input type="radio" name="infoCheck2" checked="checked"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck2"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck2"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck2"><span>라디오/체크박스</span></label>
	</div>

버튼형 라디오/체크박스 : info_check_type3

라디오/체크박스 라디오/체크박스 라디오/체크박스 라디오/체크박스

HTML 소스

	<div class="info_check info_check_type3">
		<label class="btn_chk"><input type="radio" name="infoCheck3"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck3" checked="checked"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck3"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck3"><span>라디오/체크박스</span></label>
	</div>

버튼형 라디오/체크박스 : info_check_type4

라디오/체크박스 라디오/체크박스 라디오/체크박스 라디오/체크박스

HTML 소스

	<div class="info_check info_check_type4">
		<label class="btn_chk"><input type="radio" name="infoCheck4" checked="checked"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck4"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck4"><span>라디오/체크박스</span></label>
		<label class="btn_chk"><input type="radio" name="infoCheck4"><span>라디오/체크박스</span></label>
	</div>

big : big_che

체크박스 기본형 체크박스 checked

HTML 소스

	<label class="big_che">
		<input type="checkbox" name="bigChe"><span>체크박스 기본형</span>
	</label>
	<label class="big_che">
		<input type="checkbox" name="bigChe" checked="checked"><span>체크박스 checked</span>
	</label>

middle : middle_che

체크박스 기본형 체크박스 checked

HTML 소스

	<label class="middle_che">
		<input type="checkbox" name="middleChe"><span>체크박스 기본형</span>
	</label>
	<label class="middle_che">
		<input type="checkbox" name="middleChe" checked="checked"><span>체크박스 checked</span>
	</label>

small : small_che

체크박스 기본형 체크박스 checked

HTML 소스

	<label class="small_che">
		<input type="checkbox" name="smallChe"><span>체크박스 기본형</span>
	</label>
	<label class="small_che">
		<input type="checkbox" name="smallChe" checked="checked"><span>체크박스 checked</span>
	</label>

컨텐츠 형 : cont_che

다시 보지 않음 다시 보지 않음 다시 보지 않음

HTML 소스

	<label class="cont_che">
		<input type="checkbox" name="contChe">
		<span>다시 보지 않음</span>
	</label>

	<label class="cont_che">
		<input type="checkbox" name="contChe" checked="checked">
		<span>다시 보지 않음</span>
	</label>

	<label class="cont_che">
		<input type="checkbox" name="contChe" disabled="disabled">
		<span>다시 보지 않음</span>
	</label>

switch : tg_switch

HTML 소스

	<label class="tg_switch">
		<input type="checkbox" name="">
		<span class="switch_bg"></span>
	</label>
	<label class="tg_switch">
		<input type="checkbox" name="" checked="checked">
		<span class="switch_bg"></span>
	</label>

체크박스: 박스 리스트형

신청인 본인 성명/서명(인감) 신청인 본인 성명/서명(인감)

HTML 소스

	<div class="checkbox_type1">
		<label class="btn_chk"><input type="checkbox" name="infoCheck16"><span>신청인 본인 성명/서명(인감)</span></label>
		<label class="btn_chk"><input type="checkbox" name="infoCheck16"><span>신청인 본인 성명/서명(인감)</span></label>
	</div>

체크박스 : 올체크(ALL CEHCK)

전체 문자 이메일 전화 DM

HTML 소스

	<div class="agree_sub_area allChkArea">
		<label class="small_che allChk">
			<input type="checkbox" name="input_chk1_2_1"><span>전체</span>
		</label>
		<label class="small_che chk">
			<input type="checkbox" name="input_chk1_2_1"><span>문자</span>
		</label>
		<label class="small_che chk">
			<input type="checkbox" name="input_chk1_2_1"><span>이메일</span>
		</label>
		<label class="small_che chk">
			<input type="checkbox" name="input_chk1_2_1"><span>전화</span>
		</label>
		<label class="small_che chk">
			<input type="checkbox" name="input_chk1_2_1"><span>DM</span>
		</label>
	</div>

JS 소스

	$(document).ready(function () {
		allCheckEvent(); // 체크박스 전체 선택 이벤트(공통)
	});

인풋 기본형

HTML 소스

	<div class="inputbox">
		<input type="text" placeholder="text">
		<span class="input_line"></span>
	</div>

인풋 disabled

HTML 소스

	<div class="inputbox">
		<input type="text" value="disabled" disabled="disabled">
		<span class="input_line"></span>
	</div>

인풋 readonly

HTML 소스

	<div class="inputbox">
		<input type="text" value="readonly" readonly="readonly">
		<span class="input_line"></span>
	</div>

데이터피커

HTML 소스

	<div class="inputbox">
		<input type="text" placeholder="YYYY-MM-DD" class="datepicker">
		<span class="input_line"></span>
	</div>

JS 소스

	$(document).ready(function () {
		datepicker(); // 데이터피커 
	});

검색인풋

HTML 소스

	<div class="search_area">
		<div class="inputbox">
			<input type="search" name="" value="" placeholder="종목번호, 상품명으로 검색" />
			<span class="input_line"></span>
			<button class="btnDel">삭제</button>
		</div>
		<input type="submit" class="btn ml12" value="검색">
	</div>

JS 소스

	$(document).ready(function () {
		searchBtnDel(); // 검색 인풋 삭제 버튼
	});

기본 텍스트입력 : memo_wrap2

0/2000byte

HTML 소스

	<div class="memo_wrap">
		<!-- 메모 영역 -->
		<div class="textarea_wrap2">
			<textarea name="" id="" cols="30" rows="10"></textarea>
			<p class="textarea_bottom"><span>0</span>/<span>2000</span>byte</p>
		</div>
		<!--// 메모 영역 -->
	</div>

	<!-- disabled -->
	<div class="memo_wrap">
		<!-- 메모 영역 -->
		<div class="textarea_wrap2 disabled">
			<textarea name="" id="" cols="30" rows="10" disabled="disabled">disabled</textarea>
			<p class="textarea_bottom"><span>0</span>/<span>2000</span>byte</p>
		</div>
		<!--// 메모 영역 -->
	</div>

메모 : memo_wrap

0/2000byte

HTML 소스

	<div class="memo_wrap">
		<!-- 메모 영역 -->
		<div class="textarea_wrap">
			<textarea name="" id="" cols="30" rows="10"></textarea>
			<p class="textarea_bottom"><span>0</span>/<span>2000</span>byte</p>
		</div>
		<!--// 메모 영역 -->
	</div>

	<!-- disabled -->
	<div class="memo_wrap">
		<!-- 메모 영역 -->
		<div class="textarea_wrap disabled">
			<textarea name="" id="" cols="30" rows="10" disabled="disabled">disabled</textarea>
			<p class="textarea_bottom"><span>0</span>/<span>2000</span>byte</p>
		</div>
		<!--// 메모 영역 -->
	</div>

메인 : selectbox selectbox2

HTML 소스

	<div class="selectbox selectbox2">
		<select name="" id="" dis>
			<option value="" selected>Today's</option>
			<option value="">Month</option>
			<option value="">Years</option>
		</select>
	</div>

기본형(select) : select_area selectArea

HTML 소스

	<div class="select_area selectbox">
		<select>
			<option value="">셀렉트1</option>
			<option value="">셀렉트2</option>
			<option value="">셀렉트3</option>
		</select>
	</div>
	
	<!-- disabled -->
	<div class="select_area selectbox">
		<select disabled="disabled">
			<option value="">셀렉트1</option>
			<option value="">셀렉트2</option>
			<option value="">셀렉트3</option>
		</select>
	</div>

JS 소스

	$(document).ready(function () {
		selectArea(); // select 관련 js
	});

디자인 셀렉트(ul li) : selectArea

셀렉트1
셀렉트셀렉트셀렉트2
셀렉트3
셀렉트4

셀렉트1
셀렉트셀렉트셀렉트2
셀렉트3
셀렉트4

HTML 소스

	<div class="select_area selectbox">
		<button class="selBtn">셀렉트1</button>
		<ul class="sel_list">
			<li>셀렉트1</li>
			<li>셀렉트셀렉트셀렉트2</li>
			<li class="disabled">셀렉트3</li>
			<li>셀렉트4</li>
		</ul>
	</div>
	
	<!-- disabled -->
	<div class="select_area selectbox">
		<button class="selBtn disabled">disabled</button>
		<ul class="sel_list">
			<li>셀렉트1</li>
			<li>셀렉트셀렉트셀렉트2</li>
			<li class="disabled">셀렉트3</li>
			<li>셀렉트4</li>
		</ul>
	</div>

JS 소스

	$(document).ready(function () {
		selectArea(); // select 관련 js
	});

인증번호

유효시간: 03:00

HTML 소스

	<div class="form_layout">
		<div class="inputbox">
			<input type="text" placeholder="인증번호 입력">
			<span class="input_line"></span>
		</div>
		<button class="btn certi_num ml12" onclick="certificationNum()">인증번호 발송</button>
	</div>
	<p class="certi_time">유효시간: 03:00</p>

bar가 있는 타입(전화번호, 주민등록번호 등)

-

HTML 소스

	<div class="form_layout">
		<div class="inputbox">
			<input type="text" maxlength="6" placeholder="6자리 입력">
			<span class="input_line"></span>
		</div>
		<div class="icon">-</div>
		<div class="inputbox">
			<input type="password" maxlength="6" placeholder="7자리 입력">
			<span class="input_line"></span>
		</div>
	</div>

이메일

@

HTML 소스

	<div class="form_layout">
		<div class="inputbox">
			<input type="text" placeholder="id 입력">
			<span class="input_line"></span>
		</div>
		<div class="icon">@</div>
		<div class="inputbox">
			<input type="text" placeholder="직접입력">
			<span class="input_line"></span>
		</div>
		<div class="select_area selectbox email">
			<select>
				<option value="" selected>선택</option>
				<option value="">naver.com</option>
				<option value="">kakao.com</option>
				<option value="">hanmail.net</option>
				<option value="">gmail.com</option>
				<option value="">nate.com</option>
				<option value="">직접입력</option>
			</select>
		</div>
	</div>

주소

HTML 소스

	<div>
		<div class="inputbox" style="width: 12rem;">
			<input type="text" placeholder="우편번호">
			<span> class="input_line"></span>
		</div>
		<button> class="btn ml12">주소찾기</button>
	</div>
	<div class="form_layout">
		<div class="inputbox">
			<input type="text" placeholder="기본주소">
			<span> class="input_line"></span>
		</div>
	</div>
	<div class="form_layout">
		<div class="inputbox">
			<input type="text" placeholder="상세주소 및 상세건물명">
			<span> class="input_line"></span>
		</div>
	</div>

컨텐츠 버튼

HTML 소스

	<button class="btn">기본</button>
	<button class="btn bg_blue">강조버튼</button>
	<button class="btn disabled">비활성화버튼</button>
	<button class="btn btn_complete">완료버튼</button>

fixed 버튼 : 컨텐츠

취소

확인

비활성화

HTML 소스

	<div class="pop_btn_wrap">
		<div class="btn">취소</div>
		<div class="btn bg_blue">확인</div>
		<div class="btn disabled">비활성화</div>
	</div>

fixed 버튼 : 팝업

취소

확인

비활성화

HTML 소스

	<div class="pop_btn_wrap">
		<div class="btn">취소</div>
		<div class="btn bg_blue">확인</div>
		<div class="btn disabled">비활성화</div>
	</div>

테이블 안 버튼

HTML 소스

	<button class="btn">기본버튼</button>
	<button class="btn bg_blue">강조버튼</button>
	<button class="btn disabled">비활성화버튼</button>
	<button class="btn btn_download">다운로드버튼</button>

등급표시(Label label_grade)

1등급(초고위험) 2등급(고위험) 3등급(중위험) 4등급(저위험) 5등급(초저위험) 대상 비대상

HTML 소스

	<span class="btn label_grade1">1등급(초고위험)</span>
	<span class="btn label_grade2">2등급(고위험)</span>
	<span class="btn label_grade3">3등급(중위험)</span>
	<span class="btn label_grade4">4등급(저위험)</span>
	<span class="btn label_grade5">5등급(초저위험)</span>
	<span class="btn">대상</span>
	<span class="btn disabled">비대상</span>

둥근 버튼(blue_line, blue_line_arrow)

신분증 인증 오류가 발생한 경우 확인사항 신분증 인증 오류가 발생한 경우 확인사항(disabled)

HTML 소스

	<button> class="btn blue_line">시간연장</button>
	<button> class="btn blue_line disabled">시간연장(disabled)</button>
	<a> href="#" class="btn blue_line_arrow">신분증 인증 오류가 발생한 경우 확인사항</a>
	<a> href="#" class="btn blue_line_arrow disabled">신분증 인증 오류가 발생한 경우 확인사항(disabled)</a>

아이콘형 버튼

HTML 소스

	<button class="btn_logout">로그아웃</button>
	<button class="btn_hamberger">메뉴</button>

	<div class="bg_main">
		<button class="btn_logout">로그아웃</button>
		<button class="btn_hamberger">메뉴</button>
		<button class="btn_more">더보기</button>
	</div>

	<div class="floting_area">
		<button class="btn_record">녹취</button>
		<button class="btn_record active">녹취</button>
	</div>

gnb공통 : 버튼모음

취소 삭제 임시저장 작성완료 수정 전송취소 전송 재촬영

HTML 소스

	<div class="top_gnb">
		<!-- 왼쪽 영역 버튼 -->
		<div class="left_area">
			<button class="btn btn_thumbnail">썸네일 목록보기</button>
			<button class="btn btn_thumbnail active">썸네일 목록보기</button>
		</div>
		<!-- 오른쪽 영역 버튼 -->
		<div class="right_btn_area">
			<a href="#" class="button btn_cancle">취소</a>
			<a href="#" class="button btn_del">삭제</a>
			<a href="#" class="button btn_save">임시저장</a>
			<a href="#" class="button btn_finish disabled">작성완료</a><!-- 비활성화(class) : disabled -->
			<a href="#" class="button btn_modi">수정</a>
			<a href="#" class="button btn_fail">전송취소</a>
			<a href="#" class="button btn_send">전송</a>
			<a href="#" class="button btn_camera">재촬영</a>
		</div>
	</div>

gnb : 메인

IBK 투자증권

ODS 서비스에 오신것을 환영합니다.

로그아웃 메뉴

HTML 소스

	<div class="bg_main">
		<header class="top_gnb">
			<div class="left_area">
				<h1 class="top_logo">IBK 투자증권</h1>
				<p class="top_welcome">ODS 서비스에 오신것을 환영합니다.</p>
			</div>
			<div class="right_area">
				<span class="btn_logout">로그아웃</span>
				<span class="btn_hamberger">메뉴</span>
			</div>
		</header>
	</div>

gnb : 서브메인(업무선택)

업무선택

HTML 소스

	<div class="bg_main">
		<header class="top_gnb gnb_sub">
			<div class="left_area">
				<p class="tit">업무선택</p>
			</div>
			<div class="right_btn_area">
				<button class="btn_end">업무종료</button>
			</div>
		</header>
	</div>

table.list03

계좌번호
이름
생년월일
연락처
매매수량(액면)

HTML 소스

	<table class="list03">
		<tr>
			<th>계좌번호</th>
			<td>
				<div class="inputbox">
					<input type="text" placeholder="- 없이 계좌번호 입력" />
					<span class="input_line"></span>
				</div>
			</td>
		</tr>
		<tr>
			<th>이름</th>
			<td>
				<div class="inputbox">
					<input type="text" placeholder="이름 입력" />
					<span class="input_line"></span>
				</div>
			</td>
		</tr>
		<tr>
			<th>생년월일</th>
			<td>
				<div class="inputbox">
					<input type="text" placeholder="생년월일 8자리 입력" />
					<span class="input_line"></span>
				</div>
			</td>
		</tr>
		<tr>
			<th>연락처</th>
			<td>
				<div class="inputbox">
					<input type="text" placeholder="-없이 숫자만 입력" />
					<span class="input_line"></span>
				</div>
			</td>
		</tr>
		<tr>
			<th>매매수량(액면)</th>
			<td>
				<div class="inputbox">
					<input type="number" placeholder="숫자만 입력" />
					<span class="input_line"></span>
				</div>
			</td>
		</tr>
	</table>

table.table03

신청자 유형	개인 법인
본인 여부	신청자 본인 법정 대리인
신분증
신분증
신분증

HTML 소스

	<table class="table03">
		<tr>
			<th>신청자 유형</th>
			<td>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="identity1" checked="checked"><span>개인</span></label>
					<label class="btn_chk"><input type="radio" name="identity1"><span>법인</span></label>
				</div>
			</td>
		</tr>
		<tr>
			<th>본인 여부</th>
			<td>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="identity2" checked="checked"><span>신청자 본인</span></label>
					<label class="btn_chk"><input type="radio" name="identity2"><span>법정 대리인</span></label>
				</div>
			</td>
		</tr>
		<tr>
			<th>신분증</th>
			<td>
				<button class="btn" onclick="lyOpen('popInfo')">주민등록증/운전면허증</button>
				<button class="btn" onclick="lyOpen('popInfo')">기타신분증</button>
			</td>
		</tr>
		<tr>
			<th>신분증</th>
			<td>
				<!-- D: 신분증 인증 완료 시 버튼 -->
				<button class="btn btn_complete">신분증 촬영 완료</button>
			</td>
		</tr>
		<tr>
			<th>신분증</th>
			<td>
				<!-- D: 신분증 인증 완료 시 버튼 -->
				<button class="btn btn_complete">신분증 촬영 및 인증 완료</button>
			</td>
		</tr>
	</table>

table01(목록형)

10	종합계좌개설	김고객	2022-12-15 09:15	전송완료
9	개별상품개설	김철수	2022-12-15 09:15	전송실패
8	금융상품가입 - 채권(CP)	김고객	2022-12-15 09:15	임시저장
7	금융상품가입 - 채권(CP)	홍길동	2022-12-15 09:15	전송완료
6	금융상품가입 - 채권(CP)	김고객	2022-12-15 09:15	전송완료
5	금융상품가입 - 신탁	나홍진	2022-12-15 09:15	전송완료
4	종합계좌개설	김고객	2022-12-15 09:15	전송완료
3	금융상품가입 - 신탁	이인지	2022-12-15 09:15	전송완료
2	개별상품개설	이중소	2022-12-15 09:15	전송완료
1	종합계좌개설	김고객	2022-12-15 09:15	전송완료

HTML 소스

	<!-- 목록 -->
	<div class="table_wrap">
		<table class="table01">
			<colgroup>
				<col style="width: 80px">
				<col>
				<col style="width: 100px">
				<col style="width: 160px">
				<col style="width: 100px">
			</colgroup>
			<tbody>
				<tr>
					<td><span class="num">10</span></td>
					<td>종합계좌개설</td>
					<td>김고객</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">9</span></td>
					<td>개별상품개설</td>
					<td>김철수</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_fail">전송실패</span></td>
				</tr>
				<tr>
					<td><span class="num">8</span></td>
					<td>금융상품가입 - 채권(CP)</td>
					<td>김고객</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_save">임시저장</span></td>
				</tr>
				<tr>
					<td><span class="num">7</span></td>
					<td>금융상품가입 - 채권(CP)</td>
					<td>홍길동</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">6</span></td>
					<td>금융상품가입 - 채권(CP)</td>
					<td>김고객</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">5</span></td>
					<td>금융상품가입 - 신탁</td>
					<td>나홍진</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">4</span></td>
					<td>종합계좌개설</td>
					<td>김고객</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">3</span></td>
					<td>금융상품가입 - 신탁</td>
					<td>이인지</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">2</span></td>
					<td>개별상품개설</td>
					<td>이중소</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
				<tr>
					<td><span class="num">1</span></td>
					<td>종합계좌개설</td>
					<td>김고객</td>
					<td><span class="date">2022-12-15 09:15</span></td>
					<td><span class="send_ms send_end">전송완료</span></td>
				</tr>
			</tbody>
		</table>
	</div>
	<!--// 목록 -->

table01(왼쪽 정렬 예시)

사업자등록증 사본 원본대조필 + 직인	촬영	미리보기 (1)
법인등기사항전부증명서 (원본, 말소사항포함, 발급 3개월 이내)	촬영	미리보기
주주명부(발급3개월 이내)	촬영	미리보기

HTML 소스

	<div class="table_wrap">
		<table class="table01">
			<colgroup>
				<col style="width: auto">
				<col style="width: 30px">
				<col style="width: 30px">
			</colgroup>
			<tbody>
				<tr>
					<td class="tb_l">사업자등록증 사본 원본대조필 + 직인</td>
					<td><span class="btn">촬영</span></td>
					<td><span class="btn">미리보기 <span>(1)</span></span></td>
				</tr>
				<tr>
					<td class="tb_l">법인등기사항전부증명서<br>
						(원본, 말소사항포함, 발급 3개월 이내)</td>
					<td><span class="btn">촬영</span></td>
					<td><span class="btn disabled">미리보기</span></td>
				</tr>
				<tr>
					<td class="tb_l">주주명부(발급3개월 이내)</td>
					<td><span class="btn">촬영</span></td>
					<td><span class="btn disabled">미리보기</span></td>
				</tr>
			</tbody>
		</table>

table02(상세)

제목	서비스가 오픈 되었습니다.
등록일	2022-12-15 09:15
내용	서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다.

HTML 소스

	<table class="table02">
		<colgroup>
			<col style="width:108px;">
			<col>
		</colgroup>
		<tbody>
			<tr>
				<th>제목</th>
				<td><span class="tit">서비스가 오픈 되었습니다.</span></td>
			</tr>
			<tr>
				<th>등록일</th>
				<td><span class="date">2022-12-15 09:15</span></td>
			</tr>
			<tr class="notice_cont">
				<th>내용</th>
				<td>
					<!-- 공지사항 내용 -->
					<div class="cont">
						<p>서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다.</p>
						<p>서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다.</p>
						<br>
						<p>서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다.</p>
						<p>서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다. 서비스가 오픈 되었습니다.</p>
					</div>
					<!--// 공지사항 내용 -->
					<!-- 파일 다운로드 -->
					<div class="file_download_area">
						<button class="btn btn_download">File1.png</button>
						<button class="btn btn_download">File2_advertize20221001_card.png</button>
					</div>
					<!--// 파일 다운로드 -->
				</td>
			</tr>
		</tbody>
	</table>

table04

투자자 유형	일반금융소비자
연령대	만41~64세 이하
총자산규모(순자산)	2억 이상~5억 미만
투자예정기간	1년 이상~2년 미만
금융투자상품 투자경험기간	3년 이상~5년 미만
파생상품투자경험	36개월
금융지식수준·이해도	널리 알려진 금융투자상품(주식, 채권 및 펀드 등)의 구조 및 위험을 일정부분 이해하고 있음
투자수식·위험에 대한 중요도	원금 보존을 고려하나 투자 수익이 더 중요
금융투자상품 취득 및 처분목적	자산증식
기대이익수준	원금기준 50% 범위
감내할 수 있는 손실수준	원금기준 -20% 범위
향후 수입원에 대한 예상	현재 일정한 수입이 발생하고 있으나, 향후 감소하거나 불안정할 것으로 예상
취약금융소비자	해당 없음
투자권유여부	희망
정보제공여부	제공

HTML 소스

	<div class="table_box">
		<table class="table04">
			<colgroup>
				<col style="width: 15.1rem;">
				<col>
			</colgroup>
			<tbody>
				<tr>
					<th>투자자 유형</th>
					<td>일반금융소비자</td>
				</tr>
				<tr>
					<th>연령대</th>
					<td>만41~64세 이하</td>
				</tr>
				<tr>
					<th>총자산규모(순자산)</th>
					<td>2억 이상~5억 미만</td>
				</tr>
				<tr>
					<th>투자예정기간</th>
					<td>1년 이상~2년 미만</td>
				</tr>
				<tr>
					<th>금융투자상품 투자경험기간</th>
					<td>3년 이상~5년 미만</td>
				</tr>
				<tr>
					<th>파생상품투자경험</th>
					<td>36개월</td>
				</tr>
				<tr>
					<th>금융지식수준·이해도</th>
					<td>널리 알려진 금융투자상품(주식, 채권 및 펀드 등)의 구조 및 위험을 일정부분 이해하고 있음</td>
				</tr>
				<tr>
					<th>투자수식·위험에 대한 중요도</th>
					<td>원금 보존을 고려하나 투자 수익이 더 중요</td>
				</tr>
				<tr>
					<th>금융투자상품 취득 및 처분목적</th>
					<td>자산증식</td>
				</tr>
				<tr>
					<th>기대이익수준</th>
					<td>원금기준 50% 범위</td>
				</tr>
				<tr>
					<th>감내할 수 있는 손실수준</th>
					<td>원금기준 -20% 범위</td>
				</tr>
				<tr>
					<th>향후 수입원에 대한 예상</th>
					<td>현재 일정한 수입이 발생하고 있으나, 향후 감소하거나 불안정할 것으로 예상</td>
				</tr>
				<tr>
					<th>취약금융소비자</th>
					<td>해당 없음</td>
				</tr>
				<tr>
					<th>투자권유여부</th>
					<td>희망</td>
				</tr>
				<tr>
					<th>정보제공여부</th>
					<td>제공</td>
				</tr>
			</tbody>
		</table>
	</div>

table05

20점 이하	안정형	20점 초과 ~40 점 이하	안정추구형
40점 초과 ~60 점 이하	위험중립형	60점 초과 ~ 80 점 이하	적극투자형
80점 초과	공격투자형

HTML 소스

	<div class="table_box">
		<table class="table05">
			<colgroup>
				<col style="width: 15.1rem;">
				<col>
				<col style="width: 15.1rem;">
				<col>
			</colgroup>
			<tbody>
				<tr>
					<th>20점 이하</th>
					<td><span> class="btn label_grade5">안정형</span></td>
					<th>20점 초과 ~40 점 이하 </th>
					<td><span> class="btn label_grade4">안정추구형</span></td>
				</tr>
				<tr>
					<th>40점 초과 ~60 점 이하 </th>
					<td><span> class="btn label_grade3">위험중립형</span></td>
					<th>60점 초과 ~ 80 점 이하 </th>
					<td><span> class="btn label_grade2">적극투자형</span></td>
				</tr>
				<tr>
					<th>80점 초과 </th>
					<td><span> class="btn label_grade1">공격투자형</span></td>
				</tr>
			</tbody>
		</table>
	</div>

table06

종목번호	R103501GA3	단가	9,380.00
투자위험등급	초고위험	만기일	2025/03/11
매매가능수량	480,000,000	표면이율	1.5%
수익률	4.4%	발행일	2020/03/10
위법계약해지여부	대상	청약철회여부	대상
적정성판단보고서여부	비대상	녹취 대상 여부	대상
고난도상품여부	대상	숙려신청 가능 대상 여부	대상
		완전판매 모니터링 전화 수신 거부	가능

HTML 소스

	<div class="table_box">
		<table class="table06">
			<colgroup>
				<col style="width: 184px;">
				<col>
				<col style="width: 256px;">
				<col>
			</colgroup>
			<tbody>
				<tr>
					<th>종목번호</th>
					<td>R103501GA3</td>
					<th>단가</th>
					<td>9,380.00</td>
				</tr>
				<tr>
					<th>투자위험등급</th>
					<td>초고위험</td>
					<th>만기일</th>
					<td>2025/03/11</td>
				</tr>
				<tr>
					<th>매매가능수량</th>
					<td>480,000,000</td>
					<th>표면이율</th>
					<td>1.5%</td>
				</tr>
				<tr>
					<th>수익률</th>
					<td><span class="percent">4.4%</span></td>
					<th>발행일</th>
					<td>2020/03/10</td>
				</tr>
				<tr>
					<th>위법계약해지여부</th>
					<td>대상</td>
					<th>청약철회여부</th>
					<td>대상</td>
				</tr>
				<tr>
					<th>적정성판단보고서여부</th>
					<td>비대상</td>
					<th>녹취 대상 여부</th>
					<td>대상</td>
				</tr>
				<tr>
					<th>고난도상품여부</th>
					<td>대상</td>
					<th>숙려신청 가능 대상 여부</th>
					<td>대상</td>
				</tr>
				<tr>
					<th></th>
					<td></td>
					<th>완전판매 모니터링 전화 수신 거부</th>
					<td>가능</td>
				</tr>
			</tbody>
		</table>
	</div>

no-result (결과 없음 table형)

조회 결과가 없습니다

HTML 소스

	<table>
		<tbody>
			<!-- 결과없음 -->
			<tr class="no-result_area">
				<td colspan="5">
					<div class="no-result">
						<p>조회 결과가 없습니다</p>
					</div>
				</td>
			</tr>
			<!--// 결과없음 -->
		</tbody>
	</table>

no-result (결과 없음 상품 목록형)

조회 결과가 없습니다

HTML 소스

	<!-- 결과없음 -->
	<div class="no-result">
		<p>조회 결과가 없습니다</p>
	</div>
	<!--// 결과없음 -->

pager(페이저)

HTML 소스

	<div class="pager">
		<span class="p_prev disabled">처음으로 가기</span>
		<span class="p_left disabled">이전보기</span>
		<!-- <a href="#" class="p_prev">처음으로 가기</a>
		<a href="#" class="p_left">이전보기</a> -->
		<ul class="num">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<a href="#" class="p_right">다음보기</a>
		<a href="#" class="p_next">마지막으로 가기</a>
		<!-- <span class="p_right disabled">다음보기</span>
		<span class="p_next disabled">마지막으로 가기</span> -->
	</div>

pager2(페이저)

이전보기 다음보기

HTML 소스

	<div class="pager2">
		<span class="p_left disabled">이전보기</span>
		<!-- <a href="#" class="p_left">이전보기</a> -->
		<a href="#" class="p_right">다음보기</a>
	</div>

product_list(상품 목록형) : 장외 채권

일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사

1등급(초고위험)

종목번호

R103501GA3
OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3
OO전력공사채권 1282

3등급(중위험)

종목번호

R103501GA3
OO캐피탈410-6

4등급(저위험)

종목번호

R103501GA3
OO은행조건부자본증권(상)4506이(후)10갑22(지)(조건상각/후)

5등급(초저위험)

종목번호

R103501GA3

HTML 소스

	<ul class="product_list productList">
		<li>
			<div class="list_tit">
				<p class="tit">
					일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사오육칠팔구십일이삼사
				</p>
				<div class="light_btn_wrap">
					<span class="btn label_grade1">1등급(초고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
				</div>
			</div>
		</li>
		<li>
			<div class="list_tit">
				<p class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
				</div>
			</div>
		</li>
		<li>
			<div class="list_tit">
				<p class="tit">
					OO전력공사채권 1282
				</p>
				<div class="light_btn_wrap">
					<span class="btn label_grade3">3등급(중위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
				</div>
			</div>
		</li>
		<li>
			<div class="list_tit">
				<p class="tit">
					OO캐피탈410-6
				</p>
				<div class="light_btn_wrap">
					<span class="btn label_grade4">4등급(저위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
				</div>
			</div>
		</li>
		<li>
			<div class="list_tit">
				<p class="tit">
					OO은행조건부자본증권(상)4506이(후)10갑22(지)(조건상각/후)
				</p>
				<div class="light_btn_wrap">
					<span class="btn label_grade5">5등급(초저위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
				</div>
			</div>
		</li>
	</ul>

product_list(상품 목록형) : 공시 정보

OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3

매매가능 수량

480,000,000

수익율

4.4%

단가

9,380.00

만기일

2025/03/11

발행일

2020/03/10
OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3

매매가능 수량

480,000,000

수익율

4.4%

단가

9,380.00

만기일

2025/03/11

발행일

2020/03/10
OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3

매매가능 수량

480,000,000

수익율

4.4%

단가

9,380.00

만기일

2025/03/11

발행일

2020/03/10
OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3

매매가능 수량

480,000,000

수익율

4.4%

단가

9,380.00

만기일

2025/03/11

발행일

2020/03/10
OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)

2등급(고위험)

종목번호

R103501GA3

매매가능 수량

480,000,000

수익율

4.4%

단가

9,380.00

만기일

2025/03/11

발행일

2020/03/10

HTML 소스

	<ul class="product_list productList">
		<li>
			<div class="list_tit">
				<p> class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span> class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
					<dl>
						<dt>매매가능 수량</dt>
						<dd>480,000,000</dd>
					</dl>
					<dl>
						<dt>수익율</dt>
						<dd><span> class="percent">4.4%</span></dd>
					</dl>
					<dl>
						<dt>단가</dt>
						<dd>9,380.00</dd>
					</dl>
					<dl>
						<dt>만기일</dt>
						<dd>2025/03/11</dd>
					</dl>
					<dl>
						<dt>발행일</dt>
						<dd>2020/03/10</dd>
					</dl>
				</div>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="list_tit">
				<p> class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span> class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
					<dl>
						<dt>매매가능 수량</dt>
						<dd>480,000,000</dd>
					</dl>
					<dl>
						<dt>수익율</dt>
						<dd><span> class="percent">4.4%</span></dd>
					</dl>
					<dl>
						<dt>단가</dt>
						<dd>9,380.00</dd>
					</dl>
					<dl>
						<dt>만기일</dt>
						<dd>2025/03/11</dd>
					</dl>
					<dl>
						<dt>발행일</dt>
						<dd>2020/03/10</dd>
					</dl>
				</div>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="list_tit">
				<p> class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span> class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
					<dl>
						<dt>매매가능 수량</dt>
						<dd>480,000,000</dd>
					</dl>
					<dl>
						<dt>수익율</dt>
						<dd><span> class="percent">4.4%</span></dd>
					</dl>
					<dl>
						<dt>단가</dt>
						<dd>9,380.00</dd>
					</dl>
					<dl>
						<dt>만기일</dt>
						<dd>2025/03/11</dd>
					</dl>
					<dl>
						<dt>발행일</dt>
						<dd>2020/03/10</dd>
					</dl>
				</div>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="list_tit">
				<p> class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span> class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
					<dl>
						<dt>매매가능 수량</dt>
						<dd>480,000,000</dd>
					</dl>
					<dl>
						<dt>수익율</dt>
						<dd><span&g class="percent">4.4%</span></dd>
					</dl>
					<dl>
						<dt>단가</dt>
						<dd>9,380.00</dd>
					</dl>
					<dl>
						<dt>만기일</dt>
						<dd>2025/03/11</dd>
					</dl>
					<dl>
						<dt>발행일</dt>
						<dd>2020/03/10</dd>
					</dl>
				</div>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="list_tit">
				<p> class="tit">
					OO은행조건부자본증권(상)2609이(신)영구5갑21(조건상각/콜/후)
				</p>
				<div class="light_btn_wrap">
					<span> class="btn label_grade2">2등급(고위험)</span>
				</div>
			</div>
			<div class="list_sub_area">
				<div class="list_sub">
					<dl>
						<dt>종목번호</dt>
						<dd>R103501GA3</dd>
					</dl>
					<dl>
						<dt>매매가능 수량</dt>
						<dd>480,000,000</dd>
					</dl>
					<dl>
						<dt>수익율</dt>
						<dd><span> class="percent">4.4%</span></dd>
					</dl>
					<dl>
						<dt>단가</dt>
						<dd>9,380.00</dd>
					</dl>
					<dl>
						<dt>만기일</dt>
						<dd>2025/03/11</dd>
					</dl>
					<dl>
						<dt>발행일</dt>
						<dd>2020/03/10</dd>
					</dl>
				</div>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
	</ul>

line_chk_list(체크박스형 목록)

HTML 소스

	<ul class="line_chk_list">
		<li>
			<div class="qna_list3">
				<dl>
					<dt>조세목적상 거주지 국가명</dt>
					<dd>
						<div class="select_area selectbox">
							<select style="min-width: 240px;">
								<option value="" selected>선택</option>
								<option value=""></option>
								<option value=""></option>
							</select>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>납세자번호 (TIN: SSN 또는 ITIN)</dt>
					<dd>
						<div class="info_check info_check_type1">
							<label class="btn_chk"><input type="radio" name="infoCheck2_1" checked="checked"><span>제출</span></label>
							<label class="btn_chk"><input type="radio" name="infoCheck2_1"><span>미제출</span></label>
						</div>
						<div class="inputbox ml12">
							<input type="number" placeholder="- 없이 숫자만 입력" >
							<span class="input_line"></span>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>납세자번호 미제출 사유</dt>
					<dd>
						<div class="info_check info_check_type1">
							<label class="btn_chk"><input type="radio" name="infoCheck2_2"><span>미발급 국가</span></label>
							<label class="btn_chk"><input type="radio" name="infoCheck2_2"><span>제출불요 국가</span></label>
							<label class="btn_chk"><input type="radio" name="infoCheck2_2"><span>미취득</span></label>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>납세자번호 미취득 사유</dt>
					<dd>
						<div class="inputbox">
							<input type="text" placeholder="미취득 사유 입력" style="width: 480px;">
							<span class="input_line"></span>
						</div>
					</dd>
				</dl>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="qna_list3">
				<dl>
					<dt>조세목적상 거주지 국가명</dt>
					<dd>
						<div class="select_area selectbox">
							<select style="min-width: 240px;">
								<option value="" selected>선택</option>
								<option value=""></option>
								<option value=""></option>
							</select>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>납세자번호 (TIN: SSN 또는 ITIN)</dt>
					<dd>
						<div class="info_check info_check_type1">
							<label class="btn_chk"><input type="radio" name="infoCheck2_1" checked="checked"><span>제출</span></label>
							<label class="btn_chk"><input type="radio" name="infoCheck2_1"><span>미제출</span></label>
						</div>
						<div class="inputbox ml12 taxNumber">
							<input type="number" placeholder="- 없이 숫자만 입력" >
							<span class="input_line"></span>
						</div>
					</dd>
				</dl>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
		<li>
			<div class="qna_list3">
				<dl>
					<dt>조세목적상 거주지 국가명</dt>
					<dd>
						<div class="select_area selectbox">
							<select style="min-width: 240px;">
								<option value="" selected>선택</option>
								<option value=""></option>
								<option value=""></option>
							</select>
						</div>
					</dd>
				</dl>
				<dl>
					<dt>납세자번호 (TIN: SSN 또는 ITIN)</dt>
					<dd>
						<div class="info_check info_check_type1">
							<label class="btn_chk"><input type="radio" name="infoCheck2_1" checked="checked"><span>제출</span></label>
							<label class="btn_chk"><input type="radio" name="infoCheck2_1"><span>미제출</span></label>
						</div>
						<div class="inputbox ml12 taxNumber">
							<input type="number" placeholder="- 없이 숫자만 입력" >
							<span class="input_line"></span>
						</div>
					</dd>
				</dl>
			</div>
			<label class="big_che right_chk">
				<input type="checkbox" name="productChk"><span></span>
			</label>
		</li>
	</ul>

qna_list(QnA 리스트 레이아웃 (투자자정보확인))

HTML 소스

	<div class="qna_list">
		<dl>
			<dt><b>투자자 유형</b>을 선택해 주세요.</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck1"><span>일반금융소비자</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck1"><span>전문금융소비자</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt><b>총 자본금 현황</b>을 선택해 주세요.</dt>
			<dd>
				<div class="info_check info_check_type2">
					<label class="btn_chk"><input type="radio" name="infoCheck2"><span>200억 이상</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck2"><span>100억 이상<br>~ 200억 미만</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck2"><span>60억 이상<br>~ 100억 미만</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck2"><span>10억 이상<br>~ 60억 미만</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck2"><span>10억 미만</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>고객님의 투자 경험과 가장 가까운 투자 상품을 선택하세요.(중복응답 가능)</dt>
			<dd>
				<div class="info_check info_check_type3">
					<label class="btn_chk"><input type="checkbox" name="infoCheck4"><span>국채, 지방채, 보증채, MMF 등</span></label>
					<label class="btn_chk"><input type="checkbox" name="infoCheck4"><span>금융채, 신용도가 높은 회사채, 채권형 펀드, 원금보장형 ELS등</span></label>
					<label class="btn_chk"><input type="checkbox" name="infoCheck4"><span>신용도 중간등급의 회사채, 원금의 일부만 보장되는 ELS, 혼합형 펀드 등</span></label>
					<label class="btn_chk"><input type="checkbox" name="infoCheck4"><span>신용도 낮은 회사채, 주식, 원금 비보장 ELS, 시장 수익률 추구 주식형 펀드 등</span></label>
					<label class="btn_chk"><input type="checkbox" name="infoCheck4"><span>ELW, 선물옵션, 시장 수익률 이상의 수익을 추구하는 주식형펀드, 파생상품에 투자하는 펀드, 파생상품펀드,<br>주식 신용거래 등</span></label>
				</div>
			</dd>
		</dl>
	</div>

qna_list2(QnA 리스트 레이아웃 (종합계좌 개설))

본점주소(해외일 경우 영문 작성): 국내 해외

미국국세청(IRS)에 의해 비참여 금융회사로 분류되지 않은 국내 금융회사 또는 FATCA 협력관할권 금융회사에 해당: 예 아니오

미국국세청(IRS)에 글로벌금융회사등록번호(GIIN)가 등록되어 있음: 예 아니오

HTML 소스

	<div class="qna_list2">
		<dl>
			<dt>본점주소(해외일 경우 영문 작성)</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck1"><span>국내</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck1"><span>해외</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dd>
				<div class="inputbox" style="width: 12rem;">
					<input type="number" placeholder="우편번호">
					<span class="input_line"></span>
				</div>
				<button class="btn ml12">주소찾기</button>
			</dd>
			<dd>
				<div class="form_layout">
					<div class="inputbox w100">
						<input type="text" placeholder="기본주소">
						<span class="input_line"></span>
					</div>
				</div>
			</dd>
			<dd>
				<div class="form_layout">
					<div class="inputbox w100">
						<input type="text" placeholder="상세주소 및 상세건물명">
						<span class="input_line"></span>
					</div>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>미국국세청(IRS)에 의해 비참여 금융회사로 분류되지 않은 국내 금융회사 또는 FATCA 협력관할권 금융회사에 해당</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck4_7"><span>예</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck4_7"><span>아니오</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>미국국세청(IRS)에 글로벌금융회사등록번호(GIIN)가 등록되어 있음</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck4_8"><span>예</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck4_8"><span>아니오</span></label>
				</div>
			</dd>
		</dl>
	</div>

qna_list3(QnA 리스트 레이아웃 (종합계좌 개설 가로형))

전자거래등록: HTS/WTS ARS MTS 기타

납세자번호 미취득 사유

HTML 소스

	<div class="qna_list3">
		<dl>
			<dt>전자거래등록</dt>
			<dd class="tgInputArea">
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck5_1"><span>HTS/WTS</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_1"><span>ARS</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_1"><span>MTS</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_1"><span>기타</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>납세자번호 미취득 사유</dt>
			<dd>
				<div class="inputbox">
					<input type="text" placeholder="미취득 사유 입력" style="width: 480px;">
					<span class="input_line"></span>
				</div>
			</dd>
		</dl>
	</div>

qna_list4(QnA 리스트 레이아웃(위임장))

HTML 소스

	<div class="qna_list4">
		<dl>
			<dt>통장발급</dt>
			<dd class="tgInputArea">
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>발급 안함</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>위탁종합</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>CMA전용</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>수익증권</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>신탁</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_2"><span>RP매매전용</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>은행가상계좌</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck5_3"><span>기업은행</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_3"><span>우리은행</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_3"><span>국민은행</span></label>
				</div>
			</dd>
		</dl>
		<dl>
			<dt>CMA체크카드 발급 신청 (거래가능시간: 08:00~22:00)</dt>
			<dd>
				<div class="info_check info_check_type1">
					<label class="btn_chk"><input type="radio" name="infoCheck5_5"><span>신청</span></label>
					<label class="btn_chk"><input type="radio" name="infoCheck5_5"><span>신청 안함</span></label>
				</div>
			</dd>
		</dl>
	</div>

switch_list(스위치 리스트)

[주문] 주식 장내, 장외채권선물옵션* 단, 해외 주식은 체결건마다 발송됨
[결제] 미수(미수동결)/대여금/바내매매/추가증거금내역/담보부족
[권리] 권리일정(유상/매수청구/반대의사), 배당금(주)입금고 , 유/무상주 입고

HTML 소스

	<ul class="switch_list">
		<li>
			<div class="switch_top">
				<div class="left_area">
					<p class="txt">[주문] 주식 장내, 장외채권선물옵션<span class="info_txt">* 단, 해외 주식은 체결건마다 발송됨</span></p>
				</div>
				<div class="right_area">
					<div class="select_area selectbox">
						<select>
							<option value="" selected>선택</option>
							<option value="">체결 건마다 발송</option>
							<option value="">전량 체결시 발송</option>
							<option value="">장종료후 일괄 발송</option>
						</select>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div class="switch_top">
				<div class="left_area">
					<p class="txt">[결제] 미수(미수동결)/대여금/바내매매/추가증거금내역/담보부족</p>
				</div>
				<div class="right_area">
					<label class="tg_switch">
						<input type="checkbox" name="">
						<span class="switch_bg"></span>
					</label>
				</div>
			</div>
		</li>
		<li>
			<div class="switch_top">
				<div class="left_area">
					<p class="txt">[권리] 권리일정(유상/매수청구/반대의사), 배당금(주)입금고 , 유/무상주 입고</p>
				</div>
				<div class="right_area">
					<label class="tg_switch">
						<input type="checkbox" name="">
						<span class="switch_bg"></span>
					</label>
				</div>
			</div>
		</li>
	</ul>

toggleBtn 토글 버튼 : [JS] toggleBtn();

HTML 소스

	<button class="btn_camera_control toggleBtn">플래시버튼</button>

JS 소스

	$(document).ready(function () {
		toggleBtn(); // 토글 버튼
	});

tgArea 토글 이벤트 : [JS] toggleEvent();

HTML 소스

	<div class="edit_tool_area">
		<div class="edit_tool tgArea">
			<button class="btn btn_tool tgBtn">툴</button>
			<div class="tool_cont tgCont">
				<div class="tool_btn_area">
					<div class="tool">
						<button class="btn btn_highlighter toolTg" onclick="toggleEventInit();">형광펜(토글 이벤트 초기화)</button>
					</div>
					<div class="tool">
						<button class="btn btn_Eraser toolTg">지우개</button>
					</div>
				</div>
			</div>
		</div>
	</div>

JS 소스

	$(document).ready(function () {
		toggleEvent(); // 토글 이벤트
		// toggleEventInit(); // 토글 이벤트 초기화
		toolBtnEvent(); // 신청서 작성 툴 토글 버튼
	});

tgInputArea 인풋 토글 이벤트 : inputTgEvent();

중개형ISA 기타(인풋 토글 예시)

HTML 소스

	<div class="tgInputArea">
		<div class="info_check info_check_type6">
			<label class="btn_chk"><input type="radio" name="infoCheck1"><span>중개형ISA</span></label>
			<label class="btn_chk tgIpBtn"><input type="radio" name="infoCheck1"><span>기타(인풋 토글 예시)</span></label>
			<div class="inputbox tgIpTxt" style="display: none;">
				<input type="text" placeholder="기타 입력">
				<span class="input_line"></span>
			</div>
		</div>
	</div>

JS 소스

	$(document).ready(function () {
		inputTgEvent(); // 인풋 토글 이벤트 (기타 input show/hide)
	});

accordion_list 아코디언 : [JS] accordion();

타이틀: 내용

타이틀: 내용

타이틀: 내용

HTML 소스

	<div class="accordion_list acdArea">
		<dl>
			<dt class="acdBtn active">타이틀</dt>
			<dd class="acdCont" style="display: block;">
				내용
			</dd>
		</dl>
		<dl>
			<dt class="acdBtn">타이틀</dt>
			<dd class="acdCont">
				내용
			</dd>
		</dl>
		<dl>
			<dt class="acdBtn">타이틀</dt>
			<dd class="acdCont">
				내용
			</dd>
		</dl>
	</div>

JS 소스

	$(document).ready(function () {
		accordion(); // 아코디언
	});

switch_list 스위치 토글형(ON일 때 펼침) : [JS] switchTgEvent();

스위치 토글형 타이틀

스위치 토글 컨텐츠 영역

HTML 소스

	<ul class="switch_list">
		<li>
			<div class="switch_top">
				<div class="left_area">
					<p class="txt">스위치 토글형 타이틀</p>
				</div>
				<div class="right_area">
					<label class="tg_switch" onclick="switchTgEvent(this, 'switchTgCont');"><!-- D: 토글할 영역 class와 연결 -->
						<input type="checkbox" name="">
						<span class="switch_bg"></span>
					</label>
				</div>
			</div>
			<div class="switch_cont switchTgCont" style="display: none;">
				스위치 토글 컨텐츠 영역
			</div>
		</li>
	</ul>

switch_list 스위치 토글형(ON일 때 닫힘) : [JS] switchTgEventReversal();

스위치 토글형 타이틀

스위치 토글 컨텐츠 영역

HTML 소스

	<ul class="switch_list">
		<li>
			<div class="switch_top">
				<div class="left_area">
					<p class="txt">스위치 토글형 타이틀</p>
				</div>
				<div class="right_area">
					<label class="tg_switch" onclick="switchTgEventReversal(this, 'switchTgCont2');"><!-- D: 토글할 영역 class와 연결 -->
						<input type="checkbox" name="">
						<span class="switch_bg"></span>
					</label>
				</div>
			</div>
			<div class="switch_cont switchTgCont2">
				스위치 토글 컨텐츠 영역
			</div>
		</li>
	</ul>

작은 탭 : tab_style1

탭 버튼
탭 버튼

탭 내용1

탭 내용2

HTML 소스

	<div class="tabArea">
		<ul class="tab_style1">
			<li class="tabBtn on" data-tab="signTab1">탭 버튼</li>
			<li class="tabBtn" data-tab="signTab2">탭 버튼</li>
		</ul>
		<div class="tab_cont tabCont active" id="signTab1">
			탭 내용1
		</div>
		<div class="tab_cont tabCont" id="signTab2">
			탭 내용2
		</div>
	</div>

JS 소스

	$(document).ready(function () {
		tab(); // 탭 관련 js
	});

큰 탭 : tab_style2

탭 버튼
탭 버튼 (9)
탭 버튼 (10)
탭 버튼 (1)

탭 내용1

탭 내용2

탭 내용3

탭 내용4

HTML 소스

	<div class="tabArea">
		<ul class="tab_style2">
			<li class="tabBtn on" data-tab="workTab1">
				<i class="micon_write"></i> 탭 버튼
			</li>
			<li class="tabBtn" data-tab="workTab2">
				<i class="micon_save"></i> 탭 버튼
				<span>(9)</span>
			</li>
			<li class="tabBtn" data-tab="workTab3">
				<i class="micon_check"></i> 탭 버튼
				<span>(10)</span>
			</li>
			<li class="tabBtn" data-tab="workTab4">
				<i class="micon_fail"></i> 탭 버튼 <span>(1)</span>
			</li>
		</ul>
		<div class="tabCont active" id="workTab1">
			탭 내용1
		</div>
		<div class="tabCont" id="workTab2">
			탭 내용2
		</div>
		<div class="tabCont" id="workTab3">
			탭 내용3
		</div>
		<div class="tabCont" id="workTab4">
			탭 내용4
		</div>
	</div>

JS 소스

	$(document).ready(function () {
		tab(); // 탭 관련 js
	});

중간 탭 : tab_style3

탭 버튼
탭 버튼

탭 내용1

탭 내용2

HTML 소스

	<div class="tabArea">
		<ul class="tab_style3">
			<li class="tabBtn on" data-tab="midTab1">
				<i class="micon_docu"></i> 탭 버튼
			</li>
			<li class="tabBtn" data-tab="midTab2">
				<i class="micon_docus"></i> 탭 버튼
			</li>
		</ul>
		<div class="tabCont active" id="midTab1">
			탭 내용1
		</div>
		<div class="tabCont" id="midTab2">
			탭 내용2
		</div>
	</div>

JS 소스

	$(document).ready(function () {
		tab(); // 탭 관련 js
	});

HTML 소스

IBK투자증권 ODS 서비스 HTML 화면목록

폰트(FONT)

컬러(COLOR)

타이틀(TITLE)

컨텐츠 타이틀

리스트(LIST)

도트형 리스트

도트형 리스트2

숫자 리스트

라디오/체크박스(RADIO/CHECKBOX) 버튼형 : input type=radio, type=checkbox 사용 가능

버튼형 라디오/체크박스 : info_check_type1

버튼형 라디오/체크박스 : info_check_type2

버튼형 라디오/체크박스 : info_check_type3

버튼형 라디오/체크박스 : info_check_type4

체크박스(CHECKBOX) 기본형 사이즈별

big : big_che

middle : middle_che

small : small_che

컨텐츠 형 : cont_che

switch : tg_switch

체크박스: 박스 리스트형

체크박스 : 올체크(ALL CEHCK)

인풋(INPUT)

인풋 기본형

인풋 disabled

인풋 readonly

데이터피커(DATEPICKER)

데이터피커

검색인풋(INPUT SEARCH)

검색인풋

텍스트입력폼(TEXTAREA)

기본 텍스트입력 : memo_wrap2

메모 : memo_wrap

셀렉트(SELECT)

메인 : selectbox selectbox2

기본형(select) : select_area selectArea

디자인 셀렉트(ul li) : selectArea

폼 레이아웃(FORM LAYOUT) : flex 속성으로 퍼센트로 늘어남

인증번호

bar가 있는 타입(전화번호, 주민등록번호 등)

이메일

주소

버튼(BUTTON) : button, a, span 가능

컨텐츠 버튼

fixed 버튼 : 컨텐츠

fixed 버튼 : 팝업

테이블 안 버튼

등급표시(Label label_grade)

둥근 버튼(blue_line, blue_line_arrow)

아이콘형 버튼

gnb

gnb공통 : 버튼모음

gnb : 메인

gnb : 서브메인(업무선택)

테이블(TABLE)

table.list03

table.table03

table01(목록형)

table01(왼쪽 정렬 예시)

table02(상세)

table04

table05

table06

결과 없음

no-result (결과 없음 table형)

no-result (결과 없음 상품 목록형)

페이지네이션(PAGENATION)

pager(페이저)

pager2(페이저)

목록 레이아웃(UL LI)

product_list(상품 목록형) : 장외 채권

product_list(상품 목록형) : 공시 정보

line_chk_list(체크박스형 목록)

qna_list(QnA 리스트 레이아웃 (투자자정보확인))

qna_list2(QnA 리스트 레이아웃 (종합계좌 개설))

qna_list3(QnA 리스트 레이아웃 (종합계좌 개설 가로형))

qna_list4(QnA 리스트 레이아웃(위임장))

switch_list(스위치 리스트)

토글형

toggleBtn 토글 버튼 : [JS] toggleBtn();