208 lines
5.2 KiB
HTML
208 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>회원등급 및 가격안내</title>
|
|
<style>
|
|
body {
|
|
background: #181d27;
|
|
color: #f3f6fc;
|
|
font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
|
|
margin: 0;
|
|
padding: 30px 0;
|
|
}
|
|
.container {
|
|
max-width: 650px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
background: #23293a;
|
|
border-radius: 18px;
|
|
box-shadow: 0 8px 24px rgba(30,40,70,0.10);
|
|
}
|
|
h2 {
|
|
color: #38b6ff;
|
|
margin-top: 0;
|
|
font-size: 2em;
|
|
text-shadow: 1px 1px 7px #111b;
|
|
}
|
|
/* 등급 카드 영역 */
|
|
.grade-cards {
|
|
display: flex;
|
|
gap: 18px;
|
|
margin-bottom: 28px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.grade-card {
|
|
flex: 1 1 140px;
|
|
min-width: 180px;
|
|
background: #222b3d;
|
|
border-radius: 13px;
|
|
padding: 20px 18px 14px 18px;
|
|
box-shadow: 0 2px 12px rgba(56,182,255,0.10);
|
|
border: 2px solid #1b2a44;
|
|
position: relative;
|
|
text-align: center;
|
|
transition: transform 0.15s;
|
|
}
|
|
.grade-card:hover {
|
|
transform: translateY(-7px) scale(1.04);
|
|
border-color: #38b6ff;
|
|
box-shadow: 0 5px 26px #38b6ff33;
|
|
}
|
|
.grade-title {
|
|
font-size: 1.19em;
|
|
font-weight: bold;
|
|
margin-bottom: 7px;
|
|
letter-spacing: 1px;
|
|
}
|
|
.basic { color: #8efaff; }
|
|
.premium { color: #ffe066; }
|
|
.vip { color: #fc7676; }
|
|
.grade-detail {
|
|
font-size: 1em;
|
|
color: #c3d7ee;
|
|
margin-bottom: 2px;
|
|
}
|
|
.api-limit {
|
|
background: #172436;
|
|
border-radius: 9px;
|
|
display: inline-block;
|
|
padding: 3px 14px;
|
|
margin-top: 5px;
|
|
font-size: 0.97em;
|
|
color: #5be0ff;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* 가격 안내 표 */
|
|
.price-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0 8px;
|
|
margin-top: 18px;
|
|
background: none;
|
|
}
|
|
.price-table th, .price-table td {
|
|
padding: 13px 10px;
|
|
text-align: center;
|
|
}
|
|
.price-table th {
|
|
background: #243350;
|
|
color: #88e6ff;
|
|
font-size: 1.08em;
|
|
letter-spacing: 0.5px;
|
|
border-radius: 8px 8px 0 0;
|
|
border-bottom: 2px solid #38b6ff99;
|
|
}
|
|
.price-table td {
|
|
background: #192339;
|
|
font-size: 1.07em;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
}
|
|
.price-table .highlight {
|
|
font-weight: bold;
|
|
background: #222d48;
|
|
color: #38b6ff;
|
|
border-left: 5px solid #38b6ff99;
|
|
}
|
|
.bonus {
|
|
color: #ffe066;
|
|
font-size: 0.95em;
|
|
}
|
|
/* 모바일 대응 */
|
|
@media (max-width: 650px) {
|
|
.container { padding: 8px 2vw;}
|
|
.grade-cards {flex-direction: column; gap: 9px;}
|
|
.grade-card { min-width: 0; padding: 14px 10px 8px 10px;}
|
|
.price-table th, .price-table td { padding: 10px 5px; font-size: 0.98em;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>회원등급 안내</h2>
|
|
<div class="grade-cards">
|
|
<div class="grade-card">
|
|
<div class="grade-title basic">Basic</div>
|
|
<div class="grade-detail">기본기능 제공</div>
|
|
<div class="grade-detail">API 20회/일</div>
|
|
<div class="api-limit">OCR 미포함</div>
|
|
</div>
|
|
<div class="grade-card">
|
|
<div class="grade-title premium">Premium</div>
|
|
<div class="grade-detail">Basic + OCR</div>
|
|
<div class="grade-detail">API 50회/일</div>
|
|
<div class="api-limit" style="color:#ffe066">OCR 포함</div>
|
|
</div>
|
|
<div class="grade-card">
|
|
<div class="grade-title vip">VIP</div>
|
|
<div class="grade-detail">Premium + API 한도 UP</div>
|
|
<div class="grade-detail">API 200회/일</div>
|
|
<div class="api-limit" style="color:#fc7676">모든 기능 무제한</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="margin-top:38px;">가격 안내</h2>
|
|
<table class="price-table">
|
|
<tr>
|
|
<th>기간</th>
|
|
<th>등급</th>
|
|
<th>가격</th>
|
|
<th>혜택</th>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="3" class="highlight">1개월</td>
|
|
<td>Basic</td>
|
|
<td>5만원</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Premium</td>
|
|
<td>7만원</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>VIP</td>
|
|
<td>10만원</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="3" class="highlight">3개월</td>
|
|
<td>Basic</td>
|
|
<td>15만원</td>
|
|
<td class="bonus">+ 추가 15일 제공</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Premium</td>
|
|
<td>21만원</td>
|
|
<td class="bonus">+ 추가 15일 제공</td>
|
|
</tr>
|
|
<tr>
|
|
<td>VIP</td>
|
|
<td>30만원</td>
|
|
<td class="bonus">+ 추가 15일 제공</td>
|
|
</tr>
|
|
<tr>
|
|
<td rowspan="3" class="highlight">6개월</td>
|
|
<td>Basic</td>
|
|
<td>30만원</td>
|
|
<td class="bonus">+ 추가 1개월 제공</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Premium</td>
|
|
<td>42만원</td>
|
|
<td class="bonus">+ 추가 1개월 제공</td>
|
|
</tr>
|
|
<tr>
|
|
<td>VIP</td>
|
|
<td>60만원</td>
|
|
<td class="bonus">+ 추가 1개월 제공</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|