html,body { width: 100%; height: initial; padding: 0; margin: 0; } 
body { overflow-x: hidden; } 
#wrap,.container { position: relative; } 
#wrap { position: relative; background-color: #000000; color: #ffffff; } 
.chapterContainer { padding-top: 70px; } 
.loading { position:fixed; width:100%; height:calc(var(--outervh, 1vh) * 100); display:flex; align-items: center; justify-content: center; background-color: black; z-index:100; font-size: 24px; } 
.page01-scene { position: relative; } 
.page01-scene .imageWrapper { padding-top: 5rem; } 
.page01-scene .page01-canvas-parent { width: 100%; height: calc(var(--outervh, 1vh) * 100); position: -webkit-sticky; position: sticky; top: 0; z-index: 0; } 
.page01-scene .page01-canvas-parent canvas { opacity: 0; } 
.page01-scene .page01-scroller { --text-box-height: 110vh; --text-box-num: 5; top: 0; width: 100%; height: calc(var(--text-box-height, 110vh) * var(--text-box-num, 5)); z-index: 2; } 
.page01-scene .page01-scroller .text-box { width: 80%; margin: 0 auto; min-height: var(--text-box-height); padding: 20px; font-size: 16px; position: relative; } 
.page01-scene .page01-scroller .text-box p { width: 33%; height: auto; padding: 10px; text-align: left; float: left; margin-top: calc(var(--outervh, 1vh) * 30); background-color: rgba(0, 0, 0, 0.8); font-size: 17px; line-height: 30px; } 
.videoWrapper { margin: 0 auto; position: relative; width: 100%; max-width: 600px; padding-top: 3rem; padding-bottom: 3rem; } 
.videoWrapper video { width: 100%; height: auto; } 
.descWrapper { position: relative; margin: 0 auto; width: 100%; max-width: 36.75rem; padding-top: 3rem; padding-bottom: 3rem; box-sizing: border-box; } 
.descWrapper .desc { width: 100%; margin-bottom: 2rem; color: white; font-size: 1rem; line-height: 1.75rem; } 
.descWrapper .desc:last-child { margin-bottom: 0rem; } 
.imageWrapper { margin: 0 auto; width: 100%; max-width: 36.75rem; } 
.imageWrapper figure { width: 100%; padding: 0; margin: 0; } 
.imageWrapper figcaption { opacity: 0.4; margin-top: 8px; text-align: center; } 
.imageWrapper img { width: 100%; height: auto; } 
.page02 { position: relative; --text-box-height: 110vh; --text-box-num: 8; } 
.page02 .text-container { position: absolute; top: 0; width: 100%; } 
.page02 .text-container .text-box { width: 33%; height: var(--text-box-height, 110vh); padding: 20px; font-size: 16px; position: relative; padding-top: 300px; margin-left: 15%; box-sizing: border-box; } 
.page02 .text-container .text-box.desc { width: 80%; } 
.page02 .text-container .text-box.desc p { position: absolute; bottom: 20px; left: 20px;width: 33%; height: auto; padding: 10px; text-align: left; float: left; background-color: rgba(0, 0, 0, 0.8); line-height: 30px; } 
.page02 .text-container .text-box > div { position: absolute; bottom: 20px; left: 20px; background-color: #000000cc; padding: 1rem; padding-top: 0rem; box-sizing: border-box; } 
.page02 .text-container .text-box .date { font-weight: 700; font-size: 16px; background-color: #191919; padding: 4px 8px; display: inline-block; margin-bottom: 15px; } 
.page02 .text-container .text-box .date .highlight { color: #00ffff; } 
.page02 .text-container .text-box .desc { padding-left: 4px; margin: 0 !important; } 
.page02 .text-container .text-box p strong { display: block; } 
.page02 .video-container { width: 100%; height: calc(var(--text-box-height, 110vh) * var(--text-box-num, 8)); position: relative; } 
.page02 .video-container .videoWrapper { position: sticky; top: 0; width: 100%; height: 100vh; max-width: 1200px; background-color: #000; color: white; } 
.page02 .video-container .videoWrapper video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 100%; } 
.page02 .video-container .videoWrapper canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } 

@media all and (max-width: 720px){
.loading { font-size: 17px; } 
.page02 { --text-box-height: 1000px; } 
.page01-scene .page01-scroller { --text-box-height: 1000px; } 
.page01-scene .page01-scroller .text-box { z-index:99999; } 
.page01-scene .page01-scroller .text-box p { width: 80%; margin: 0 auto; float: initial; z-index:99999; } 
.page02 .video-container #v0 { width: 100%; height: calc(var(--outervh, 1vh) * 60); } 
.page02 .text-container .text-box.desc { margin: 0 auto; padding: 0; box-sizing: border-box; } 
.page02 .text-container .text-box.desc p { width: 100%; left: 0; box-sizing: border-box; } 
.page02 .text-container .text-box { width: 80%; box-sizing: border-box; margin-left: 0 auto; z-index:9999}
.page02 .text-container .text-box .desc { margin: 0; width: 100%; word-break:keep-all; } 
.page02 .text-container .text-box p{width:initial;}
.page02 .text-container .text-box > div { width:90%; padding-top: 1rem; } 
.page02 .text-container .text-box .date { background-color: initial; } 
.page02 .text-container .text-box { margin-left: 0; margin: 0 auto; } 
}

@media all and (max-width: 36.75rem){
.descWrapper,.imageWrapper { padding: 1.4rem; box-sizing: border-box; } 
}