375 lines
12 KiB
HTML
375 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>9x16 모바일 리디자인</title>
|
||
<style>
|
||
:root{
|
||
/* Color system */
|
||
--brand: #0BA360; /* DB 계열 그린 톤 */
|
||
--brand-dark: #0A5B3D;
|
||
--brand-light: #E6F5EE;
|
||
--accent: #E94E3C; /* 강조(수치/합계) */
|
||
--ink: #122129; /* 기본 본문 */
|
||
--muted: #5B6B73; /* 보조 본문 */
|
||
--surface: #FFFFFF;
|
||
--bg: #F4F7F6;
|
||
|
||
/* Typography */
|
||
--font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
--fs-hero: 28px;
|
||
--fs-h1: 22px;
|
||
--fs-h2: 18px;
|
||
--fs-h3: 15px;
|
||
--fs-body: 14px;
|
||
--fs-small: 12px;
|
||
--lh-tight: 1.2;
|
||
--lh-normal: 1.5;
|
||
--lh-relaxed: 1.7;
|
||
|
||
/* Spacing scale (4px grid) */
|
||
--space-0: 0;
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-7: 28px;
|
||
--space-8: 32px;
|
||
--space-10: 40px;
|
||
--space-12: 48px;
|
||
|
||
/* Radius & shadow */
|
||
--radius-6: 6px;
|
||
--radius-12: 12px;
|
||
--radius-16: 16px;
|
||
--shadow-1: 0 4px 12px rgba(0,0,0,.06);
|
||
--shadow-2: 0 8px 20px rgba(0,0,0,.10);
|
||
}
|
||
|
||
/* Layout scaffold */
|
||
body{
|
||
margin:0;
|
||
background: var(--bg);
|
||
font-family: var(--font-sans);
|
||
color: var(--ink);
|
||
}
|
||
.deck{
|
||
max-width: 470px;
|
||
margin: 0 auto;
|
||
padding: var(--space-6) var(--space-4) var(--space-10);
|
||
display: grid;
|
||
gap: var(--space-6);
|
||
}
|
||
.page{
|
||
aspect-ratio: 9 / 16;
|
||
background: var(--surface);
|
||
border-radius: var(--radius-16);
|
||
box-shadow: var(--shadow-1);
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
overflow: hidden;
|
||
}
|
||
.page .bar{
|
||
height: 10px;
|
||
background: linear-gradient(90deg, var(--brand), #12C77D);
|
||
}
|
||
.page .content{
|
||
padding: var(--space-6);
|
||
overflow: auto;
|
||
}
|
||
.page .footer{
|
||
padding: var(--space-2) var(--space-6) var(--space-4);
|
||
display:flex;align-items:center;justify-content:flex-end;
|
||
color: var(--muted);
|
||
font-size: var(--fs-small);
|
||
}
|
||
|
||
/* Typography system */
|
||
.hero{
|
||
font-size: var(--fs-hero);
|
||
line-height: var(--lh-tight);
|
||
font-weight: 800;
|
||
letter-spacing: -0.2px;
|
||
color: var(--brand-dark);
|
||
margin: 0 0 var(--space-3) 0;
|
||
}
|
||
h1{
|
||
font-size: var(--fs-h1);
|
||
line-height: var(--lh-tight);
|
||
font-weight: 800;
|
||
letter-spacing: -0.2px;
|
||
color: var(--brand-dark);
|
||
margin: 0 0 var(--space-4) 0;
|
||
}
|
||
h2{
|
||
font-size: var(--fs-h2);
|
||
line-height: var(--lh-tight);
|
||
font-weight: 700;
|
||
color: var(--brand);
|
||
margin: var(--space-5) 0 var(--space-2) 0;
|
||
}
|
||
h3{
|
||
font-size: var(--fs-h3);
|
||
line-height: var(--lh-tight);
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
margin: var(--space-4) 0 var(--space-2) 0;
|
||
}
|
||
.txt{
|
||
font-size: var(--fs-body);
|
||
line-height: var(--lh-relaxed);
|
||
color: var(--ink);
|
||
margin: 0 0 var(--space-3) 0;
|
||
}
|
||
.muted{ color: var(--muted); }
|
||
.chip{
|
||
display:inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
background: var(--brand-light);
|
||
color: var(--brand-dark);
|
||
font-size: var(--fs-small);
|
||
font-weight: 700;
|
||
}
|
||
.panel{
|
||
background: #F9FCFB;
|
||
border: 1px solid #E3F3EC;
|
||
border-radius: var(--radius-12);
|
||
padding: var(--space-4);
|
||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04);
|
||
}
|
||
.stat{
|
||
color: var(--accent);
|
||
font-weight: 800;
|
||
letter-spacing: -0.2px;
|
||
}
|
||
.grid-2{
|
||
display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
|
||
}
|
||
.mono{
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
/* Spacing utilities */
|
||
.mt-0{ margin-top: var(--space-0); }
|
||
.mt-2{ margin-top: var(--space-2); }
|
||
.mt-3{ margin-top: var(--space-3); }
|
||
.mt-4{ margin-top: var(--space-4); }
|
||
.mt-5{ margin-top: var(--space-5); }
|
||
.mt-6{ margin-top: var(--space-6); }
|
||
.mb-0{ margin-bottom: var(--space-0); }
|
||
.mb-2{ margin-bottom: var(--space-2); }
|
||
.mb-3{ margin-bottom: var(--space-3); }
|
||
.mb-4{ margin-bottom: var(--space-4); }
|
||
.mb-5{ margin-bottom: var(--space-5); }
|
||
.mb-6{ margin-bottom: var(--space-6); }
|
||
.px-4{ padding-left: var(--space-4); padding-right: var(--space-4); }
|
||
|
||
/* Decorative */
|
||
.bullet{
|
||
position: relative;
|
||
padding-left: 14px;
|
||
}
|
||
.bullet::before{
|
||
content:"";
|
||
position:absolute; left:0; top:0.7em;
|
||
width:6px;height:6px;border-radius:50%;
|
||
background: var(--brand);
|
||
}
|
||
|
||
/* Responsive helper for smaller phones */
|
||
@media (max-width: 360px){
|
||
:root{
|
||
--fs-hero: 24px;
|
||
--fs-h1: 20px;
|
||
--fs-h2: 16px;
|
||
--fs-h3: 14px;
|
||
--fs-body: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="deck">
|
||
|
||
<!-- Page 1 -->
|
||
<section class="page" aria-label="자부상 개요">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>영업교육파트 보험업계 핫 이슈 플러스 - ① 자부상</h1>
|
||
|
||
<h3>위자료</h3>
|
||
<p class="txt">상해 급수별로 정액을 지급함 ( 염좌는 15만원 )</p>
|
||
|
||
<h3>휴업손해</h3>
|
||
<p class="txt">소득 신고 및 입증 되는 소득의 85%를 입원기간 동안 인정<br>( 15% 공제 이유는? 경제활동 과정에서의 비용을 차감 ) 3,144,413원</p>
|
||
|
||
<h3>실제 치료비</h3>
|
||
<p class="txt">말 그대로의 실제로 발생한 치료비, 요건 병원에다가<br>보험사에서 납부 해주겠죠?</p>
|
||
|
||
<h3>향후 치료비</h3>
|
||
<p class="txt">Point, 합의라는 과정은 상호간의 협의.<br>지금까지 100만원 어치 치료받아서 차도가 있으니, 향후에<br>받을 치료비를 예를들어 50만원 지급하기로 하고 합의하는 항목<br>(약관상에 항목에는 없음, 단 합의를 위한 조정 항목)</p>
|
||
|
||
<h3>기타 손해배상금</h3>
|
||
<p class="txt">통원시에 교통비, 1회 통원시마다 8천원의 교통비 지급.<br>입원은 해당 안됨, 만일 하루에 병원을 2곳가면 1만6천원</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 2 -->
|
||
<section class="page" aria-label="자부상 사례 산출">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>염좌 12급 / 6일입원 / 2일 통원 / 무과실 / 주부 / 120만<br>원</h1>
|
||
|
||
<div class="grid-2 mt-4">
|
||
<div class="panel">
|
||
<h3 class="mb-2">위자료</h3>
|
||
<p class="txt">12급 : <span class="stat">150,000원</span></p>
|
||
</div>
|
||
<div class="panel">
|
||
<h3 class="mb-2">휴업손해</h3>
|
||
<p class="txt mono">3,144,413 / 30일 * 85% * 6일 = <span class="stat">534,546원</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2 mt-4">
|
||
<div class="panel">
|
||
<h3 class="mb-2">기타손배금</h3>
|
||
<p class="txt mono">8,000 * 2일 = <span class="stat">16,000원</span></p>
|
||
</div>
|
||
<div class="panel">
|
||
<h3 class="mb-2">향후치료비</h3>
|
||
<p class="txt"><span class="stat">499,454원</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel mt-6">
|
||
<p class="txt muted">위자료<br>휴업손해<br>기타손배금<br>향후치료비</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 3 -->
|
||
<section class="page" aria-label="신담보 출시">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>활동 이슈 - 신담보 출시</h1>
|
||
<h2>하이클래스 암주요치료비 2종</h2>
|
||
<p class="txt chip mt-2">암주요치료비(상급종합병원플러스)</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 4 -->
|
||
<section class="page" aria-label="가입실적 비중 수치">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>주요 수치</h1>
|
||
<div class="panel mono">
|
||
<p class="txt mb-2">16.3 31.5 37.1 12.8 24.9 28.2<br>24.1 40.6 45.3 20.2 31.4 33.3<br>12.7 28.3 32.8 9.5 23.7 26.7<br>9.9 17.5 22.8 2.8 8.0 11.9</p>
|
||
<p class="txt">24.3 35.8 43.6 11.7 22.0 28.6<br>24.4 47.9 57.8 13.7 31.8 40.4<br>23.3 30.1 34.6 11.2 17.2 20.2<br>33.6 31.8 34.7 7.0 8.7 11.7</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 5 -->
|
||
<section class="page" aria-label="암 인식">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>암은 우연히 생기는 질병<br>이다?</h1>
|
||
<p class="txt">자료 : 존스홉킨스대 사이언스 논문</p>
|
||
<p class="txt bullet">암은 재수없는 사람이 걸린다? 암은 누가 걸릴지 모른다는 것이 모범답안</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 6 -->
|
||
<section class="page" aria-label="국가암등록통계">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>‘01-’05 ‘06-’10 ‘11-’15 ‘16-’20 ‘18-’22</h1>
|
||
<p class="txt">전체 남자(폐암/위암) 여자(유방암/대장암)<br>(단위 : %)</p>
|
||
<p class="txt mono stat">54.2%(01-05) 65.5%(06-10)70.8%(11-15)72.9%(18-22)</p>
|
||
<p class="txt mt-3">2025년 1월 2일 22년 국가암등록통계 발표</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 7 -->
|
||
<section class="page" aria-label="암 발생 순위 및 특징">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>암 발생</h1>
|
||
<div class="grid-2">
|
||
<div>
|
||
<p class="txt">갑상선암<br>폐암<br>대장암<br>위암<br>유방암<br>전립선암<br>간암<br>췌장암<br>담낭 및 기타담도 암<br>신장암</p>
|
||
</div>
|
||
<div>
|
||
<p class="txt">갑상선암<br>대장암<br>폐암<br>위암<br>유방암<br>전립선암<br>간암<br>췌장암<br>담낭 및 기타담도 암<br>신장암</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel mt-4">
|
||
<p class="txt">갑상선암(여성2위)<br>대장암(남/여성3<br>위)<br>폐암(남성1위/여성4<br>위)<br>유방암(여성1위)<br>위암<br>전립선암(남성2위)<br>간암(남성5위)<br>췌장암<br>신장암<br>담낭 및 기타담도 암</p>
|
||
</div>
|
||
|
||
<div class="grid-2 mt-4">
|
||
<p class="txt bullet">남성 比 여성3배 ↑</p>
|
||
<p class="txt bullet">사망률 1위 / 감각신경 X</p>
|
||
<p class="txt bullet">뒤끝 있는 암 / 10년 후 재발 25% / 5위->4위</p>
|
||
<p class="txt bullet">서양형 암 → 한국형 암</p>
|
||
</div>
|
||
|
||
<p class="txt mt-3">21년 남성 4위</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 8 -->
|
||
<section class="page" aria-label="검사 안내">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>구 분 마스토체크</h1>
|
||
<p class="txt">대 상 전연령<br>정확도 특허기준 92%<br>1ml의 혈액채혈로 검사 가능<br>치밀유방의 경우 높은 정확도<br>특 징<br>비 용 8~10만원</p>
|
||
|
||
<h2 class="mt-4">PSA 수치 전립선암 진단 확률</h2>
|
||
<div class="panel mono">
|
||
<p class="txt">0~4 12.4~16.0<br>4~10 15.9~19.6<br>10~20 33.0~34.1<br>20~100 76.0~77.6</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 9 -->
|
||
<section class="page" aria-label="과거와 현재">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>과거</h1>
|
||
<p class="txt">암<br>뇌/심</p>
|
||
<h1 class="mt-5">현재</h1>
|
||
<p class="txt">암<br>뇌/심</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
<!-- Page 10 -->
|
||
<section class="page" aria-label="이슈 기사">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h1>건강보험 통계분석해보니. 서울 원정 암 환자, 더 늘었다</h1>
|
||
<p class="txt">이데일리 24.12.3</p>
|
||
<p class="txt">국립암센터(고양<br>시) 원자력병원(서울/노원구)</p>
|
||
</div>
|
||
<div class="footer">9x16</div>
|
||
</section>
|
||
|
||
</main>
|
||
</body>
|
||
</html> |