page 5 new 4

<style type="text/css"> .page5-a5 { width: 420px; height: 595px; margin: 0 auto; background-color: white; border: none; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .page5 { position: absolute; } .page5.p1 { width: 140px; /* 고정 */ height: 175px; /* 140 * (5/4) → 4:5 세로비율 */ right: 0; top: 10mm; z-index: 1; } .page5.p2 { width: 140px; height: 210px; /* 2:3 비율 유지 */ left: 0; bottom: 10mm; z-index: 1; } .page5.p3 { width: 240px; height: 360px; /* 2:3 비율 유지 */ right: 0; bottom: 10mm; z-index: 1; } .page5 img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 767px) { .page5-a5 { width: 100%; max-width: 420px; margin: 0 auto 40px; } } </style> <div class="page5-a5"> <!-- p1: 상단 오른쪽, 세로 비율 4:5 --> <div class="page5 p1"> <a data-lightbox="album" data-title="Top Right" href="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg"> <img alt="Top Right" src="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" /> </a> </div> <!-- p2: 하단 왼쪽, 세로 비율 2:3 --> <div class="page5 p2"> <a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg"> <img alt="Bottom Left" src="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" /> </a> </div> <!-- p3: 하단 오른쪽, 가로 240px에 2:3 비율 --> <div class="page5 p3"> <a data-lightbox="album" data-title="Bottom Right" href="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg"> <img alt="Bottom Right" src="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" /> </a> </div> </div>