<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영상과 텍스트</title>
<style>
@font-face {
font-family: 'HeirofLightBold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
}
html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nXi0ItGf3ki5g3I2AkiRGDIwTO6XjC4pYM6lxU79segpiP7qAPc52-SkRXzUUMeAqWRW3VKy7q8RhqcwF6zssR8HJDOeynHNGHBKVDbqTWjkP3FX-IsvLNH0cxvhyphenhyphenKm23K0EXvSTQCJxqp0gchD5Ww_APWsBemeFC-lVkGn3wiKJu5yMhV7uOk-1Pko/s16000/woods.webp') no-repeat center center fixed;
background-size: cover;
}
/* ================= 영상 ================= */
.video-section {
position: relative;
max-width: 1200px;
margin: 0 auto 10px;
overflow: hidden;
background: #000;
}
.custom-video {
width: 100%;
height: 280px;
object-fit: cover;
object-position: 0 -290px;
}
.video-top-text,
.video-center-text,
.video-bottom-text {
font-family: 'HeirofLightBold';
font-weight: bold;
}
.video-top-text {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
color: #2cf5ab;
}
.video-center-text {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 27px;
color: #fff;
text-align: center;
}
.video-bottom-text {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 23px;
background-image: linear-gradient(#2cf5ab, #2cf5ab);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ================= 내용 패널 ================= */
.content-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: rgba(41, 41, 41, 0.9);
border: 1px solid #555;
border-radius: 10px;
color: #fff;
font-family: sans-serif;
}
/* ================= 표 스타일 ================= */
.basic-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.basic-table th,
.basic-table td {
border: 1px solid #666;
padding: 12px;
text-align: center;
}
.basic-table th {
background: rgba(0,0,0,0.4);
font-weight: bold;
}
.basic-table td {
background: rgba(255,255,255,0.03);
}
/* ================= 반응형 ================= */
@media (max-width: 768px) {
.custom-video { height: 180px; }
.video-top-text { font-size: 22px; }
.video-center-text { font-size: 16px; width: 90%; }
.video-bottom-text { font-size: 14px; }
.content-wrap {
padding: 12px;
font-size: 13px;
}
.basic-table th,
.basic-table td {
padding: 8px;
font-size: 12px;
}
}
</style>
</head>
<body>
<!-- ===== 영상 ===== -->
<div class="video-section">
<video class="custom-video" autoplay loop muted playsinline>
<source src="https://cdn.jsdelivr.net/gh/j2-design/videos@main/fox_Loop.mp4" type="video/mp4">
</video>
<div class="video-top-text">아이템정보</div>
<div class="video-center-text">애프터서버에 오신 걸 환영합니다.</div>
<div class="video-bottom-text">Lineage 2.0: 애프터 서버</div>
</div>
<!-- ===== 내용 + 표 ===== -->
<div class="content-wrap">
<table class="basic-table">
<!--🗡 무기-->
<thead>
<tr><th colspan="5">무기</th></tr>
<tr>
<th></th>
<th>군주</th>
<th>기사</th>
<th>요정</th>
<th>마법사</th>
</tr>
</thead>
<tbody>
<tr><td>1차</td><td>무관의 장검</td><td>무관의 양손검</td><td>살천의 활</td><td>강철 마나의 지팡이</td></tr>
<tr><td>2차</td><td>커츠의 검</td><td>나이트발드의 양손검</td><td>악몽의 장궁</td><td>제로스의 지팡이</td></tr>
<tr><td>3차</td><td>바람칼날의 단검</td><td>집행검</td><td>가이아의 격노</td><td>수정결정체의 지팡이</td></tr>
</tbody>
</table>
<!--🛡 방어구-->
<table class="basic-table">
<thead>
<tr><th colspan="2">방어구</th></tr>
</thead>
<tbody>
<tr><th colspan="2" style="text-align: center;">1차</th></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>
<tr><th colspan="2" style="text-align: center;">2차</th></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>
<tr><th colspan="2" style="text-align: center;">3차</th></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>
<!--💍 악세서리 (군주+기사 병합 버전)-->
<table class="basic-table">
<thead>
<tr><th colspan="5">악세서리</th></tr>
<tr>
<th></th>
<th colspan="2">군주 / 기사</th>
<th>요정</th>
<th>마법사</th>
</tr>
</thead>
<tbody>
<tr>
<td>1차</td>
<td colspan="2">완력의 반지, 완력의 벨트, 완력의 목걸이</td>
<td>민첩의 반지, 민첩의 벨트, 민첩의 목걸이</td>
<td>지식의 반지, 지식의 벨트, 지식의 목걸이</td>
</tr>
<tr>
<td>2차</td>
<td colspan="2">신성 완반, 에자 반지, 신성 완목</td>
<td>신성 민반, 에자 반지, 신성 민목</td>
<td>신성 지반, 에자 반지, 신성 민목</td>
</tr>
<tr>
<td>3차</td>
<td colspan="4">타이탄의 벨트 (공용)</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>