<!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;
display: block;
}
.video-top-text,
.video-center-text,
.video-bottom-text {
font-family: 'HeirofLightBold';
font-weight: bold;
user-select: none;
}
.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;
}
/* ================== 테이블 컨테이너 ================== */
.table-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
border: 1px solid rgb(97, 97, 97);
background-color: rgba(26, 26, 26, 0.9);
padding: 25px;
box-sizing: border-box;
}
/* ================== 테이블(표 내부: 투명도 0.7 + 텍스트 흰색) ================== */
table.type {
width: 100%;
border-collapse: collapse;
background: rgba(41, 41, 41, 0.7);
color: #fff;
line-height: 1.29;
}
table.type tr,
table.type th,
table.type td {
border: 1px solid rgb(97, 97, 97);
background: rgba(41, 41, 41, 0.7);
color: #fff;
vertical-align: middle;
text-align: center;
padding: 10px;
font-size: 15px;
box-sizing: border-box;
}
/* 섹션 타이틀(준보스/일반보스/상급보스) */
table.type .category-title {
background: rgba(0, 0, 0, 0.7);
font-size: 18px;
font-weight: 700;
}
/* 표 이미지 */
table.type td img {
display: block;
width: 160px;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin: 0 auto;
}
/* ================== 모바일 ================== */
@media (max-width: 768px) {
.custom-video {
height: 200px;
object-position: center;
}
.video-top-text {
top: 30px;
font-size: 20px;
}
.video-center-text {
top: 55%;
font-size: 13px;
}
.video-bottom-text {
bottom: 20px;
font-size: 13px;
}
.table-container {
padding: 15px;
}
table.type th,
table.type td {
font-size: 13px;
padding: 8px;
}
table.type td img {
width: 60px;
height: 86px;
border-radius: 8px;
}
}
table.type td.icon-cell img {
width: 120px; /* ← 원하는 가로 */
height: 80px; /* ← 원하는 세로 */
object-fit: contain;
border-radius: 10px;
}
</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="table-container">
<div>
<table class="type">
<tbody>
<tr>
<th class="category-title" colspan="3">준보스</th>
</tr>
<tr>
<th>구분</th>
<th>이름</th>
<th>드랍</th>
</tr>
<tr>
<td class="icon-cell">
<img alt="카스파 일당" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxryXIe3YwJar82o4PXgEgkFizr-WPliLsE92Rdvob872tD36-qz9muuGViI2qYDttp23lGtzU8tAk3mh920WnYZ2_tO0t6ObyWX66dXKD6XRPBM_noHPJUP2AuI0VNPouq24OiovLqP_nwJgPVG5Dw7SQZyzEJ2mX5ehJ1qXUnZcwAcnYknMyfszTBUk/s16000/%EC%B9%B4%EC%8A%A4%ED%8C%8C.jpg" />
</td>
<td>카스파<br />일당</td>
<td>완력의반지,민첩의반지,지식의반지,마정석파편,축젤,축데이</td>
</tr>
<tr>
<td class="icon-cell">
<img alt="네크로맨서" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKayQgs75On8E_K8rvgJFrvUv2E-FjTBe0Wsj4PU5S-7ZSjP-dV9xRe3DSf2fBY8fFwl5w_1VYtzcUnjS54yFfp8CnvfZKCqHakz82412pLrOxZSOAAIXB98_wURToXu-qmCpj3O3xvZC_ZcP0kant2YRzeCWtF78cNq-XilqmQBFVjM2A4n-9kg40-I/s16000/%EB%84%A4%ED%81%AC%EB%A1%9C%EB%A7%A8%EC%84%9C.jpg" />
</td>
<td>네크로맨서</td>
<td>완력의목걸이,민첩의목걸이,지식의목걸이,제작비법서,축젤,축데이</td>
</tr>
<tr>
<td class="icon-cell">
<img alt="이프리트" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncS2kBqRPrmmgJv9-tiL_2xhwMbVEpNNZiX0kcsDiE9u7c0Dg8XWiHTO4IYRqb9l1XszEFpV2cQaiAd89Tfryo1Q-dmzBOqVNNiuvtYNhQA_WryUree4x5UFgDg0sIJM7izZvVm7yd4g6Rd0Ylwdp9JNEp8rE5rNdpzKJbTbD-TVvsaDnZTyMnyCA3bg/s1600/%EC%9D%B4%ED%94%84%EB%A6%AC%ED%8A%B8.jpg" />
</td>
<td>이프리트</td>
<td>축젤,축데이,축오림장신구,마정석 파편</td>
</tr>
<tr>
<td class="icon-cell">
<img alt="드레이크" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhimnkkSmEdUQWlfbBXnY_UGkWpaon87qOu7lSahFpoWT5oiVeZAgRvZyxRk3g1GLxblBa21KYJZ1vvJ_fm_4DU2859IzdGhryue-WRS3OYyvhul23Y4-Db8nAGi7OeBwfvoKGmtEKzbjDj3CWRDykrHHXeZ5UqmOnyQ26Tv56pTkr3tbSmn_J8adUKU/s320/%EB%93%9C%EB%A0%88%EC%9D%B4%ED%81%AC.jpg" />
</td>
<td>드레이크</td>
<td>완력의벨트,민첩의벨트,지식의벨트,지옥의성물,축젤,축데이</td>
</tr>
<tr>
<td class="icon-cell">
<img alt="흑장로" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzv9UJ4GSHQWQOT_to7R7H-VCmVyTQVKcMYpgjthBRrC48lAAb-v2wxmalRB3fLv-ebsKYE8rt9CvFlg07db86DmB7R24CoqfbSlfpfVt4i5hcscgo5ird51jvbrGbHxQuimwcVTQXDdFVjzDlkggJpZE9LTKXjiweNFMDtW5s2YnI09NvUaQY0NhCVA/s1600/%ED%9D%91%EC%9E%A5%EB%A1%9C.jpg" />
</td>
<td>흑장로</td>
<td>축젤,축데이,축오림장신구,3단인형,금빛인형주머니,신성악세상자,마정석파편상자</td>
</tr>
<tr>
<th class="category-title" colspan="3">일반 보스</th>
</tr>
<tr>
<th>구분</th>
<th>이름</th>
<th>드랍</th>
</tr>
<tr>
<td class="icon-cell">
<img alt="바포메트" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGtA-uPnFIf0enONV7np6aj1IOl3eYygwmaIkLb6bkxkzg9U7wi6xoT_xWRbHz4cxu8Z-ZVDnJMtwqKUvOAOpi9ZKfdfSEfX3XklAriUg91ouStMWN7ZaWNSV5NMwEfinL0N8v0KxA7NkBdZrH-rmdxUFEx25DzNhnIt4NPVRJ1swGTSeh4SVGmV6wNQI/s1600/%EB%B0%94%ED%8F%AC%EB%A9%94%ED%8A%B8.jpg" />
</td>
<td>바포메트</td>
<td>축젤,축데이,축오림,마정석파편상자,앱솔루트베리어,제로스의지팡이,5단인형,에자반지</td>
</tr>
<tr>
<td class="icon-cell"><img alt="베레스" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gUlBNkMya-grD9b4yh4Jn7NATT-wvJozNDpVWDW4bOQSvkm5TeqVhr4PfCBUGrcwXOmIuRxhTzrRocZjc0rlSl8_jxWKJ_1RHbWAtJOO6XWD6tdWl4-kRQ6Z92qPoms1dwEQ7WFESNGDINFj_Ta5cfpXoOHh8C0-ClbgaeHUsNfU9mLcmHKwS953xv8/s1600/%EB%B2%A0%EB%A0%88%EC%8A%A4.jpg" /></td>
<td>베레스</td>
<td>축젤,축데이,축오림,금빛인형주머니,마정석파편상자,베레스의부츠,에자반지,5단인형</td>
</tr>
<tr>
<td class="icon-cell"><img alt="모닝스타" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FMhLTZ_5j43R183URYAipSzf1gbwHY5jq_Fb3QiwuNDFCYDIyCR4GPAmnPW_sj3oYLR5vqcGB0e5wT4lzN48zIVL8noJ1nEnJa9JySv_EvrPZ_N7dtmJ3LgXJ3l_55SYM62KR5lV7WlqhXwMDBgGcilkAp28I9YSN-bnDtfHP9p9uxLoifYlEAYaObQ/s1600/%EB%AA%A8%EB%8B%9D%EC%8A%A4%ED%83%80.jpg" /></td>
<td>모닝스타</td>
<td>축젤,축데이,축오림,마정석파편상자,5단인형,신성악세상자,에자반지</td>
</tr>
<tr>
<td class="icon-cell"><img alt="피닉스" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhabQKYgoc202tYlVth-ZKHEjAS3HieH68VsfodMdQZO4s-ydtb5IpmrpJxZhxgr8t3GVRfVnU_0hyphenhyphenMYdgGC-_WDt5i15NV_rel3_1mbcZg2DdqTsKwvkozkQZemkYAPU4OtNEYkZb3DGm4sIFQQEk0x633bhHfSbPzip-SXrg_wQQYGFPtEhhnHh4oWV4/s320/%ED%94%BC%EB%8B%89%EC%8A%A4.jpg" /></td>
<td>피닉스</td>
<td>축젤,축데이,축오림,마정석파편상자,악몽의장궁,5단인형,에자반지,마법서(미티어)</td>
</tr>
<tr>
<td class="icon-cell"><img alt="커츠" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimAj9d0RlmaVDQxRp8Bd9nynJxvvfRsjaHh-bSrvZP6PrB1xQ1GEpW0qRE6ajeSW6VR6nqYiJFLJIRAi5ZwLL0ss2TnKv_8Y2a9n3YylZkVlcZFZqzEN1Q4TmTutl8f3djmzDXfELrwVannEflyzaJNV52_YDf_0tK9vV_OtwrhLaP8RsooBPijjmfAdg/s1600/%EC%BB%A4%EC%B8%A0.jpg" /></td>
<td>커츠</td>
<td>축젤,축데이,축오림,마정석파편상자,커츠의검,5단인형,신성악세상자</td>
</tr>
<tr>
<td class="icon-cell"><img alt="데스나이트" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcGWDQXTwytS_irtVcFHPtFpoAOtDoPWlcbbQoDZOX6DxuQmGyQ2B133LPAJyBGscQhNU6cu6O6GGEpCQCiZV7-XcBgGzcHfqVR1GGqoRRkIde2BOT46blbGusXCEc0L4UoXiFYYrF8GhUflC6ihHKCvjhODwvT4NQGXh8lruempcKpC0UvlpHZClmKM/s1600/%EB%8D%B0%EC%8A%A4%EB%82%98%EC%9D%B4%ED%8A%B8.jpg" /></td>
<td>데스나이트</td>
<td>축젤,축데이,축오림,마정석파편상자,나이트발드의검,5단인형,신성악세상자,에자반지</td>
</tr>
<tr>
<th class="category-title" colspan="3">상급 보스</th>
</tr>
<tr>
<th>구분</th>
<th>이름</th>
<th>드랍</th>
</tr>
<tr>
<td class="icon-cell"><img alt="테베 아누비스" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9qrNlFahrQzHOVjo2apw1yeGkr0-cGIt25GEAjLxNfi4HcesnmQygtJxygQRzB-of6nSumRSNT397wFgwigM-bBjfxOpvHPf93kt3zdsw5flQmLfJCo2tUxWFGeR6VCv7Yc0ghy1OLwnflKxIV1_Wo19_Hy1pBo6DF6A-w8D0N1SKMSthpugDXSZDWW0/s1600/%ED%85%8C%EB%B2%A0%EC%95%84%EB%88%84%EB%B9%84%EC%8A%A4.jpg" /></td>
<td>테베<br>아누비스</td>
<td>축젤,축데이,축오림,마정석파편상자,각종완제엘렉,나이트발드의검,격분의장갑,5단인형,신성악세상자</td>
</tr>
<tr>
<td class="icon-cell"><img alt="시어" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCJQ3buWAff_bLCxJmzQQHcLdLpYwUptCOxSPEw__MKjhE5xvmQE59XiVS8awqO4z6_AsdY3Ap4QyGB0xO0GjcPWQcnLxcwmkD1kF2F0EyMcOwvPuj5F_-occqhQaVsGejuatXNKgr7hpo298vc2-FMOfPCV8AHEcglL1lcmdygvjRbDc6cDaBFMrIHOA/s1600/%EC%8B%9C%EC%96%B4.jpg" /></td>
<td>시어</td>
<td>축젤,축데이,축오림,마정석파편상자,각종완제엘렉,에자반지,오만의탑2층역사서</td>
</tr>
<tr>
<td class="icon-cell"><img alt="리치" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXAJQ3wEXbxEJgloXoX84Es8ZcteM7AERQzvzyJWLStXLIPAbNeRjcqnzIL7El6bqNf9fabgfMlIKDTwbjg6MGDX6UvAmc25mUK1Rzm5kJWGI4l8iZM5dvxpJ7q7tI9wo0s_htCDtYDHjol8HmZ2FEdCWkS-MB30Kar9dBnaqibR0jagjHahSAFTBVBnA/s1600/%EB%A6%AC%EC%B9%98.jpg" /></td>
<td>리치</td>
<td>축젤,축데이,축오림,지옥의성물,제작비법서,각종완제엘렉,신성악세상자,오만의탑9층역사서,제로스지팡이,대마법사의모자</td>
</tr>
<tr>
<td class="icon-cell"><img alt="사신그림리퍼" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgFlU8FbijMC4l9PMlF7Evh3rIgEm-9QN3ZoToiA5Lyh3PCTi4Q65jTdocIR2hupVA-MRXtQMBAq7kG3eTOrLtzq0ASN3EVJF0y-uCOsSGBZ67b_1RADkOGa33Mdo8rcp_DERnRy5zXeiR9fMFH4szxqDJXJe96yT20Iu_38mK1-_VkuonUtrN4x_Czrk/s320/%EC%82%AC%EC%8B%A0%EA%B7%B8%EB%A6%BC%EB%A6%AC%ED%8D%BC.jpg" /></td>
<td>사신<br>그림리퍼</td>
<td>축젤,축데이,축오림,신성악세상자,에자반지,나발검,혼돈의손길,실프티,역사서1~9장,4대법서,마정석파편상자,제작비법서,지옥의성물</td>
</tr>
</tbody>
</table>
</div>
</div>
<br /><br />
</body>
</html>