@keyframes photo-moving { 
    0% { object-position: left; } 
   100% { object-position: right; } 
    }
   
   .outro { background-color: black; z-index:10; } 
   
   .credit { padding-top:120px; font-size: 15px; color: #FFFFFF90; } 
   .credit a { display:inline-block; text-decoration: underline; } 
   
   .more-photo { width: 100%; display: flex; align-items: center; flex-direction: column; padding-top: 45px; padding-bottom:100px; } 
   .title-desc { color: #FFFFFFBF; font-family: Spoqa Han Sans Neo; font-size: 22px; line-height: 150%; letter-spacing: -0.02em; text-align: center; margin-bottom: 8px; font-weight: 300; } 
   .more-photo .more-photo-title span:nth-child(2) { display: none; } 
   .more-photo-title { font-family: Spoqa Han Sans Neo; font-size: 40px; font-weight: 700; line-height: 150%; letter-spacing: -0.03em; text-align: center; color: white; margin-bottom: 60px; } 
   .more-photo-title br { display: none; } 
   .photo-distance { display: flex; justify-content: center; align-items: center; gap: 4%; width: 60vw; border-bottom: 1px solid #5A5A5A; padding-bottom: 8px; margin-bottom: 48px; } 
   .distance { font-family: Spoqa Han Sans Neo; font-size: 22px; font-weight: 300; line-height: 150%; text-align: center; color: #5A5A5A; cursor: pointer; transition: 0.5s; width: 180px; transition: color 0.3s; } 
   .distance:hover { color: #E5E5E5; } 
   .distance span { font-size: 14px; } 
   .distance.now { color: #E5E5E5; } 
   .now-distance { position: absolute; width: 150px; border-bottom: 2px solid #E5E5E5; height: 50px; display: flex; justify-content: center; transition: 1s; } 
   .now-point { width: 6px; height: 6px; background-color: white; box-shadow: 0px 2px 18px 6px #FFFFFF82; border-radius: 100%; } 
   .more-photo-part { display: flex; justify-content: center; align-items: center; gap: 32px; position: relative; } 
   .photo-btn { border: none; background-color: transparent; background-image: url(https://image.donga.com/policy/hero/jameswebb2/images/arrow.svg); background-position: center; background-repeat: no-repeat; width: 40px; height: 40px; cursor: pointer; transition: filter 0.3s; } 
   .photo-btn:hover { filter: brightness(2); } 
   .left-btn { transform: rotate(180deg); } 
   .more-photo-grid-list { display: flex; justify-content: center; align-items: flex-start; width: 60vw; overflow: hidden; gap: 20px; } 
   .more-photo-grid { flex-shrink: 0; width: 100%; height: 80vw; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1%; position: relative; transition: 1s; } 
   .close-btn { position: fixed; right: calc(50% - 48vh); top: calc(50% - 36vh); width: 24px; height: 24px; transform: translate(50%, -50%) rotate(45deg); z-index: 30; opacity: 0; visibility: hidden; } 
   .modal-layer { position: fixed; top: 0; left: 0; z-index: 15; width: 100%; height: 100%; background: #111111CF; display: none; } 
   .modal-open { display: block; } 
   .photo { overflow: hidden; border: 1px solid #252525; border-radius: 16px; position: relative; cursor: pointer; } 
   .photo:hover { border: 2px solid white; } 
   .click-able { overflow: initial; z-index: 20; } 
   .photo::after { content: ""; position: absolute; top: 0; left: 0; border-radius: 16px; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); background-blend-mode: color-dodge; } 
   .modal-photo, .photo img { height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid #252525; } 
   .modal-photo.enlarge { position: fixed; z-index: 10; width: 96vh; height: 72vh; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #484E53c7; animation: photo-moving 8s infinite alternate ease-in-out; } 
   .modal-wrap { position: fixed; z-index: 10; width: 96vh;height: 72vh; left: 50%; top: 50%; transform: translate(-50%, -50%);  } 
   .photo.click-able:hover { border: 1px solid #252525; } 
   .release-date { font-size: 20px; font-weight: 400; line-height: 40px; color: #FFFFFFBF; } 
   .photo-name { position: fixed; font-family: Spoqa Han Sans Neo; font-size: 32px; line-height: 150%; font-weight: 700; color: #FFFFFFBF; z-index: 10; left: 50%; bottom:0; transform: translate(-50%, 0%); padding: 36px; box-sizing: border-box; width: 96vh; height: 72vh; display: none; justify-content: flex-end; flex-direction: column; align-items: flex-start; border-radius: 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 75.03%, rgba(0, 0, 0, 0.81) 95.32%); } 
   .photo-name br { display: none; } 
   .photo-desc { font-family: Spoqa Han Sans Neo; font-size: 26px; font-weight: 400; line-height: 32.8px; letter-spacing: -0.02em; text-align: left; } 
   .photo-open { display: flex; } 
   .close-btn-open { opacity: 1; visibility: visible; cursor: pointer; } 
   .more-photo-grid:nth-child(1) .photo:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } 
   .more-photo-grid:nth-child(1) .photo:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } 
   .more-photo-grid:nth-child(1) .photo:nth-child(6) { grid-area: 3 / 2 / 4 / 4; } 
   .more-photo-grid:nth-child(1) .photo:nth-child(7) { grid-area: 4 / 1 / 5 / 4; } 
   .more-photo-grid:nth-child(2) .photo:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } 
   .more-photo-grid:nth-child(2) .photo:nth-child(4) { grid-area: 2 / 2 / 3 / 4; } 
   .more-photo-grid:nth-child(2) .photo:nth-child(5) { grid-area: 3 / 1 / 4 / 3; } 
   .more-photo-grid:nth-child(2) .photo:nth-child(8) { grid-area: 4 / 2 / 5 / 4; } 
   .more-photo-grid:nth-child(3) .photo:nth-child(2) { grid-area: 1 / 2 / 2 / 4; } 
   .more-photo-grid:nth-child(3) .photo:nth-child(3) { grid-area: 2 / 1 / 4 / 2; } 
   .more-photo-grid:nth-child(3) .photo:nth-child(4) { grid-area: 2 / 2 / 3 / 4; } 
   .more-photo-grid:nth-child(3) .photo:nth-child(7) { grid-area: 4 / 1 / 5 / 3; } 
   
   .qna { width: 100%; display: flex; align-items: center; flex-direction: column; } 
   .question-list { width: 640px; border-top: 0.5px solid #5A5A5A80; margin-bottom: 192px; } 
   .question-part { border-bottom: 0.5px solid #5a5a5a80; } 
   .question-part.answer-open { border-bottom: 1px solid #88888880; } 
   .question { padding: 24px 20px; display: flex; justify-content: space-between; align-items: center; font-family: Spoqa Han Sans Neo; font-size: 20px; font-weight: 400; line-height: 36px; letter-spacing: -0.02em; text-align: left; color:#E5E5E5; cursor: pointer; transition: color 0.3s; } 
   .question:hover { color: #FFFFFF; } 
   .question-arrow { width: 8px; height: 16px; transform: rotate(90deg); } 
   .question-part.answer-open .question .question-arrow { transform: rotate(-90deg); } 
   .answer-wrap { grid-template-rows: 0fr; display: grid; box-shadow: 0px 4.17px 4.17px 0px #00000040; background-color: #5A5A5A40; border-radius: 8px 8px 0 0; transition: 0.5s; padding: 0 24px; } 
   .answer-wrap div { overflow: hidden; } 
   .answer { font-family: Spoqa Han Sans Neo; font-size: 18px; font-weight: 300; line-height: 32.4px; letter-spacing: -0.03em; text-align: left; color: #FFFFFFBF; } 
   .question-part.answer-open .answer-wrap { grid-template-rows: 1fr; padding: 24px; } 
   .youtube-video { display: flex; align-items: center; flex-direction: column; justify-content: center; margin-bottom:186px; } 
   .youtube-video .iframe-wrap { width:60vw; position: relative; padding-bottom: 36.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; } 
   .youtube-video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 
   
   .link-to-season1 { width: 640px; box-shadow: 0px 4px 4px 0px #00000040; background-color: #5A5A5A40; border-radius: 16px; position: relative; border: 0.5px solid rgba(255, 255, 255, 0.300); padding: 60px 40px; box-sizing: border-box; margin-top:200px; margin-bottom:192px; transition: background-color 0.3s; } 
   .link-to-season1:hover { background-color: #505050; } 
   .link-to-season1-title { font-family: Spoqa Han Sans Neo; font-size: 22px; font-weight: 700; line-height: 150%; text-align: left; color: #FFFFFF; margin-bottom: 4px; } 
   .season1-link { font-family: Spoqa Han Sans Neo; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: -0.03em; text-align: left; color: #FFFFFF80; display: flex; align-items: center; } 
   .link-arrow { width: 4px; margin-left: 5px; } 
   .jamesweb-img { width: 320px; position: absolute; right: 0; bottom: 0; } 
   
   @media all and (max-width: 876px){
    .more-photo { align-items: flex-start; padding: 0 16px; box-sizing: border-box; } 
   .more-photo .more-photo-title span:nth-child(1) { display: none; } 
   .more-photo .more-photo-title span:nth-child(2) { display: inline-block; } 
   .title-desc { font-size: 14px; margin-bottom: 4px; position: relative; margin-left: 16px; font-weight: 300; } 
   .title-desc::before { content: ""; position: absolute; top: 6.5px; left: -16px; border-radius: 100%; width: 8px; height: 8px; background-color: white; box-shadow: 0px 1px 10px 1px #FFFFFF73; } 
   .more-photo-title { font-size: 22px; margin-bottom: 60px; text-align: left; word-break: keep-all; } 
   .more-photo-title br { display: block; } 
   .photo-distance { display: none; } 
   .photo-btn { display: none; } 
   .more-photo-grid-list { width: 100%; flex-direction: column; gap: 60px; overflow: initial; } 
   .close-btn { right: calc(50% - 150px); top: calc(50% - 200px); transform: translate(50%, -50%) rotate(45deg); } 
   .more-photo-grid { height: calc((100vw - 32px) * 4 / 3); gap: 2%; } 
   .more-photo-grid:nth-child(1)::before { content: "~1만광년"; position: absolute; font-family: Spoqa Han Sans Neo; font-size: 13px; line-height: 150%; font-weight: 300; color: #FFFFFF80; transform: translateY(-27px); } 
   .more-photo-grid:nth-child(2)::before { content: "1만~1000만광년"; position: absolute; font-family: Spoqa Han Sans Neo; font-weight: 300; font-size: 13px; line-height: 150%; color: #FFFFFF80; transform: translateY(-27px); } 
   .more-photo-grid:nth-child(3)::before { content: "1000만광년~"; position: absolute; font-family: Spoqa Han Sans Neo; font-weight: 300; font-size: 13px; line-height: 150%; color: #FFFFFF80; transform: translateY(-27px); } 
   .photo:hover { border: 1px solid #252525; } 
   .modal-photo.enlarge { width: 300px; height: 400px; } 
   .modal-wrap{width: 300px; height: 400px;}
   .photo-name { font-size: 18px; line-height:27px; color: white; line-height: 150%; height: fit-content; width: 301px; padding: 16px; padding-top:8px; box-sizing: border-box; background: linear-gradient(90deg, #484E53c7 0.09%, #45535Dc7 98.73%); border-radius: 0 0 16px 16px; } 
   .photo-name br { display: block; } 
   .photo-desc { display:block; font-size: 18px; font-weight: 400; line-height: 27px; letter-spacing: -0.03em; } 
   .photo-open { display: block; } 
   .release-date { font-size: 13px; line-height:19.5px; } 
   .qna { align-items: flex-start; padding: 0 16px; box-sizing: border-box; padding-bottom: 96px; } 
   .qna .more-photo-title { margin-bottom: 24px; line-height: 130%; } 
   .question-list { width: 100%; margin-bottom: 0px; border-top: 1px solid #5a5a5a99; } 
   .question { font-size: 18px; color: #E5E5E5; line-height: 130%; padding: 18px 8px; font-weight: 500; } 
   .question:hover { color: #E5E5E5; } 
   .question span { margin-right: 28px; } 
   .question-part { border-bottom: 0.5px solid #5a5a5a99; } 
   .question-part.answer-open { border-bottom: 1px solid #88888899; } 
   .answer-wrap { padding: 0 16px; background: linear-gradient(180deg, rgba(90, 90, 90, 0.4) 0%, rgba(90, 90, 90, 0.32) 100%); } 
   .question-part.answer-open .answer-wrap { padding: 16px; } 
   .answer { font-weight: 300; font-size: 16px; line-height: 24px; } 
   .question-arrow { width: 10px; height: 14px; } 
   .link-to-season1::before { content: ""; position: absolute; top: -23px; left: 0; border-radius: 100%; width: 8px; height: 8px; background-color: white; box-shadow: 0px 1px 10px 1px #FFFFFF73; } 
   .link-to-season1 { width: 100%; box-sizing: border-box; padding: 24px 30px; margin-bottom:96px; padding-left:16px; -webkit-text-size-adjust : none; -ms-text-size-adjust : none; -moz-text-size-adjust : none; -o-text-size-adjust : none; } 
   .link-to-season1:hover { background-color:#5A5A5A40; } 
   .link-to-season1::after { content: "추가 기사보기"; font-family: Spoqa Han Sans Neo; font-size: 14px; line-height: 150%; letter-spacing: -0.03em; text-align: left; position: absolute; color: #FFFFFFBF; top: -30px; left: 16px; } 
   .link-to-season1-title { font-size: 18px; color: white; } 
   .season1-link { font-size: 13px; } 
   .jamesweb-img { width: auto; height: 130%; z-index: 0; } 
   .youtube-video { width: 100%; padding: 0 16px; align-items: flex-start; margin-bottom:81px; } 
   .youtube-video .more-photo-title { margin-bottom:24px; } 
   .youtube-video .iframe-wrap { width:100%; padding-bottom: 56.25%; } 
    }