cover 1.4
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;900&family=Georgia&display=swap" rel="stylesheet" />
<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", "Montserrat", "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;
}
.photo-background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.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;
}
.text-overlay {
position: absolute;
top: 60mm;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.1);
padding: 10mm 15mm;
border-radius: 6px;
text-align: left;
color: white;
z-index: 1;
}
.text-overlay h1 {
margin: 0;
font-size: 32px;
font-weight: bold;
}
.text-overlay h2 {
margin: 0;
font-size: 16px;
}
.text-overlay h5 {
margin: 0;
font-size: 10px;
color: white;
}
.text-overlay p {
margin: 5px 0;
font-size: 16px;
}
.text-overlay .brand {
font-weight: 900;
font-family: 'Montserrat', sans-serif;
color: #000;
font-size: 48px;
line-height: 1.0; /* ← 줄간격 조정 */
}
.text-overlay .light {
font-weight: 300;
font-family: 'Georgia', serif;
font-size: 32px;
color: #555;
}
.text-overlay .mont {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #000;
}
.text-footer {
position: absolute;
bottom: 20mm;
left: 50%;
width: 150mm;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.01);
padding: 5px 10px;
border-radius: 6px;
text-align: center;
color: black;
z-index: 1;
}
.text-footer p {
margin: 5px 0;
font-size: 14px;
font-family: 'Montserrat', serif;
}
/* 호버박스 */
.hover-box {
position: absolute;
left: 10mm;
bottom: 10mm;
width: 10mm;
height: 10mm;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
}
.hover-box:hover {
width: 90mm;
height: 60mm;
background: rgba(0, 0, 0, 0.7);
}
.hover-box span {
position: absolute;
white-space: nowrap;
transition: all 0.5s ease-in-out;
}
.hover-box .default-text {
color: white;
font-size: 10pt;
opacity: 1;
transform: scale(1);
}
.hover-box:hover .default-text {
opacity: 0;
transform: scale(0.8);
}
.hover-box .hover-text {
color: white;
font-size: 0pt;
opacity: 0;
transform: scale(0.8);
}
.hover-box:hover .hover-text {
font-size: 8pt;
opacity: 1;
transform: scale(1.1);
}
</style>
<div class="page-container"><!-- cover 1페이지 -->
<div class="a4-page"><img alt="Background" class="photo-background" src="/files/attach/images/2025/06/20/99935e612d573a69ecc28926d50f696c.jpg" />
<div class="text-overlay"><span class="mont" style="font-size: 10px;">@2021 | Seoul</span><br />
<br />
<span class="brand">GOOD<br />
MORNING</span><br />
<span class="mont">EVERYONE</span><br />
<br />
<time datetime="2021-10-25T08:40"><span class="brand" style="font-size: 18px;">08:40 <sup>AM</sup> | Monday <sup>25 Oct</sup></span> </time><br />
<br />
<span class="mont" style="font-size: 10px;">have a nice day</span></div>
<div class="text-footer">
<p>©2021 | pict by ciimplung</p>
</div>
<div class="hover-box"><span class="default-text">1</span> <span class="hover-text">지난 33년 동안 매일 아침 거울을 보며 물었다.<br />
오늘이 인생 마지막 날이라면, 오늘 할 일을 하고 싶나?<br />
이에 대한 답이 "아니오"이고 그런 날이 연달아 계속되면,<br />
변화의 시점이 찾아왔다는 걸 깨닫는다. </span>
<p style="text-align: left;"><span class="hover-text">-스탠포드 졸업 연설중에서 </span></p>
</div>
</div>
<!-- 2페이지 -->
<div class="a4-page page page--2 color-black">
<div class="a4-outline"> </div>
<div class="header align-right">머릿글 예시 (오른쪽 정렬)</div>
<div class="page-content">
<div class="panel panel--p1"><a data-lightbox="page12" data-title="Desert Panorama" href="/files/attach/images/2025/06/02/316111bbc21810c191c527f1132597f5.jpg"><img alt="Page 2 Photo" src="/files/attach/images/2025/06/02/316111bbc21810c191c527f1132597f5.jpg" /> </a></div>
<div class="text-box">
<h3>조용한 오후의 초콜릿</h3>
<p>창밖의 흐릿한 빛 아래, 회색 후드 속에 숨겨진 작은 일상.<br />
무심한 듯 건네는 초콜릿 하나에도 온기가 담긴다.</p>
<p>#후드티 #초콜릿 #고요한순간</p>
</div>
</div>
<div class="footer align-right">- Page 2 -</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 22, 2025
