@charset "UTF-8"; 

body.lockScroll { height:100vh; overflow:hidden; background-color: black; } 
.container { width: 100%; height: auto; font-family: "Noto Serif KR", serif; background: #0d0d0d; } 
/* INTRO */
.container section.intro { width: 100%; height: auto; position: relative; background-color: #000000; } 
.container section.intro.grid { opacity: 1 !important; } 
.container section.intro.grid .intro-bg-wrapper { display: block; opacity: 1; z-index: 20 !important; } 
.container section.intro .intro-bg-wrapper { width: 100%; height: 95vh; position: fixed; top: 49px; opacity: 0; } 
.container section.intro .intro-bg-wrapper .bg-container { position:absolute; width:100%; height:95vh; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; margin:0 auto; transform:translate(-50%,-50%); left:50%; top:50%; } 
.container section.intro .intro-bg-wrapper .close-btn { display:none; } 
.container section.intro .intro-bg-wrapper .intro-img { width: 15.6%; position:relative; } 
.container section.intro .intro-bg-wrapper .intro-img img { width: 100%; } 
.container section.intro .intro-bg-wrapper .intro-img .hover-text { position:absolute; width:100%; height:100%; top:0; left:0; color:white; display:flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 400; text-align: center; word-break: keep-all; line-height: 25px; opacity:0; } 
.container section.intro .intro-bg-wrapper .intro-img .hover-text p { width:80%; margin:0 auto; } 

.container section.intro .intro-bg-wrapper.grid { z-index:102; opacity:1; height:100vh; background-color:#000000; overflow:hidden; top:0; box-sizing: border-box; } 
.container section.intro .intro-bg-wrapper.grid .bg-container { position:absolute; width:70%; height:80vh; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; margin:0 auto; transform:translate(-50%,-50%); left:50%; top:50%; } 
.container section.intro .intro-bg-wrapper.grid .bg-container .intro-img { transition: all 0.5s; } 
.container section.intro .intro-bg-wrapper.grid .bg-container .intro-img:hover > .hover-text { opacity:1; background-color:#000000b9; } 
.container section.intro .intro-bg-wrapper.grid .close-btn { display:none; position: fixed; top: 60px; right: 30px; font-size: 14px; font-weight:600; padding: 20px; color: #666666; align-items: center; justify-content: center; cursor:pointer; transition: all 0.5s; } 
.container section.intro .intro-bg-wrapper.grid .close-btn:hover { color:#ffffff; } 
.container section.intro .intro-bg-wrapper.grid .close-btn img { padding-right: 6px; } 

.container section.intro .intro-bg-wrapper.grid .intro-img .hover-text { transition: all 0.5s; cursor:pointer; } 
/* 추가 */
.container section.intro .intro-text-wrapper{width:100%; height:auto;}
/*  */
.container section.intro .intro-text-wrapper .text-box-wrapper { width:100%; height: 100vh; display: flex; align-items: center; justify-content: center; } 
.container section.intro .intro-text-wrapper .text-box-wrapper:nth-child(5) { height:200vh; } 
.container section.intro .intro-text-wrapper .text-box-wrapper .text-box { background-color: rgba(0, 0, 0, 0.8); width: auto; padding: 20px 40px; z-index: 10; color: #ffffff; box-sizing: border-box; } 
.container section.intro .intro-text-wrapper .text-box-wrapper .text-box p { font-size: 20px; line-height: 40px; font-weight: 300; } 
.container section.intro .intro-text-wrapper .intro-title-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; color: white; display: none; opacity: 0; font-family: "Noto Serif KR", serif; font-weight: Bold; } 
.container section.intro .intro-text-wrapper .intro-title-wrapper .title-text { text-align: center; background-image: url("../images/common/title_gradation.png"); background-position: center; } 
.container section.intro .intro-text-wrapper .intro-title-wrapper .title-text p { font-size: 48px; padding-bottom: 32px; } 
.container section.intro .intro-text-wrapper .intro-title-wrapper .title-text span { font-size: 82px; } 
.container section.intro .intro-text-wrapper .intro-title-wrapper .title-text #change-text::before { content: ""; display: inline-block; width: 400px; text-align: right; font-size: 82px; line-height: 128px; -webkit-animation-name: changeText; animation-name: changeText; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 
.container section.intro .icon_scroll { position: fixed; left: 50%; bottom: 5%; width: 18px; height: 56px; margin-left: -9px; background: url("../images/common/icon_scroll.png") no-repeat 0 0; z-index: 1; -webkit-animation: pulse 1s infinite; animation: pulse 1s infinite; transition: all 0.3s; } 
/* MAIN */
.container .main { width: 100%; height: auto; position: relative; } 
.container .main .list-wrapper { position: fixed; top: 0; width: 100%; height: 100vh; background-color: #000000; overflow: hidden; opacity: 0; transition: all 0.5s; } 
.container .main .list-wrapper .list { width: 100%; height: auto; position: absolute; top: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 1s ease-out; } 
.container .main .list-wrapper .list .main-img-wrapper { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } 
.container .main .list-wrapper .list .main-img-wrapper .main-img { width: 50%; opacity: 0%; transition: all 0.5s; margin: 0 auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; min-width: 700px; } 
.container .main .list-wrapper .list .main-img-wrapper .main-img.active { opacity: 100%; } 
.container .main .list-wrapper .list .main-img-wrapper .main-img.active.fade { opacity: 15%; } 
.container .main .list-wrapper .list .main-img-wrapper .main-img.ver { width: 35%; } 
.container .main .scroller { width: 100%; height: auto; z-index: 10; position: relative; padding-bottom: 100vh; } 
.container .main .scroller .chapter-zone { width: 100%; height: 150vh; position: relative; background: linear-gradient(180deg, #0D0D0E 0%, rgba(13, 13, 14, 0) 100%); mix-blend-mode: normal; display: flex; align-items: center; justify-content: center; } 
.container .main .scroller .chapter-zone.parent,.container .main .scroller .chapter-zone.spouse { margin-top: 100vh; } 
.container .main .scroller .chapter-zone .text-wrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Noto Serif KR", serif; } 
.container .main .scroller .chapter-zone .text-wrapper .title { font-family: "Noto Serif KR", serif; font-weight: Normal; font-size: 7vw; line-height: 204px; letter-spacing: -0.8vw; padding-bottom: 64px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 6.9%, rgba(255, 255, 255, 0) 85%, rgba(255, 255, 255, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; transform: translate(-5%, 100px); opacity: 0; transition: all 0.6s; width: 60%; } 
.container .main .scroller .chapter-zone .text-wrapper .desc { width: 50%; align-self: flex-end; font-weight: 500; font-size: 20px; line-height: 40px; } 
.container .main .scroller .chapter-zone .text-wrapper .desc p { color: #BBBBBB; padding-bottom: 40px; } 
.container .main .scroller .chapter-zone .text-wrapper .desc strong { color: #ffffff; padding-bottom: 40px; } 
.container .main .scroller .person-wrapper { width: 100%; height: auto; } 
.container .main .scroller .person-wrapper .text-wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } 
.container .main .scroller .person-wrapper .text-wrapper.story { height: 170vh; min-height: 1700px; transition: all 0.5s; opacity: 0; } 
.container .main .scroller .person-wrapper .text-wrapper.story .text-box { display: none; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active { opacity: 1; transition: all 0.5s; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box { padding: 12px; position: fixed; font-family: "Noto Serif KR", serif; width: 600px; box-sizing: border-box; display: block; transform: translate(-50%, -50%); left: 50%; top: 50%; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box p { padding-bottom: 32px; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .desc { font-size: 18px; font-weight: 400; line-height: 28.8px; color: #e9e9e9; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .comment { font-size: 22px; font-weight: 500; line-height: 35.2px; color: #F4D89F; padding-left: 20px; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .comment.fade { font-size: 18px; line-height: 28.8px; color: #939393; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info { font-family: "Noto Sans KR", sans-serif; font-size: 15px; color: #969696; padding-top: 80px; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info .name { padding-bottom: 20px; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info .name strong { font-weight: 700; } 
.container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info .desc { font-size: 14px; color: #666666; padding-left: 20px; } 
.container .main .scroller .nav-bar { width: 100%; position: fixed; bottom: 0; height: 60px; opacity: 0; display: none; justify-content: center; align-items: center; color: #8d8d8d; background-color: #000000; transition: all 0.5s; } 
.container .main .scroller .nav-bar ul { display: flex; margin: 0; padding-left: 0; font-size: 14px; line-height: 22.4px; margin: 0 20px; } 
.container .main .scroller .nav-bar ul p { display: inline-block; padding-right: 35px; font-size: 12px; } 
.container .main .scroller .nav-bar ul li { display: list-item; list-style-type: disc; margin-right: 35px; text-indent: -8px; cursor: pointer; transition: all 0.5s; } 
.container .main .scroller .nav-bar ul li.active { color: #ffffff; } 
.container .main .scroller .nav-bar ul li:hover { color: #a89a7e; } 
.container .main .scroller .nav-bar ul li::marker { padding: 0; margin: 0; } 
.container .main .scroller .grid-btn { color: #666666; position: fixed; opacity:0; top: 60px; right: 30px; font-size: 14px; font-weight:600; padding: 20px; cursor:pointer; transition:all 0.5s; } 
.container .main .scroller .grid-btn:hover { color:#ffffff; } 
.container .main .scroller .grid-btn p { display: flex; align-items: center; justify-content: center; } 
.container .main .scroller .grid-btn p img { padding-right:6px; } 

/* EPILOGUE */
.container .main .epilogue { position: relative; width: 100%; height: auto; color: #e9e9e9; padding-bottom: 480px; } 
.container .main .epilogue .text-container { width: 588px; margin: 0 auto; font-size: 16px; line-height: 30px; font-weight: 400; } 
.container .main .epilogue .text-container .text-wrapper { padding-bottom: 30px; } 
.container .main .epilogue .text-container .text-wrapper a { color: #F4D89F; text-decoration: underline; transition: all 0.5s; } 
.container .main .epilogue .text-container .text-wrapper a:hover { color: #ffffff; } 
.container .main .epilogue .link { width: 400px; margin: 120px auto; text-align: center; cursor: pointer; transition: all 0.5s; } 
.container .main .epilogue .link .text-box { border: 1px solid #e9e9e9; padding: 10px; box-sizing: border-box; width: 80%; margin: 0 auto; margin-bottom: 30px; transition: all 0.5s; } 
.container .main .epilogue .link .text-box strong { font-weight: 700; font-size: 16px; line-height: 32px; } 
.container .main .epilogue .link .text-box p { font-size: 13px; line-height: 26px; text-decoration: underline; } 
.container .main .epilogue .link .text-box:hover { color: #969696; border: 1px solid #969696; } 
.container .main .epilogue .link img { width: 100%; } 
/* BYLINE */
.container .swiper-container { width:50%; height:auto; padding: 80px 0; margin:0 auto; position:relative; } 
.swiper { width: 100%; height: 200px; } 
.swiper-slide { text-align: center; font-size: 18px; background: #fff; } 
.swiper-slide { display: block; width: 100%; height: 100%; object-fit: cover; filter:brightness(0.5); background-position: center; background-repeat: no-repeat; background-size:cover; width:80%; color:#ffffff; cursor:pointer; } 
.swiper-slide .text .sub-title { font-size: 16px; } 
.swiper-slide .text { position:absolute; bottom:10px; left:10px; text-align: left; } 
.swiper-slide .text .title { font-weight:700; font-size: 40px; line-height:60px; } 
.swiper-slide-active { filter: initial; } 
.swiper-slide.memorial { background-image: url("../images/common/memorial-thumb.jpg"); width:80%; } 
.swiper-slide.firefighter { background-image: url("../images/common/firefighter-thumb.jpg"); width:80%; } 
.swiper-button-next, .swiper-button-prev { color: white !important; top:15% !important; width:10px; height:10px; } 
.swiper-button-next:after, .swiper-button-prev:after { font-size:initial !important; } 
.swiper-button-next { right:-6px !important; } 
.swiper-button-prev { right:15px !important; left:auto !important; } 

.container .byline { position: relative; width: 100%; padding: 30px 0 28px; background: #000000; border-top: 1px solid #3d3d3d; font-family: "Noto Sans KR", sans-serif; } 
.container .byline .make_list { padding: 0 15px; width: 50%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } 
.container .byline .make_list li { margin-bottom: 20px; font-size: 14px; color: #EDEDED; position: relative; width: 50%; } 
.container .byline .make_list li:last-child .bold { padding-right: 46px; } 
.container .byline .make_list li span { text-align: center; } 
.container .byline .make_list li a { color: #EDEDED; transition: all 0.5s; } 
.container .byline .make_list li a:hover { color: #969696 !important; } 
.container .byline .make_list li .bold { font-size: 14px; font-weight: bold; padding-right: 60px; } 
.container .byline .make_list li .txt_bar { display: inline-block; margin: 0 10px 0 9px; color: #dadada; font-size: 15px; vertical-align: top; } 

/* MEDIAQUERY */
@media all and (max-width: 1320px){
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .desc { font-size: 17px; line-height: 27.8px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .comment { font-size: 20px; line-height: 32px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box p { padding-bottom: 24px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info { padding-top: 55px; } 
 .container section.intro .intro-bg-wrapper .intro-img .hover-text { font-size: 12px; line-height: 20px; } 
 .container .byline .make_list { width:80%; } 
 .container .byline .make_list li { width:50%; } 
 .container .swiper-container { width:80%; } 
 }
 @media all and (max-height: 800px){
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box p { padding-bottom: 25px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .comment { font-size: 18px; line-height: 30px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .desc { font-size: 15px; font-weight: 300; line-height: 24px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info { font-size: 14px; padding-top: 20px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info .name { padding-bottom: 5px; } 
 .container .main .scroller .person-wrapper .text-wrapper.story.active .text-box .info .desc { line-height: 20px; font-size: 13px; } 
 }
 
/* ANIMATION */
@-webkit-keyframes changeText { 
 0% { content: "아내, 남편"; opacity: 1; } 
 10% { opacity: 0; } 
 33% { content: "부모님"; opacity: 1; } 
 43% { opacity: 0; } 
 66% { content: "아들, 딸"; opacity: 1; } 
 76% { opacity: 0; } 
 100% { content: "아내, 남편"; opacity: 1; } 
 }
@keyframes changeText { 
 0% { content: "아내, 남편"; } 
 10% { opacity: 0; } 
 33% { content: "부모님"; opacity: 1; } 
 43% { opacity: 0; } 
 66% { content: "아들, 딸"; opacity: 1; } 
 76% { opacity: 0; } 
 100% { content: "아내, 남편"; opacity: 1; } 
 }
@-webkit-keyframes pulse { 
 0% { transform: translate(0, 0); } 
 50% { transform: translate(0, 10px); } 
 100% { transform: translate(0, 0); } 
 }
@keyframes pulse { 
 0% { transform: translate(0, 0); } 
 50% { transform: translate(0, 10px); } 
 100% { transform: translate(0, 0); } 
 }


.container .linksContainer{color:#ffffff;position:relative;width:100%;padding-bottom:100px;}
.container .linksContainer .link { width: 588px; height: calc(50px * var(--vh, 1vh)); margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 
.container .linksContainer .link p { font-size: 16px; line-height: 36px; } 
.container .linksContainer .link p.text { padding-bottom: 60px; } 
.container .linksContainer .link strong { font-weight: 700; font-size: 16px; line-height: 32px; } 
.container .linksContainer .link ul { padding-top: 40px; } 
.container .linksContainer .link ul li { padding-bottom: 20px; } 
.container .linksContainer .link ul li p { font-weight: 500; font-size: 16px; line-height: 32px; color: #AAAAAA; } 
.container .linksContainer .link ul li p a { color: #ffffff; text-decoration: underline; cursor: pointer; word-break: keep-all; transition: all 0.5s; } 
.container .linksContainer .link ul li p a:hover { color: #BBBBBB !important;  }