@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}.openning{height:90%;padding:0 20px}.openning-container{height:70%;text-align:center}.date,.openning-container{position:relative;z-index:-1}.date{align-items:center;color:#313131;display:flex;font-family:Arsenal,sans-serif;font-size:30px;font-weight:300;height:10%;justify-content:center;letter-spacing:.02rem;transition:.5s ease}.date-text{background-color:#eaeaea;left:50%;opacity:0;position:absolute;transform:translateX(-50%)}.date-text:first-child{animation:none!important;font-family:Noto Sans TC;font-size:16px;font-weight:400;left:auto;letter-spacing:.3rem;opacity:1;position:relative;transform:none}.date-text:first-child.play{animation:fadeInSlow 1s forwards}@media (max-width:768px){.date-text:first-child{font-size:14px}}.date-text.play{animation:fadeInSlow 1s forwards}@media (max-width:768px){.date{font-size:22px;transform:translateY(calc(17vh - 17vw - 20%))}}.slide{height:100%;left:50%;object-fit:contain;opacity:0;position:absolute;top:0;transform:translateX(-50%);width:100%}.slide-wrapper{display:inline-block;height:100%;position:relative}.slide:first-child{animation:none!important;left:auto;opacity:1;position:relative;transform:none}.slide:nth-child(2){animation-delay:0s!important}.slide:nth-child(2).play{animation:fadeInSlow 2s forwards}.slide.play{animation:fadeInSlow 1s forwards}.paper{height:100.1%;left:50%;object-fit:contain;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateX(-50%);width:100%}@media (max-width:768px){.paper{height:100vh;margin-top:-19vh;object-fit:cover}}.paper-wrapper{display:inline-block;height:100%;left:50%;position:absolute;transform:translateX(-50%);width:100%}@media (max-width:768px){.paper-wrapper{margin-left:-20px;width:calc(100% + 80px)}}.paper:first-child{animation:none!important;left:auto;position:relative;transform:none}.paper:last-child.play{animation:fadeInSlow .1s step-start forwards}.paper.play{animation:fadeInSlow .1s step-start}.paper-text{-webkit-mask-image:linear-gradient(90deg,#000,#000 33.3%,#0000 66.7%,#0000);mask-image:linear-gradient(90deg,#000,#000 33.3%,#0000 66.7%,#0000);mask-mode:alpha;-webkit-mask-position:100% 50%;mask-position:100% 50%;-webkit-mask-size:300% 100%;mask-size:300% 100%;position:absolute;transform:translateX(0) translateY(-50%);transition-delay:0s}.paper-text.up{height:18%;right:calc(50% + 7vh);top:50%;transition:2s}.paper-text.up.active{transition-delay:2s}@media (max-width:768px){.paper-text.up{display:none}}.paper-text.down{height:16.5%;left:calc(50% - 5vh);top:50%;transform-origin:0 50%;transition:3s}.paper-text.down.active{transition-delay:2.5s}@media (max-width:768px){.paper-text.down{display:none}}.paper-text.mobile{display:none;height:110%;left:8%;-webkit-mask-image:linear-gradient(180deg,#000,#000 33.3%,#0000 66.7%,#0000);mask-image:linear-gradient(180deg,#000,#000 33.3%,#0000 66.7%,#0000);-webkit-mask-position:50% 100%;mask-position:50% 100%;-webkit-mask-size:100% 300%;mask-size:100% 300%;top:40%;transition:4s;transition-delay:0s;width:auto}.paper-text.mobile.active{-webkit-mask-position:50% 0;mask-position:50% 0;transition-delay:1.5s}@media (max-width:768px){.paper-text.mobile{display:block}}.paper-text.active{-webkit-mask-position:0 50%;mask-position:0 50%}.intro{align-items:center;color:#313131;display:inline-flex;flex-direction:column;font-size:20px;height:100%;justify-content:center;left:50%;letter-spacing:.1em;letter-spacing:.15em;line-height:2.2;-webkit-mask-image:linear-gradient(90deg,#000,#000 33.3%,#0000 66.7%,#0000);mask-image:linear-gradient(90deg,#000,#000 33.3%,#0000 66.7%,#0000);mask-mode:alpha;-webkit-mask-position:100% 50%;mask-position:100% 50%;-webkit-mask-size:300% 100%;mask-size:300% 100%;padding:0 30px;position:absolute;text-align:justify;transform:translateX(-50%);transition:7s .6s;width:100%}@media (max-width:768px){.intro{font-size:16px;transition:4s 1.5s}}.intro-wrapper{max-width:450px;padding:7%}.intro.active{-webkit-mask-position:0 50%;mask-position:0 50%}.quote-image{box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:10%;width:100%}@media (max-width:768px){.quote-image{flex-direction:column;justify-content:flex-start;padding:5% 7% 7%}}.quote-photo{height:100%;left:10%;pointer-events:none;top:10%}@media (max-width:768px){.quote-photo{height:auto;max-width:500px;width:100%}}.quote-sign{bottom:calc(10vh - 10px);position:absolute;right:calc(10% + 90px);width:100px}@media (max-width:768px){.quote-sign{bottom:0;left:7%;right:auto;transform:translateY(calc(100% + 10px))}}@media (max-width:380px){.quote-sign{width:80px}}.quote-credit{background:#111;color:#666;color:#fff;font-size:12px;font-weight:900;letter-spacing:.1rem;padding:.05rem .2rem .1rem;position:absolute}.quote-caption{color:#767575;font-size:16px;letter-spacing:.1em;line-height:2.2;margin-left:20px;margin-top:-.5rem;max-width:220px;text-align:left;width:100%}@media (max-width:768px){.quote-caption{font-size:14px;letter-spacing:.1rem;line-height:1.8;margin-left:0;margin-top:.5rem;max-width:none;max-width:500px}}@media (max-width:380px){.quote-caption{font-size:12px}}.quote-author{bottom:10vh;color:#313131;font-weight:800;position:absolute;right:10%}.quote-author img{margin-right:2px;width:20px}@media (max-width:768px){.quote-author{bottom:0;left:7%;right:auto}}@media (max-width:380px){.quote-author{bottom:-.5rem;font-size:14px}}.quote-title{font-size:50px;font-weight:900;line-height:1}@media (max-width:768px){.quote-title{font-size:38px;margin-bottom:1.5rem}}@media (max-width:380px){.quote-title{font-size:32px}}.quote-content{box-sizing:border-box;color:#313131;font-weight:400;left:0;letter-spacing:.15em;opacity:0;padding:10%;position:absolute;text-align:left;top:0;width:100%}@media (max-width:768px){.quote-content{padding:5% 7% 7%}}.quote-content p{font-size:20px;line-height:2;width:65%}@media (max-width:768px){.quote-content p{font-size:16px;width:100%}}@media (max-width:380px){.quote-content p{font-size:15px}}.quote-content h2{margin-top:0}.deleted,.msg,.photo{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.deleted,.photo{opacity:1;width:100%}.deleted.play,.photo.play{animation:fadeInOut 3s forwards}.page-container.dark{background-color:#2e2e2e}.deleted{overflow:hidden}.msg{width:calc(100% - 80px)}.msg-wrapper{display:flex;flex-direction:column;transition:.4s linear 0s}.msg-wrapper:not(:first-child){margin-top:40px}.msg-wrapper:not(:last-child){opacity:0;transition:.4s linear 0s}.msg.active .msg-wrapper:not(:last-child){opacity:1;transition:.4s linear 3.5s}.msg.active .msg-wrapper .msg-indicator{animation:typing 12s;animation-delay:6s}.msg-time{margin-bottom:16px}.msg-mark,.msg-time{color:#aaa;font-size:15px;font-weight:900;letter-spacing:.05em;line-height:20px}.msg-mark{align-self:flex-end;margin-right:18px;margin-top:8px}.msg-text{align-self:flex-end;background-color:#b4d9d9;border-radius:20px;display:inline-block;font-size:20px;font-weight:700;letter-spacing:.2em;line-height:27px;padding:15px 30px;text-align:left}@media (max-width:768px){.msg-text{font-size:16px;padding:10px 20px}}.msg-indicator{background-color:#e6e7ed;border-radius:20px;display:table;margin:0 auto 0 0;padding:21px 30px;position:relative;transform:scale(0);transform-origin:0 100%;width:auto}@media (max-width:768px){.msg-indicator{font-size:16px;padding:16px 20px}}.msg-indicator span{background-color:#9e9ea1;border-radius:50%;display:block;float:left;height:15px;margin:0 1px;opacity:.4;width:15px}.msg-indicator span:first-of-type{animation:blink 1s .3333s infinite}.msg-indicator span:nth-of-type(2){animation:blink 1s .6666s infinite}.msg-indicator span:nth-of-type(3){animation:blink 1s .9999s infinite}.msg.play{animation:fadeOut 3s forwards}@keyframes typing{0%{opacity:0;transform:scaleY(0)}2%{opacity:1;transform:scale(1)}25%{opacity:1;transform:scale(1)}27%{opacity:0;transform:scale(0)}50%{opacity:0;transform:scale(0)}52%{opacity:1;transform:scale(1)}98%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.deleted-wrapper{align-items:center;display:flex;justify-content:center;opacity:0;transform:translateX(200px);transition:.5s}.deleted-wrapper:first-child{transition:.5s ease-in 0s}.deleted-wrapper:nth-child(2){transition:.5s ease-in .4s}.deleted-wrapper:nth-child(3){transition:.5s ease-in .8s}.deleted-wrapper:nth-child(4){transition:.5s ease-in 1.2s}.deleted-wrapper:nth-child(5){transition:.5s ease-in 1.6s}.deleted-wrapper:not(:last-child){margin-bottom:20px}.deleted.active .deleted-wrapper{opacity:1;transform:translateX(0);transition:opacity .5s linear 1s}.deleted-text{text-align:left}.deleted-title{color:#fff;font-size:16px;font-weight:700}@media (max-width:768px){.deleted-title{font-size:15px}}.deleted-body{color:#9e9ea1;font-size:14px;margin-top:2px}@media (max-width:768px){.deleted-body{font-size:13px}}.deleted img{margin-right:10px;width:60px}@media (max-width:768px){.deleted img{width:45px}}.photo{align-items:center;display:flex;justify-content:center}.photo,.photo-bg{height:100%;width:100%}.photo-bg{background-color:#f3f3f3;border-radius:10px;position:absolute;transition:1s ease 1s;z-index:-1}@media (max-width:768px){.photo-bg{border-radius:0;height:100vh;transform:translateY(4vh);width:100vw}}.photo svg{max-width:700px;width:100%}.photo path:first-child,.photo path:not(:first-child){transition:opacity 1s ease 1s}.photo.active .photo-bg{background-color:#2e2e2e;transition:5s ease-in 2s}.photo.active path:not(:first-child){opacity:0;transition:opacity 3s ease 4s}.photo.active path:first-child{opacity:0;transition:opacity 3s ease 8s}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}@keyframes blink{50%{opacity:1}}@keyframes bulge{50%{transform:scale(1.05)}}html{background-color:#eaeaea}#root,.App,body,html{height:100%}.App{font-family:Noto Sans TC,sans-serif;overflow:hidden;position:relative;text-align:center}.mask{height:100%;width:100%}.mask.play{animation:fadeInSlow 5s forwards}@keyframes fadeInSlow{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}1%{opacity:1}to{opacity:1}}.page-outWrapper{box-sizing:border-box;height:90%;padding:0 20px;position:absolute;top:10%;width:100%}.page-container{background-color:#f3f3f3;border-radius:10px;box-sizing:border-box;height:80%;margin:0 auto;max-width:900px;position:relative;width:100%}@media (max-width:768px){.page-container{background-color:initial}}.next{background-color:initial;border:none;height:20%;position:relative;width:64px;z-index:1}.next svg{fill:#04a9a9;width:100%}.next span{color:#04a9a9;font-size:15px;font-weight:900;letter-spacing:.2rem;white-space:nowrap}@media (max-width:768px){.next span{font-size:12px}}.next:disabled svg{fill:#b5b5b5}.next:disabled span{color:#b5b5b5}.next:hover{cursor:pointer}.next:disabled{cursor:auto}@media (max-width:768px){.next{display:block;margin-left:auto}}@keyframes pageFadeIn{0%{opacity:0}to{opacity:1}}.page-outWrapper{opacity:1}.openning.fade-in,.page-outWrapper.fade-in{opacity:1;transition:opacity 2s ease .5s}.openning.fade-out,.page-outWrapper.fade-out{opacity:0;transition:opacity 1s ease 0s}.quote-content.fade-in{opacity:1;transition:opacity 1s ease}.quote-content.fade-out{transition:opacity 1s ease 0s}.quote-image.fade-out{opacity:0;transition:opacity 1s ease}.quote-image.fade-in{transition:opacity 1s ease 1s}@keyframes pageFadeOut{0%{opacity:1}to{opacity:0}}.progress{align-items:center;box-sizing:border-box;display:flex;height:10%;justify-content:center;padding:0 calc(7% + 20px);position:relative;text-align:center;width:100%;z-index:1}.horizontal-slider{max-width:450px;width:100%}.horizontal-slider .example-thumb{background-color:#04a9a9;border-radius:50%;height:22px;line-height:20px;top:-10px;width:22px}.horizontal-slider .example-thumb:before{content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%}.horizontal-slider .example-thumb:focus{outline:3px solid #f3f3f3}.horizontal-slider .example-thumb:hover{cursor:pointer}.horizontal-slider .example-track{height:22px;position:relative;top:-10px}.horizontal-slider .example-track:before{content:"";height:2px;left:0;position:absolute;top:10px;width:100%}.horizontal-slider .example-track.example-track-0:before{background-color:#04a9a9}.horizontal-slider .example-track.example-track-1:before{background-color:#b5b5b5}.loading{animation:pageFadeOut .8s 1s forwards;background-color:#eaeaea;pointer-events:none;position:absolute;top:0;z-index:2}.credit,.loading{height:100%;width:100%}.credit{align-items:center;display:flex;flex-direction:column;justify-content:center}.credit-wrapper{color:#313131;font-size:14px;letter-spacing:.1rem;margin-top:1rem;text-align:left}.credit-wrapper ul{list-style:none;padding-left:0}.credit-wrapper li{margin-bottom:1rem}.credit-wrapper li:last-child{color:#767575;font-size:13px;letter-spacing:.2rem}.credit-wrapper strong{display:inline-block;font-weight:700}.credit-donate{color:#767575;font-size:13px;letter-spacing:.1rem;margin-top:.5rem}@media (max-width:768px){.credit-donate{font-size:12px;padding:0 7%}}.credit-link{border-bottom:1.5px solid #04a9a9;color:#04a9a9;font-size:13px;font-weight:900;padding-bottom:2px;text-decoration:none}@media (max-width:768px){.credit-link{font-size:12px}}.credit-footer{align-items:center;bottom:2rem;display:flex;flex-direction:column;height:10%;justify-content:center;left:50%;position:fixed;transform:translateX(-50%);width:100%;z-index:10}@media (max-width:768px){.credit-footer{bottom:8vh}.credit{transform:translateY(-5vh)}}.logo{color:#404040;width:110px}.logo svg{fill:#404040;width:100%}
/*# sourceMappingURL=main.de910b30.css.map*/