#

- Title
- List
- Tab
- Button
- Box
- Tooltip

information

1. 문서형 선언
  <!DOCTYPE html>
2. 주언어 명시
  <html lang="ko">
3. 인코딩 지정
  <meta charset="utf-8">
4. 브라우저 타이틀
  <title> 현재페이지 | 하나 1Q 다이렉트 보험 </title>
5. 모바일웹 viewport 설정
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=medium-dpi" />
6. 메뉴건너띄기 제공
  <div id="skipToContent">
  <a href="#container">본문 바로가기</a>
  </div>
7. 브라우저 설정
  모바일 웹으로 파일은 크롬, 파이어폭스, ie9이상, 사파리등 표준 브라우저에 최적화되어있습니다.
8. 테이블 주의사항
  - caption : <caption>예) 테이블내용 요약</caption>
  - summary : html5 문법은 summary를 제공하지 않으며, caption이 기능을 포함한다.
  - col : html5 문법은 width="" 형식을 제공하지 않으므로 class, style을 사용한다.
  - scope : <th scope="col">, <th scope="row">
  - 스크롤 생성으로 인해 th와 td를 분리해야하는 경우 th를 숨김으로 제공한다.

Title,Text guide

1-1) Title

# 제목

제목

### 제목

하나생명에서 알려드리는 새로운소식!!

## 계약 전 알릴 의무사항

2-1) Text / Point Color 경우

point color/ #000

point color/ #333

point color/ #008485

point color/ #ff0064

하나생명 https://1q.hanalife.co.kr/

List guide

1) 1개의 경우

1-1) <p class="refer">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

상품설명서, 보험계약 청약서, 비교안내 확인서, 보험증권 등 보험계약자료는 전자기록매체, 전자우편 등 전자적인 방법으로 수령함에 동의합니다.
다만, 보험계약자나 보험회사가 전자기록매체 또는 전자적 방법으로 보험계약 자료를 교부하거나 수령할 수 없는 경우에는 서면자료로 대신 할 수 있습니다.

1-2) <p class="consult">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

1-3) <p class="dashList">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

1-4) <p class="dotSList">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

1-5) <p class="dotGnList">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

1-6) <p class="report">

비밀번호 입력 시 영문 대/소문자를 확인하실 수 있습니다.

2) 여러개의 경우

2-1) <ul class="referList">

- 중요한 사항이란

  회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

- 중요한 사항이란

  회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 중요한 사항이란
  - 가나다라마바사가나다라마바사
  - 가나다라마바사가나다라마바사

2-2) 라인이 있을 경우 <p class="referList line">

- 중요한 사항이란

  회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

- 중요한 사항이란

  회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

- 중요한 사항이란

  회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-3) <ul class="dashList">

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-4) <ul class="dashSList">

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-5) <ul class="dotList">

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-6) <ul class="dotGnList">

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-7) <ul class="dotSList">

- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.
- 회사가 그 사실을 알았더라면 보험계약의 청약을 거절하거나 보험가입금액 한도제한, 일부 보장제외, 보험금삭감, 보험료 할증과 같이 조건부로 인수하는 등 계약인수에 영행을 미치는 사항을 말합니다.

2-8) <ul class="triList">

- 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
- 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
- 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
- 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

2-9) <ul class="starSList">

- 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
- 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
- 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
- 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

2-10) <ul class="bicStarList"> 데이터로 ※ 이 들어오는경우

- ※ 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
- ※ 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
- ※ 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
- ※ 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

2-11) <ol class="txtList">

- 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
- 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
- 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
- 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

2-12) <ol class="numList">

1. 1. 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
2. 2. 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
3. 3. 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
4. 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

2-13) <ol class="numList type02">

1. 가. 보험기간 중 피보험자의 사망으로 인하여 이 약관에서 규정하는 보험금 지급사유가 더 이상 발생할 수 없는 경우에는 이 보험계약은 그때부터 효력이 없습니다.
2. 나. 대중교통 이용중 교통재해 : 승객으로서 대중교통 이용중(탑승중/승하차중/승강장내 대기 중) 발생하는 급격하고도 우연한 외래의 사고
3. 다. 대중교통 : 항공기, 여객선, 지하철, 전철, 기차, 시내버스, 시외버스, 택시 등 (전세버스, 셔틀버스는 제외)
4. 라. 이 상품은 순수보장성보험으로 만기환급금이 없습니다.

상단으로

Tab guide

1-1) <ul class="tabType01">

- 내용
- 내용

2-1) <ul class="stepType01"> / <ul class="stepType01 offer"> 컨텐츠마다 이미지가 다른 경우 다중 클래스 사용

- 개인정보
- 의무사항
- 문서확인 선택됨
- 보험료납부
- 가입완료

- 개인정보 선택됨
- 문서확인
- 보험료납부
- 가입완료

1. STEP1 모바일(하나멤버스)
   APP다운로드
2. STEP2 이름, 생년월일,
   성별, 휴대폰번호,
   이메일 기입
