test
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title></title>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/css/lightbox.min.css" rel="stylesheet" />
<style type="text/css">/* 공통 기본 스타일 */
/* 공통 기본 스타일 */
body {
font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
margin: 0;
background: #f5f5f5;
}
.page-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0mm;
font-size: 0;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
position: relative;
overflow: visible;
box-sizing: border-box;
display: inline-block;
zoom: 0.75;
margin: 0;
vertical-align: top;
}
.a4-outline {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
border: 1px dashed #ccc;
pointer-events: none;
z-index: 1;
}
.header,
.footer {
font-size: 12px;
color: #222;
padding: 8px 20mm;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
z-index: 3;
}
.footer { bottom: 0; }
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.a4-page.color-white .header,
.a4-page.color-white .footer {
color: white;
}
.a4-page.color-black .header,
.a4-page.color-black .footer {
color: black;
}
.a4-page.color-gray .header,
.a4-page.color-gray .footer {
color: gray;
}
.a4-page.color-yellow .header,
.a4-page.color-yellow .footer {
color: yellow;
}
.page-content {
position: relative;
top: 0; left: 0; right: 0; bottom: 0;
padding-bottom: 50px;
z-index: 0;
width: 100%;
height: 100%;
}
/* 공통 페이지와 패널 */
.page {
position: absolute;
overflow: hidden;
}
.panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.panel img, .page img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text-box {
position: absolute;
top: 20mm;
right: 20mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
}
.text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.text-box p {
margin: 0 0 6px;
}
@media (max-width: 767px) {
.page-container {
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
padding: 0;
margin: 0;
}
.a4-page {
width: 210mm;
height: 297mm;
background: white;
position: relative;
overflow: visible;
box-sizing: border-box;
display: inline-block;
zoom: 0.5;
margin: 0;
vertical-align: top;
}
.a4-outline {
display: none;
}
.header,
.footer {
font-size: 11px;
padding: 8px 12px;
color: #000;
background: transparent;
z-index: 3;
}
}
@media print {
html, body {
background: white;
margin: 0;
padding: 0;
height: auto;
overflow: visible;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.a4-page {
width: 210mm !important;
height: 297mm !important;
margin: 0 auto !important;
box-shadow: none !important;
page-break-after: always;
transform: none !important;
zoom: 1 !important;
}
.a4-outline {
display: none !important;
}
.header,
.footer {
font-size: 10pt;
color: #222 !important;
background: none !important;
text-shadow: none !important;
}
.panel img, .page img {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
}
a[href]:after {
content: "";
}
}
/* 1페이지 */
.page--1 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--1 .panel--p1 {
position: absolute;
top: 0;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--1 .panel--p2 {
position: absolute;
top: 148.5mm;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--1 .panel--p3 {
position: absolute;
top: 0;
left: 148.5mm;
width: 198mm;
height: 297mm;
}
.page--1 .panel--p3 img {
object-fit: cover;
object-position: left center;
}
/* 2페이지 */
.page--2 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--2 .panel--p1 {
position: absolute;
top: 0;
left: 0;
width: 198mm;
height: 297mm;
}
.page--2 .panel--p1 img {
width: 272mm;
height: 297mm;
object-fit: cover;
object-position: left center;
transform: translateX(-61.5mm);
display: block;
}
.page--2 .text-box {
position: absolute;
top: auto;
bottom: 50mm;
right: 20mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--2 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--2 .text-box p {
margin: 0 0 6px;
}
/* 3페이지 */
.page--3 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--3 .panel--p1 {
position: absolute;
top: 74.5mm;
left: 0;
width: 148.5mm;
height: 74mm;
}
.page--3 .panel--p2 {
position: absolute;
top: 148.5mm;
left: 0;
width: 148.5mm;
height: 148.5mm;
}
.page--3 .panel--p3 {
position: absolute;
top: 74.5mm;
left: 148.5mm;
width: 272mm;
height: 222mm;
}
.page--3 .panel--p3 img {
object-fit: cover;
object-position: left center;
}
/* 4페이지 */
.page--4 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--4 .panel--p1 {
position: absolute;
top: 74.5mm;
left: 0;
width: 272mm;
height: 222mm;
}
.page--4 .panel--p1 img {
width: 272mm;
height: 222mm;
object-fit: cover;
object-position: left center;
transform: translateX(-61.5mm);
display: block;
}
.page--4 .text-box {
position: absolute;
top: 15mm;
right: 30mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--4 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--4 .text-box p {
margin: 0 0 6px;
}
/* 5페이지 */
.page--5 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--5 .panel--p1 {
position: absolute;
width: 63mm;
height: 84mm;
top: 13mm;
left: 147mm
}
.page--5 .panel--p2 {
width: 70mm;
height: 105mm;
top: 178mm;
left: 0mm;
}
.page--5 .panel--p3 {
width: 138mm;
height: 184mm;
top: 99mm;
left: 72mm;
}
/* 6페이지 */
.page--6 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--6 .panel--p1 {
width: 126mm;
height: 189mm;
top: 13mm;
left: 5mm
}
.page--6 .panel--p2 {
width: 74mm;
height: 74mm;
top: 13mm;
left: 135mm;
}
.page--6 .panel--p3 {
width: 74mm;
height: 111mm;
top: 91mm;
left: 135mm;
}
.page--6 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--6 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--6 .text-box p {
margin: 0 0 6px;
}
/* 7페이지 */
.page--7 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--7 .panel--p1 {
width: 100mm;
height: 136mm;
top: 11mm;
left: 4mm
}
.page--7 .panel--p2 {
width: 100mm;
height: 136mm;
top: 11mm;
left: 107mm;
}
.page--7 .panel--p3 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm);
left: 2mm;
}
.page--7 .panel--p4 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm);
left: calc(2mm + 67mm + 2mm);
}
.page--7 .panel--p5 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm);
left: calc(2mm + 67mm + 2mm + 67mm + 2mm);
}
.page--7 .panel--p6 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm + 67mm + 2mm);
left: 2mm;
}
.page--7 .panel--p7 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm + 67mm + 2mm);
left: calc(2mm + 67mm + 2mm);
}
.page--7 .panel--p8 {
width: 67mm;
height: 67mm;
top: calc(11mm + 136mm + 2mm + 67mm + 2mm);
left: calc(2mm + 67mm + 2mm + 67mm + 2mm);
}
/* 8페이지 */
.page--8 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--8 .panel--p1 {
position: absolute;
top: 0mm;
left: 0;
width: 210mm;
height: 297mm;
}
.page--8 .text-box {
position: absolute;
top: 220mm;
left: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--8 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--8 .text-box p {
margin: 0 0 6px;
}
/* 9페이지 */
.page--9 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--9 .panel--p1 {
position: absolute;
top: 70mm;
left: 5mm;
width: 312mm;
height: 205mm;
}
.page--9 .panel--p1 img {
object-fit: cover;
object-position: left center;
}
/* 10페이지 */
.page--10 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--10 .panel--p1 {
position: absolute;
top: 70mm;
left: 0mm;
width: 312mm;
height: 205mm;
}
.page--10 .panel--p1 img {
width: 105mm;
height: 205mm;
object-fit: cover;
object-position: right center;
display: block;
}
.page--10 .text-box {
position: absolute;
top: 215mm;
left: 110mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--10 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--10 .text-box p {
margin: 0 0 6px;
}
/* 11페이지 */
.page--11 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--11 .panel--p1 {
position: absolute;
top: 0mm;
left: 31.5mm;
width: 147mm;
height: 147mm;
}
.page--11 .panel--p2 {
position: absolute;
top: calc(0mm + 147mm + 3mm);
left: 31.5mm;
width: 147mm;
height: 147mm;
}
.page--11 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--11 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--11 .text-box p {
margin: 0 0 6px;
}
/* 12페이지 */
.page--12 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--12 .panel--p1 {
width: 80mm;
height: 100mm;
top: 98.5mm;
left: 20mm
}
.page--12 .panel--p2 {
width: 80mm;
height: 100mm;
top: 43.5mm;
left: calc(20mm + 80mm + 10mm);
}
.page--12 .panel--p3 {
width: 80mm;
height: 100mm;
top: calc(43.5mm + 100mm + 10mm);
left: calc(20mm + 80mm + 10mm);
}
.page--12 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--12 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--12 .text-box p {
margin: 0 0 6px;
}
/* 13페이지 */
.page--13 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--13 .panel--p1 {
position: absolute;
top: 0mm;
left: 0;
width: 210mm;
height: 297mm;
}
.page--13 .text-box {
position: absolute;
top: 220mm;
left: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--13 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--13 .text-box p {
color: white;
margin: 0 0 6px;
}
/* 14페이지 */
.page--14 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--14 .panel--p1 {
position: absolute;
top: 20mm;
left: 20mm;
width: 170mm;
height: 257mm;
}
.page--14 .text-box {
position: absolute;
top: 220mm;
left: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--14 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--14 .text-box p {
color: white;
margin: 0 0 6px;
}
/* 15페이지 */
.page--15 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--15 .panel--p1 {
position: absolute;
top: 20mm;
left: 30mm;
width: 150mm;
height: calc(150mm *4 /3);
}
.page--15 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--15 .text-box h3 {
font-size: 18px;
color: black;
margin: 0 0 8px;
}
.page--15 .text-box p {
color: black;
margin: 0 0 6px;
}
/* 16페이지 */
.page--16 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--16 .panel--p1 {
position: absolute;
width: 170mm;
height: calc(170mm *3 /2);
top: calc(297mm - 170mm *3/2);
left: calc(210mm /2 - 170mm /2);
}
.page--16 .text-box {
position: absolute;
top: 10mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--16 .text-box h3 {
font-size: 18px;
color: black;
margin: 0 0 8px;
}
.page--16 .text-box p {
color: black;
margin: 0 0 6px;
}
/* 17페이지 */
.page--17 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--17 .panel--p1 {
position: absolute;
top: 30mm;
left: 30mm;
width: 150mm;
height: 150mm;
}
.page--17 .text-box {
position: absolute;
top: 200mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--17 .text-box h3 {
font-size: 18px;
color: black;
margin: 0 0 8px;
}
.page--17 .text-box p {
color: black;
margin: 0 0 6px;
}
/* 18페이지 */
.page--18 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--18 .panel--p1 {
width: 125mm;
height: 125mm;
top: 20mm;
left: 10mm
}
.page--18 .panel--p2 {
width: 60mm;
height: 60mm;
top: 20mm;
left: calc(10mm + 125mm + 5mm);
}
.page--18 .panel--p3 {
width: 60mm;
height: 60mm;
top: calc(20mm + 60mm + 5mm);
left: calc(10mm + 125mm + 5mm);
}
.page--18 .panel--p4 {
width: 60mm;
height: 60mm;
top: calc(20mm + 125mm + 5mm);
left: 10mm
}
.page--18 .panel--p5 {
width: 60mm;
height: 60mm;
top: calc(20mm + 125mm + 5mm + 60mm + 5mm);
left: 10mm;
}
.page--18 .panel--p6 {
width: 125mm;
height: 125mm;
top: calc(20mm + 125mm + 5mm);
left: calc(10mm + 60mm + 5mm);
}
.page--18 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--18 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--18 .text-box p {
margin: 0 0 6px;
}
/* 19페이지 */
.page--19 {
width: 210mm;
height: 297mm;
position: relative;
}
.page--19 .panel--p1 {
position: absolute;
top: 20mm;
left: 5mm;
width: 200mm;
height: calc(200mm *2/3);
}
.page--19 .panel--p2 {
position: absolute;
top: calc(20mm + 200mm*2/3 + 5mm);
left: calc(210mm/2 - 120mm/2);
width: 100mm;
height: calc(100mm * 3/2);
}
.page--19 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--19 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--19 .text-box p {
margin: 0 0 6px;
}
/* 20페이지 */
.page--20 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--20 .panel--p1 {
position: absolute;
top: 10mm;
left: 10mm;
width: 190mm;
height: 277mm;
}
.page--20 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--20 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--20 .text-box p {
color: white;
margin: 0 0 6px;
}
/* 21페이지 */
.page--21 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--21 .panel--p1 {
position: absolute;
top: 0mm;
left: 0;
width: 210mm;
height: 297mm;
}
.page--21 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--21 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--21 .text-box p {
color: white;
margin: 0 0 6px;
}
/* 22페이지 */
.page--22 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--22 .panel--p1 {
width: 62mm;
height: 62mm;
top: 100mm;
left: 9mm
}
.page--22 .panel--p2 {
width: 62mm;
height: 62mm;
top: 100mm;
left: calc(9mm + 62mm + 3mm);
}
.page--22 .panel--p3 {
width: 62mm;
height: 62mm;
top: 100mm;
left: calc(9mm + 62mm + 3mm + 62mm + 3mm);
}
.page--22 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--22 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--22 .text-box p {
margin: 0 0 6px;
}
/* 23페이지 */
.page--23 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--23 .panel--p1 {
position: absolute;
top: 10mm;
left: 10mm;
width: 141mm;
height: calc(141mm *2/3);
}
.page--23 .panel--p2 {
position: absolute;
top: 10mm;
left: calc(10mm + 141mm + 5mm);
width: 45mm;
height: calc(45mm *2/3);
}
.page--23 .panel--p3 {
position: absolute;
top: calc(10mm + 140mm *2/3 + 20mm + 25mm);
left: 10mm;
width: 70mm;
height: calc(70mm *4/5);
}
.page--23 .panel--p4 {
position: absolute;
top: calc(10mm + 140mm *2/3 + 20mm);
left: calc(10mm + 70mm + 5mm);
width: 115mm;
height: calc(115mm *5/7);
}
.page--23 .panel--p5 {
position: absolute;
top: calc(10mm + 140mm *2/3 + 20mm + 115mm *5/7 + 5mm);
left: 10mm;
width: 105mm;
height: calc(105mm *5/7);
}
.page--23 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--23 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--23 .text-box p {
color: white;
margin: 0 0 6px;
}
.page--23 .text--p1 {
position: absolute;
top: 54mm;
left: 107mm;
width: calc(141mm *2/3);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--23 .text--p5 {
position: absolute;
top: 245mm;
left: 80mm;
width: calc(105mm *5/7);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
/* 24페이지 */
.page--24 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--24 .panel--p1 {
width: 60mm;
height: calc(60mm * 4/5);
top: 10mm;
left: 35mm
}
.page--24 .panel--p2 {
width: 100mm;
height: 100mm;
top: 10mm;
left: calc(35mm + 60mm + 5mm);
}
.page--24 .panel--p3 {
width: 62mm;
height: 62mm;
top: calc(10mm + 60mm *4/5 + 5mm);
left: 10mm;
}
.page--24 .panel--p4 {
width: 189mm;
height: calc(189mm *2/3);
top: 153mm;
left: 10mm;
}
.page--24 .text--p2 {
position: absolute;
top: 110mm;
left: 100mm;
width: 100mm;
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--24 .text--p3 {
position: absolute;
top: 90mm;
left: 44mm;
width: 62mm;
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--24 .text--p4 {
position: absolute;
top: 212mm;
left: 139mm;
width: calc(189mm *2/3);
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--24 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--24 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--24 .text-box p {
margin: 0 0 6px;
}
/* 25페이지 */
.page--25 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--25 .panel--p1 {
position: absolute;
top: 16mm;
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p2 {
position: absolute;
top: 16mm;
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p3 {
position: absolute;
top: 16mm;
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p4 {
position: absolute;
top: calc(16mm + 60mm *2/3 + 5mm);
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p5 {
position: absolute;
top: calc(16mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p6 {
position: absolute;
top: calc(16mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p7 {
position: absolute;
top: calc(61mm + 60mm *2/3 + 5mm);
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p8 {
position: absolute;
top: calc(61mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p9 {
position: absolute;
top: calc(61mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p10 {
position: absolute;
top: calc(106mm + 60mm *2/3 + 5mm);
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p11 {
position: absolute;
top: calc(106mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p12 {
position: absolute;
top: calc(106mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p13 {
position: absolute;
top: calc(151mm + 60mm *2/3 + 5mm);
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p14 {
position: absolute;
top: calc(151mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p15 {
position: absolute;
top: calc(151mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p16 {
position: absolute;
top: calc(196mm + 60mm *2/3 + 5mm);
left: 10mm;
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p17 {
position: absolute;
top: calc(196mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .panel--p18 {
position: absolute;
top: calc(196mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--25 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--25 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--25 .text-box p {
color: white;
margin: 0 0 6px;
}
.page--25 .text--p1 {
position: absolute;
top: 54mm;
left: 107mm;
width: calc(141mm *2/3);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--25 .text--p2 {
position: absolute;
top: 245mm;
left: 80mm;
width: calc(105mm *5/7);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
/* 26페이지 */
.page--26 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--26 .panel--p1 {
position: absolute;
top: 16mm;
left: 10mm;
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p2 {
position: absolute;
top: 16mm;
left: calc(10mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p3 {
position: absolute;
top: 16mm;
left: calc(10mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p4 {
position: absolute;
top: 16mm;
left: calc(10mm + 42mm + 5mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p5 {
position: absolute;
top: calc(16mm + 42mm *3/2 + 5mm);
left: 10mm;
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p6 {
position: absolute;
top: calc(16mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p7 {
position: absolute;
top: calc(16mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p8 {
position: absolute;
top: calc(16mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p9 {
position: absolute;
top: calc(84mm + 42mm *3/2 + 5mm);
left: 10mm;
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p10 {
position: absolute;
top: calc(84mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p11 {
position: absolute;
top: calc(84mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p12 {
position: absolute;
top: calc(84mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p13 {
position: absolute;
top: calc(152mm + 42mm *3/2 + 5mm);
left: 10mm;
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p14 {
position: absolute;
top: calc(152mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p15 {
position: absolute;
top: calc(152mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p16 {
position: absolute;
top: calc(152mm + 42mm *3/2 + 5mm);
left: calc(10mm + 42mm + 5mm + 42mm + 5mm + 42mm + 5mm);
width: 42mm;
height: calc(42mm *3/2);
}
.page--26 .panel--p17 {
position: absolute;
top: calc(61mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--26 .panel--p18 {
position: absolute;
top: calc(61mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm + 60mm *2/3 + 5mm);
left: calc(10mm + 60mm + 5mm + 60mm + 5mm);
width: 60mm;
height: calc(60mm *2/3);
}
.page--26 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--26 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--26 .text-box p {
color: white;
margin: 0 0 6px;
}
.page--26 .text--p1 {
position: absolute;
top: 54mm;
left: 107mm;
width: calc(141mm *2/3);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--26 .text--p2 {
position: absolute;
top: 245mm;
left: 80mm;
width: calc(105mm *5/7);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
/* 27페이지 */
.page--27 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--27 .panel--p1 {
position: absolute;
top: 20mm;
left: 10mm ;
width: 190mm;
height: 190mm;
}
.page--27 .text-box {
position: absolute;
top: 220mm;
left: 10mm;
width: 50%;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
font-size: 13px;
line-height: 1.6;
letter-spacing: -0.05em;
z-index: 5;
text-align: left;
height: auto;
color: black;
font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.page--27 .text-box .subtitle {
font-size: 14px;
font-weight: normal;
color: #555;
margin-bottom: 6px;
}
.page--27 .text-box h3 {
font-size: 20px;
font-weight: bold;
color: #111;
margin-bottom: 10px;
}
.page--27 .text-box p {
font-size: 13px;
line-height: 1.6;
letter-spacing: -0.05em;
color: #222;
margin-bottom: 10px;
}
.page--27 .text-box .tags {
font-size: 12px;
color: #888;
font-style: italic;
}
/* 28페이지 */
.page--28 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--28 .panel--p1 {
width: 92.5mm;
height: 92.5mm;
top: 20mm;
left: 10mm;
}
.page--28 .panel--p2 {
width: 92.5mm;
height: 92.5mm;
top: 20mm;
left: calc(10mm + 92.5mm + 5mm);
}
.page--28 .panel--p3 {
width: 92.5mm;
height: 92.5mm;
top: calc(20mm + 92.5mm + 5mm);
left: 10mm;
}
.page--28 .panel--p4 {
width: 92.5mm;
height: 92.5mm;
top: calc(20mm + 92.5mm + 5mm);
left: calc(10mm + 92.5mm + 5mm);
}
.page--28 .text-box {
position: absolute;
top: 220mm;
left: calc(10mm + 92.5mm);
width: 45%;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
font-size: 13px;
line-height: 1.6;
letter-spacing: -0.05em;
z-index: 5;
text-align: left;
height: auto;
color: black;
font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.page--28 .text-box .subtitle {
font-size: 14px;
font-weight: normal;
color: #555;
margin-bottom: 6px;
}
.page--28 .text-box h3 {
font-size: 20px;
font-weight: bold;
color: #111;
margin-bottom: 10px;
}
.page--28 .text-box p {
font-size: 13px;
line-height: 1.6;
letter-spacing: -0.05em;
color: #222;
margin-bottom: 10px;
}
.page--28 .text-box .tags {
font-size: 12px;
color: #888;
font-style: italic;
}
/* 29페이지 */
.page--29 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--29 .panel--p1 {
position: absolute;
top: 25mm;
left: 20mm;
width: 171mm;
height: calc(171mm *2/3);
}
.page--29 .panel--p2 {
position: absolute;
top: calc(25mm + 171mm *2/3 + 10mm);
left: 20mm;
width: 171mm;
height: calc(171mm *2/3);
}
.page--29 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--29 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--29 .text-box p {
color: white;
margin: 0 0 6px;
}
.page--29 .text--p1 {
position: absolute;
top: calc(25mm + 170mm *2/3 + 1mm);
left: 20mm;
width: 170mm;
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--29 .text--p2 {
position: absolute;
top: calc(25mm + 170mm *2/3 + 10mm + 170mm *2/3 + 1mm);
left: 20mm;
width: 170mm;
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
/* 30페이지 */
.page--30 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--30 .panel--p1 {
width: calc(114mm *2/3);
height: 114mm;
top: 25mm;
left: 24mm
}
.page--30 .panel--p2 {
width: calc(114mm *2/3);
height: 114mm ;
top: 25mm;
left: calc(24mm + 114mm *2/3 + 10mm);
}
.page--30 .panel--p3 {
width: calc(114mm *2/3);
height: 114mm;
top: calc(25mm + 114mm + 10mm);
left: 24mm;
}
.page--30 .panel--p4 {
width: calc(114mm *2/3);
height: 114mm;
top: calc(25mm + 114mm + 10mm);
left: calc(24mm + 114mm *2/3 + 10mm);
}
.page--30 .text--p1 {
position: absolute;
top: calc(25mm + 114mm + 1mm);
left: 24mm;
width: calc(114mm *2/3);
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--30 .text--p2 {
position: absolute;
top: calc(25mm + 114mm + 1mm);
left: calc(24mm + 114mm *2/3 + 10mm);
width: calc(114mm *2/3);
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--30 .text--p3 {
position: absolute;
top: calc(25mm + 114mm + 10mm + 114mm + 1mm);
left: 24mm;
width: calc(114mm *2/3);
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--30 .text--p4 {
position: absolute;
top: calc(25mm + 114mm + 10mm + 114mm + 1mm);
left: calc(24mm + 114mm *2/3 + 10mm);
width: calc(114mm *2/3);
background: rgba(255, 255, 255, 0.5);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--30 .text-box {
position: absolute;
top: 215mm;
right: 20mm;
width: 40%;
background: rgba(255, 255, 255, 0.65);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: right;
height: auto;
}
.page--30 .text-box h3 {
font-size: 18px;
margin: 0 0 8px;
}
.page--30 .text-box p {
margin: 0 0 6px;
}
/* 31페이지 */
.page--31 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--31 .panel--p1 {
position: absolute;
top: 16mm;
left: 12mm;
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p2 {
position: absolute;
top: 16mm;
left: calc(12mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p3 {
position: absolute;
top: 16mm;
left: calc(12mm + 60mm + 2mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p4 {
position: absolute;
top: calc(16mm + 60mm *4/5 + 2mm);
left: 12mm;
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p5 {
position: absolute;
top: calc(16mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p6 {
position: absolute;
top: calc(16mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p7 {
position: absolute;
top: calc(66mm + 60mm *4/5 + 2mm);
left: 12mm;
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p8 {
position: absolute;
top: calc(66mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p9 {
position: absolute;
top: calc(66mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p10 {
position: absolute;
top: calc(116mm + 60mm *4/5 + 2mm);
left: 12mm;
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p11 {
position: absolute;
top: calc(116mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .panel--p12 {
position: absolute;
top: calc(116mm + 60mm *4/5 + 2mm);
left: calc(12mm + 60mm + 2mm + 60mm + 2mm);
width: 60mm;
height: calc(60mm *4/5);
}
.page--31 .text-box {
position: absolute;
top: calc(166mm + 60mm *4/5 + 10mm + 30mm);
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 0px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--31 .text-box h3 {
font-size: 18px;
color: black;
margin: 0 0 8px;
}
.page--31 .text-box p {
color: black;
margin: 0 0 6px;
}
.page--31 .text--p1 {
position: absolute;
top: calc(166mm + 60mm *4/5 + 7mm);
left: 12mm;
width: 60mm;
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--31 .text--p2 {
position: absolute;
top: calc(166mm + 60mm *4/5 + 7mm);
left: calc(12mm + 60mm + 2mm);
width: 60mm;
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--31 .text--p3 {
position: absolute;
top: calc(166mm + 60mm *4/5 + 7mm);
left: calc(12mm + 60mm + 2mm + 60mm + 10mm);
width: 60mm);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(0deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
/* 32페이지 */
.page--32 {
width: 210mm;
height: 297mm;
position: relative;
overflow: hidden;
}
.page--32 .panel--p1 {
position: absolute;
top: 16mm;
left: 10mm;
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p2 {
position: absolute;
top: 16mm;
left: calc(10mm + 96mm + 2mm);
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p3 {
position: absolute;
top: calc(16mm + 64mm + 2mm);
left: 10mm;
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p4 {
position: absolute;
top: calc(16mm + 64mm + 2mm);
left: calc(10mm + 96mm + 2mm);
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p5 {
position: absolute;
top: calc(82mm + 64mm + 2mm);
left: 10mm;
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p6 {
position: absolute;
top: calc(82mm + 64mm + 2mm);
left: calc(10mm + 96mm + 2mm);
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p7 {
position: absolute;
top: calc(148mm + 64mm + 2mm);
left: 10mm;
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .panel--p8 {
position: absolute;
top: calc(148mm + 64mm + 2mm);
left: calc(10mm + 96mm + 2mm);
width: 96mm;
height: calc(96mm *2/3);
}
.page--32 .text-box {
position: absolute;
top: 230mm;
left: 52.5mm;
width: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: center;
height: auto;
}
.page--32 .text-box h3 {
font-size: 18px;
color: white;
margin: 0 0 8px;
}
.page--32 .text-box p {
color: white;
margin: 0 0 6px;
}
.page--32 .text--p1 {
position: absolute;
top: 54mm;
left: 107mm;
width: calc(141mm *2/3);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
.page--32 .text--p2 {
position: absolute;
top: 245mm;
left: 80mm;
width: calc(105mm *5/7);
background: rgba(255, 255, 255, 0.05);
padding: 0px;
transform: rotate(-90deg);
font-size: 13px;
line-height: 1.5;
color: #000;
z-index: 5;
text-align: left;
height: auto;
}
</style>
<div class="page-container"><!-- 31페이지 -->
<div class="a4-page page page--31 color-black">
<div class="a4-outline"> </div>
<div class="header align-left">머릿글 예시 (왼쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="panel1" href="/files/attach/images/2025/06/13/836f8b5a5d16875fc500372c4d3c0579.jpg"><img alt="Page 1 Photo" src="/files/attach/images/2025/06/13/836f8b5a5d16875fc500372c4d3c0579.jpg" /> </a></div>
<div class="text--p1">
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
<div class="text--p2">
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
<div class="text--p3">
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
<div class="panel panel--p2"><a data-lightbox="page12" data-title="panel2" href="/files/attach/images/2025/06/13/67288084738c41908ef72aba2ef80fd4.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/13/67288084738c41908ef72aba2ef80fd4.jpg" /> </a></div>
<div class="panel panel--p3"><a data-lightbox="page12" data-title="panel3" href="/files/attach/images/2025/06/13/89972d5268962289a7e4e445bbc61df6.jpg"><img alt="Page 3 Photo" src="/files/attach/images/2025/06/13/89972d5268962289a7e4e445bbc61df6.jpg" /> </a></div>
<div class="panel panel--p4"><a data-lightbox="page12" data-title="panel4" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p5"><a data-lightbox="page12" data-title="panel5" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p6"><a data-lightbox="page12" data-title="panel6" href="/files/attach/images/2025/06/13/89972d5268962289a7e4e445bbc61df6.jpg"><img alt="Page 3 Photo" src="/files/attach/images/2025/06/13/89972d5268962289a7e4e445bbc61df6.jpg" /> </a></div>
<div class="panel panel--p7"><a data-lightbox="page12" data-title="panel7" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p8"><a data-lightbox="page12" data-title="panel8" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p9"><a data-lightbox="page12" data-title="panel9" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p10"><a data-lightbox="page12" data-title="panel10" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p11"><a data-lightbox="page12" data-title="panel11" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="panel panel--p12"><a data-lightbox="page12" data-title="panel12" href="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg"><img alt="Page 4 Photo" src="/files/attach/images/2025/06/13/dccc702c46ef3c0a74eefb85a5dcd58d.jpg" /> </a></div>
<div class="text-box">
<h3>이것은 나의 이야기</h3>
</div>
<div class="footer align-left">- Page 31 -</div>
</div>
</div>
<!-- 32페이지 -->
<div class="a4-page page page--32 color-black">
<div class="a4-outline"><a data-lightbox="page12" data-title="Desert Panorama" href="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg"> </a></div>
<div class="header align-right"><a data-lightbox="page12" data-title="Desert Panorama" href="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg">머릿글 예시 (오른쪽 정렬) </a></div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page13" data-title="Desert1" href="/files/attach/images/2025/06/12/845353f7f1dfdb38007c78780b10fd46.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/12/845353f7f1dfdb38007c78780b10fd46.jpg" /> </a></div>
<div class="panel panel--p2"><a data-lightbox="page13" data-title="Desert2" href="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg" /> </a></div>
<div class="panel panel--p3"><a data-lightbox="page13" data-title="Desert3" href="/files/attach/images/2025/06/11/bc0dd6f8d4198f63c3363d25e2abd3b3.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/11/bc0dd6f8d4198f63c3363d25e2abd3b3.jpg" /> </a></div>
</div>
<div class="panel panel--p4"><a data-lightbox="page13" data-title="Desert4" href="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg" /> </a></div>
<div class="panel panel--p5"><a data-lightbox="page13" data-title="Desert5" href="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg" /> </a></div>
<div class="panel panel--p6"><a data-lightbox="page13" data-title="Desert6" href="/files/attach/images/2025/06/11/bc0dd6f8d4198f63c3363d25e2abd3b3.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/11/bc0dd6f8d4198f63c3363d25e2abd3b3.jpg" /> </a></div>
<div class="panel panel--p7"><a data-lightbox="page13" data-title="Desert7" href="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/12/6c7063056e4845663bf10843caf74120.jpg" /> </a></div>
<div class="panel panel--p8"><a data-lightbox="page13" data-title="Desert8" href="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/11/992b7d7b9355c543c172e69abf07b8d6.jpg" /> </a></div>
<div class="footer align-right">- Page 32 -</div>
</div>
</div>
<p> </p>
<p> </p>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2/dist/js/lightbox.min.js"></script>
by eGrida posted Jun 17, 2025
