page 1~4 new

<style type="text/css">.page1-a5 { width: 420px; height: 595px; position: relative; background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg'); background-size: 200% auto; background-repeat: no-repeat; background-position: left center; overflow: hidden; border: 1px solid #ccc; box-shadow: 0 0 8px rgba(0,0,0,0.2); margin: 0 auto; } .page1 { width: 297.5px; aspect-ratio: 1 / 1; overflow: hidden; position: absolute; left: 0; } .page1.p1 { top: 0; } .page1.p2 { top: 297.5px; } .page1 img { width: 100%; height: 100%; object-fit: cover; display: block; } .page2-a5 { width: 420px; height: 595px; position: relative; background-image: url('/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg'); background-size: 200% auto; background-repeat: no-repeat; background-position: right center; overflow: hidden; border: 1px solid #ccc; box-shadow: 0 0 8px rgba(0,0,0,0.2); margin: 0 auto; } .page2 { position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 70%; aspect-ratio: 1 / 1; overflow: hidden; box-shadow: 0 0 4px rgba(0,0,0,0.2); } .page2 img { width: 100%; height: 100%; object-fit: cover; } .page3-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; } .page3 { position: absolute; background-repeat: no-repeat; } .page3.p1 { width: 275px; height: 140px; left: 0; bottom: 280px; z-index: 1; } .page3.p2 { width: 275px; height: 275px; left: 0; bottom: 0; z-index: 1; } .page3.p3 { width: 140px; height: 420px; left: 280px; bottom: 0; background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg'); background-size: 560px 420px; background-position: left center; z-index: 0; } .page3 img { width: 100%; height: 100%; object-fit: cover; display: block; } .page4-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; } .page4 { position: absolute; width: 420px; height: 420px; left: 0; bottom: 0; background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg'); background-size: 560px 420px; background-position: right center; background-repeat: no-repeat; z-index: 0; } .page4-tbox { position: absolute; top: 20px; width: 70%; right: 5%; background: rgba(255, 255, 255, 0.9); padding: 16px; box-shadow: 0 0 6px rgba(0,0,0,0.1); font-size: 13px; line-height: 1.4; z-index: 2; } .page4-tbox h3 { font-size: 16px; margin: 0 0 8px; } .page4-tbox p { margin: 0 0 6px; } /* ✅ 모바일 대응 */ @media (max-width: 767px) .page1-a5 { background-position-x: left; } .page2-a5 { background-position-x: right; } .page1 { left: 0; /* 왼쪽에 정확히 붙이기 */ } .page2 { left: 50%; transform: translate(-50%, -50%); } .page4-a5; .page3-a5 { width: 100%; max-width: 420px; margin: 0 auto 40px; } } </style> <div class="spread"> <div class="page1-a5"> <div class="page1 p1"><a data-lightbox="album" data-title="Top Left" href="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg"><img alt="Top Left" src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" /> </a></div> <div class="page1 p2"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"><img alt="Bottom Left" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a></div> </div> <div class="page2-a5"> <div class="page2"><a data-lightbox="album" data-title="Right Highlight" href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg"><img alt="Right Highlight" src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" /> </a></div> </div> </div> <div class="spread"> <div class="page3-a5"> <div class="page3 p2"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"><img alt="Bottom Square" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a></div> <div class="page3 p1"><a data-lightbox="album" data-title="Top Left (16:9)" href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg"><img alt="Top Rect" src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" /> </a></div> <div class="page3 p3"> </div> </div> <div class="page4-a5"> <div class="page4"> </div> <div class="page4-tbox"> <h3>Desert Echoes</h3> <p>사막의 아침 공기가 아직 따스함을 품기 전</p> <p>고요한 장면을 담은 한 컷</p> <p>#빛 #바람 #침묵</p> </div> </div> </div>