3. STEP3 하나멤버스
   회원가입 완료

1. STEP1 당사 홈페이지에
   가입
2. STEP2 사이버창구
3. STEP3 보험계약
   대출서비스
4. STEP4 보험계약
   조회 / 신청
5. STEP5 보안카드입력
6. STEP6 공인인증서
   입력

Button guide

- 이메일상담
- 알아두실 사항
- 약관 다운로드

- 이메일상담
- 알아두실 사항

1개 버튼

2개 버튼

청약하기 보장내역
청약하기 약관다운로드 고지입력내용 보장내역

3개 버튼

가입하기 이메일전송 보장내용
청약하기 약관다운로드 보장내역
상담하기 가입하기

상단으로

Box guide

1-1) 노란 박스 기본형으로 1개의 알림이 있을 경우 <div class="boxStyle01"> / <p>

다음 사항은 보험회사가 보험계약의 청약을 인수하는데 필요한 자료이므로 사실대로 작성하셔야 합니다.

1-2) 노란 박스 기본형으로 여러 개의 알림이 있을 경우 <div class="boxStyle01"> / <ul>

제목

- 목록입니다.
- 목록입니다.

- 목록입니다.
- 목록입니다.

1-3) 노란 박스 기본형으로 블릿이 없이 글만 있을 경우 <div class="boxStyle01 txtType01"> / <ul>

고객님이 입력하신 정보를 바탕으로 가입문서를 확인하는 단계입니다. 모든 청약문서 확인이 끝난 후 다음단계 진행이 가능 합니다.

1-4) 노란 박스 다중 클래스형으로 컨텐츠마다 이미지가 다른 경우 <div class="boxStyle01 offer02">

내용

2-1) 핑크 박스 다중 클래스형으로 컨텐츠마다 이미지가 다른 경우 <div class="boxStyle02 offer05">

보험료 결제가 완료되었습니다!! 청약문서를 다운로드 하시어 보장내용 및 계약사항을 반드시 확인 하시기 바랍니다.

3-1) 하늘색 박스 다중 클래스형으로 컨텐츠마다 이미지가 다른 경우 <div class="boxStyle03 plan">

'설계담기'로 저장된 내역입니다. 고객님의 쿠키정보로 제공, 화면을 닫게되면 보험설계 내역 확인이 불가능합니다.(로그인없이 사용가능)

4-1) 회색 박스 다중 클래스형으로 컨텐츠 센터 정렬 경우 <div class="boxStyle04 tc">

홍길동 고객님께서 보험가입 신청하신 상품은
(무)하나1Q정기보험Save 입니다.

5-1) 상아색 박스 안내리스트 <div class="allim_box">

알려드립니다.

- 일부증권사 CMA 계좌는 계좌의 특성에 따라 등록이 제한될 수 있습니다. 해당 증권사에 확인하시기 바랍니다.
- 자동이체계좌 변경 시 기등록된 원리금 분할상환 신청은 자동해지 됩니다.

5-2) 상아색 박스 컨텐츠 핑크강조 안내리스트 <div class="allim_box"> <strong, li class="pink">

반드시 확인하실 사항

- 보험금 청구서류에 고의로 사실과 다른 것을 기재하거나 그 서류 또는 증거를 위·변조하는 행위는 명백한 보험사기이며, 보험금 지급이 거절됩니다.
- 보험업법 제 95조의2(설명의무 등) ③항 및 ④항 등 법령에 따라 담당자(연락처)를 안내받고, 예상심사기관과 지급절차에 대한 아래의 설명을 듣고, 개인(신용)정보처리 동의서에 대한 내용을 확인 후 동의합니다.
  - 청구하신 보험금의 심사담당부서는 고객서비스부이며, 보험금의 지급사유가 해당되는 경우, 청구서류를 접수한 날부터 3영업일 이내(다만, 지급사유의 조사나 확인이 필요한 경우에는 10영업일 이내)에 보험금을 지급하여 드리며, 방문조사가 필요한 경우, 30영업일 이내에 지급 여부를 결정하여 별도로 고객님에게 안내드리며, 보험금 지급이 지연될 경우, 해당 약관에 따라 지연이자를 지급하여 드립니다.
- 보험금 심사조사등 업무의 일부는 위탁업체(손해사정법인)을 통하여 처리될 수 있습니다.

상단으로

Tooltip

도움말

추가 확인사항은?
  미국의 해외금융계좌신고제도(해외거주자 및 해외납세자 확인)와 관련하여 대한민국과 미국 사이에 체결한 정부간 협정에 따른 국내 법률에 의하여 필수로 입력하셔야 합니다. 또한, 입력하신 내용의 변경이 있을 경우 30일 이내에 당사에 통지해 주셔야 합니다. 만일 정보 제공을 거부하는 경우 관련 법에 의해 고객님의 인적사항 및 계약 관련 정보가 국세청에 보고될 수 있습니다.

상단으로