434 lines
14 KiB
HTML
434 lines
14 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-primary: #0a8f55; /* DB green */
|
||
--brand-primary-2: #0b6f44; /* darker green */
|
||
--brand-accent: #ff7a00; /* accent orange */
|
||
--brand-accent-2: #ffd9b3; /* soft accent */
|
||
--text-strong: #111111;
|
||
--text-normal: #222222;
|
||
--text-muted: #606873;
|
||
--bg-page: #f5f7f8;
|
||
--bg-slide: #ffffff;
|
||
--border: #e5e8eb;
|
||
--success: #12b886;
|
||
--warning: #f08c00;
|
||
--info: #1971c2;
|
||
|
||
/* Typography */
|
||
--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Helvetica Neue", Arial, "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
||
--fs-xxl: 28px;
|
||
--fs-xl: 22px;
|
||
--fs-lg: 18px;
|
||
--fs-md: 16px;
|
||
--fs-sm: 14px;
|
||
--fs-xs: 12px;
|
||
|
||
/* 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;
|
||
|
||
/* Elevation & Radius */
|
||
--radius-sm: 8px;
|
||
--radius-md: 14px;
|
||
--radius-lg: 20px;
|
||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 6px 20px rgba(0,0,0,0.10);
|
||
}
|
||
|
||
/* Reset-ish */
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{
|
||
margin:0;
|
||
font-family:var(--font-sans);
|
||
color:var(--text-normal);
|
||
background:linear-gradient(180deg, #f6fbf8, #f5f7f8);
|
||
}
|
||
|
||
/* Utilities */
|
||
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
|
||
.row{display:flex;gap:var(--space-4);align-items:flex-start;flex-wrap:wrap}
|
||
.center{display:flex;justify-content:center;align-items:center}
|
||
.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
|
||
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
|
||
.p-0{padding:0}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}
|
||
.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}.text-md{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}.text-xxl{font-size:var(--fs-xxl)}
|
||
.muted{color:var(--text-muted)}
|
||
.strong{font-weight:700}
|
||
.accent{color:var(--brand-accent)}
|
||
.chip{display:inline-block;border-radius:999px;background:var(--brand-accent-2);padding:4px 10px;color:#7a3e00;font-weight:600}
|
||
.badge{display:inline-block;border-radius:6px;background:#eef6f0;color:var(--brand-primary-2);padding:3px 8px;font-weight:600}
|
||
|
||
/* Deck & Slides */
|
||
.deck{
|
||
width:100%;
|
||
max-width:900px;
|
||
margin:0 auto;
|
||
padding:var(--space-8) var(--space-4) var(--space-12);
|
||
}
|
||
.slides{
|
||
display:grid;
|
||
grid-template-columns:1fr;
|
||
gap:var(--space-8);
|
||
}
|
||
.slide{
|
||
width:min(100%, 460px);
|
||
aspect-ratio:9/16;
|
||
background:var(--bg-slide);
|
||
border-radius:var(--radius-lg);
|
||
box-shadow:var(--shadow-md);
|
||
margin:0 auto;
|
||
display:flex;
|
||
flex-direction:column;
|
||
overflow:hidden;
|
||
}
|
||
.slide .bar{
|
||
height:64px;
|
||
background:linear-gradient(90deg, var(--brand-primary), var(--brand-primary-2));
|
||
}
|
||
.slide .content{
|
||
flex:1;
|
||
padding:20px 18px 14px 18px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
.slide h2{
|
||
font-size:var(--fs-xl);
|
||
line-height:1.25;
|
||
margin:0 0 var(--space-3) 0;
|
||
color:var(--text-strong);
|
||
letter-spacing:-0.2px;
|
||
}
|
||
.slide h3{
|
||
font-size:var(--fs-lg);
|
||
line-height:1.3;
|
||
margin:var(--space-3) 0 var(--space-2) 0;
|
||
color:var(--text-strong);
|
||
}
|
||
.slide p{
|
||
font-size:var(--fs-md);
|
||
line-height:1.55;
|
||
margin:0 0 var(--space-2) 0;
|
||
}
|
||
.card{
|
||
border:1px solid var(--border);
|
||
border-radius:var(--radius-md);
|
||
padding:14px;
|
||
background:#fff;
|
||
}
|
||
.data-block{
|
||
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
font-size:var(--fs-sm);
|
||
background:#fbfcfd;
|
||
border:1px solid var(--border);
|
||
border-radius:10px;
|
||
padding:12px;
|
||
line-height:1.55;
|
||
overflow:auto;
|
||
white-space:pre-wrap;
|
||
}
|
||
.kpi{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding:10px 12px;border:1px dashed var(--border);border-radius:10px;
|
||
background:#fcfffd;
|
||
font-size:var(--fs-md);
|
||
}
|
||
.footer{
|
||
height:42px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
padding:0 14px;
|
||
border-top:1px solid var(--border);
|
||
background:#fafcfa;
|
||
color:var(--text-muted);
|
||
font-size:var(--fs-xs);
|
||
}
|
||
.dot{
|
||
width:8px;height:8px;border-radius:50%;
|
||
background:var(--brand-primary);
|
||
box-shadow:0 0 0 4px rgba(10,143,85,0.12);
|
||
}
|
||
|
||
@media (max-width:420px){
|
||
.slide{width:100%}
|
||
.slide h2{font-size:20px}
|
||
.slide p{font-size:15px}
|
||
.data-block{font-size:13px}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="deck">
|
||
<div class="slides">
|
||
|
||
<!-- Slide 1 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>활동 이슈 - 신담보 출시</h2>
|
||
<div class="stack">
|
||
<p>하이클래스 암주요치료비 2종<br>암주요치료비(상급종합병원플러스)</p>
|
||
<div class="row">
|
||
<span class="chip">9x16 모바일</span>
|
||
<span class="badge">컬러감 유지</span>
|
||
<span class="badge">텍스트 원문</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>1 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 2 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>위자료 / 휴업손해 / 실제 치료비 / 향후 치료비 / 기타 손해배상금</h2>
|
||
<div class="card">
|
||
<p>위자료 상해 급수별로 정액을 지급함 ( 염좌는 15만원 )</p>
|
||
<p>휴업손해<br>소득 신고 및 입증 되는 소득의 85%를 입원기간 동안 인정<br>( 15% 공제 이유는? 경제활동 과정에서의 비용을 차감 ) 3,144,413원</p>
|
||
<p>실제 치료비 말 그대로의 실제로 발생한 치료비, 요건 병원에다가<br>보험사에서 납부 해주겠죠?</p>
|
||
<p>향후 치료비<br>Point, 합의라는 과정은 상호간의 협의.<br>지금까지 100만원 어치 치료받아서 차도가 있으니, 향후에<br>받을 치료비를 예를들어 50만원 지급하기로 하고 합의하는 항목<br>(약관상에 항목에는 없음, 단 합의를 위한 조정 항목)</p>
|
||
<p>기타 손해배상금 통원시에 교통비, 1회 통원시마다 8천원의 교통비 지급.<br>입원은 해당 안됨, 만일 하루에 병원을 2곳가면 1만6천원</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>2 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 3 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>염좌 12급 / 6일입원 / 2일 통원 / 무과실 / 주부 / 120만<br>원</h2>
|
||
<div class="stack">
|
||
<div class="row">
|
||
<span class="badge">위자료</span>
|
||
<span class="badge">휴업손해</span>
|
||
<span class="badge">기타손배금</span>
|
||
<span class="badge">향후치료비</span>
|
||
</div>
|
||
<div class="card">
|
||
<p>12급 : 150,000원</p>
|
||
<p>3,144,413 / 30일 * 85% * 6일 = 534,546원</p>
|
||
<p>8,000 * 2일 = 16,000원</p>
|
||
<p class="strong accent">499,454원</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>3 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 4 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>25년 주요치료비 가입실적 비중</h2>
|
||
<div class="data-block">
|
||
16.3 31.5 37.1 12.8 24.9 28.2
|
||
24.1 40.6 45.3 20.2 31.4 33.3
|
||
12.7 28.3 32.8 9.5 23.7 26.7
|
||
9.9 17.5 22.8 2.8 8.0 11.9
|
||
</div>
|
||
<p class="muted text-sm mt-2">단위 : %</p>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>4 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 5 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>25년 주요치료비 가입실적 비중</h2>
|
||
<div class="data-block">
|
||
24.3 35.8 43.6 11.7 22.0 28.6
|
||
24.4 47.9 57.8 13.7 31.8 40.4
|
||
23.3 30.1 34.6 11.2 17.2 20.2
|
||
33.6 31.8 34.7 7.0 8.7 11.7
|
||
</div>
|
||
<p class="muted text-sm mt-2">단위 : %</p>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>5 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 6 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>암은 우연히 생기는 질병<br>이다?</h2>
|
||
<div class="card">
|
||
<p>자료 : 존스홉킨스대 사이언스 논문</p>
|
||
<p>암은 재수없는 사람이 걸린다? 암은 누가 걸릴지 모른다는 것이 모범답안</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>6 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 7 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>‘01-’05 ‘06-’10 ‘11-’15 ‘16-’20 ‘18-’22</h2>
|
||
<div class="stack">
|
||
<p>전체 남자(폐암/위암) 여자(유방암/대장암)<br>(단위 : %)</p>
|
||
<div class="kpi"><span>54.2%(01-05) 65.5%(06-10)70.8%(11-15)72.9%(18-22)</span></div>
|
||
<p class="muted">2025년 1월 2일 22년 국가암등록통계 발표</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>7 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 8 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2 class="mb-2">암 목록</h2>
|
||
<div class="row">
|
||
<div class="card" style="flex:1 1 100%">
|
||
<p>갑상선암<br>폐암<br>대장암<br>위암<br>유방암<br>전립선암<br>간암<br>췌장암<br>담낭 및 기타담도 암<br>신장암</p>
|
||
</div>
|
||
<div class="card" style="flex:1 1 100%">
|
||
<p>갑상선암<br>대장암<br>폐암<br>위암<br>유방암<br>전립선암<br>간암<br>췌장암<br>담낭 및 기타담도 암<br>신장암</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>8 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 9 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>암 순위/특징</h2>
|
||
<div class="card">
|
||
<p>갑상선암(여성2위)<br>대장암(남/여성3<br>위)<br>폐암(남성1위/여성4<br>위)<br>유방암(여성1위)<br>위암<br>전립선암(남성2위)<br>간암(남성5위)<br>췌장암<br>신장암<br>담낭 및 기타담도 암</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>9 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 10 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>특징/경향</h2>
|
||
<div class="card">
|
||
<p>남성 比 여성3배 ↑<br>사망률 1위 / 감각신경 X<br>뒤끝 있는 암 / 10년 후 재발 25% / 5위->4위<br>서양형 암 → 한국형 암<br>21년 남성 4위</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>10 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 11 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>구 분 마스토체크</h2>
|
||
<div class="card">
|
||
<p>대 상 전연령<br>정확도 특허기준 92%<br>1ml의 혈액채혈로 검사 가능<br>치밀유방의 경우 높은 정확도<br>특 징<br>비 용 8~10만원</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>11 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 12 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>PSA 수치 전립선암 진단 확률</h2>
|
||
<div class="data-block">
|
||
0~4 12.4~16.0
|
||
4~10 15.9~19.6
|
||
10~20 33.0~34.1
|
||
20~100 76.0~77.6
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>12 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 13 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>과거<br>암<br>뇌/심<br>현재<br>암<br>뇌/심</h2>
|
||
<p class="muted mt-2">구조 유지</p>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>13 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Slide 14 -->
|
||
<section class="slide">
|
||
<div class="bar"></div>
|
||
<div class="content">
|
||
<h2>건강보험 통계분석해보니. 서울 원정 암 환자, 더 늘었다</h2>
|
||
<div class="stack">
|
||
<p>이데일리 24.12.3</p>
|
||
<div class="card">
|
||
<p>국립암센터(고양<br>시) 원자력병원(서울/노원구)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<span class="dot"></span>
|
||
<span>14 / 14</span>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |