#dialog-options,.modal-container .gallery{-webkit-box-orient:vertical;-webkit-box-direction:normal}::-webkit-scrollbar{width:7px;margin-left:-7px;height:0}::-webkit-scrollbar-track{background:rgba(0,0,0,.5)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5)}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes reveal{from{bottom:0}to{bottom:-200%}}@keyframes reveal{from{bottom:0}to{bottom:-200%}}body{margin:0;padding:0;font-family:Arial,sans-serif;font-size:18px;line-height:1.6;background-color:#fff;color:#333}#dialog-container{width:600px;max-width:100%;margin:auto;padding:20px;-webkit-transition:.3s linear;-o-transition:.3s linear;transition:.3s linear;position:absolute;left:0;right:0;top:50vh;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);overflow:hidden}body.portfolio-mode #dialog-container{top:0;width:1000px;-webkit-transform:none;-ms-transform:none;transform:none;position:relative;padding:40px 20px;text-align:center}body.focus-portfolio #dialog-container{height:0!important;padding:0 20px}#dialog{margin:0 0 50px}body.portfolio-mode #dialog{margin:0 0 20px}#dialog span{-webkit-transition:opacity .75s linear;-o-transition:opacity .75s linear;transition:opacity .75s linear}#dialog-options{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}body.portfolio-mode #dialog-options{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}a[style*="opacity: 0"]{pointer-events:none}#dialog-options a{padding:10px 0 0;border-radius:5px;border:none;cursor:pointer;-webkit-transition:.75s linear;-o-transition:.75s linear;transition:.75s linear;color:inherit;text-decoration:none;background:#f8f8f8;opacity:0}#dialog-options:hover a{opacity:.5}#dialog-options:hover a:hover{opacity:1;background:#fff1fc;color:#721f4d}#dialog-options a::after,#dialog-options a::before{color:#bbb;width:25px;display:inline-block;font-weight:700;margin-bottom:10px}#dialog-options a::before{content:"《";float:left}#dialog-options a::after{content:"》";text-align:right}#dialog-options a:hover::after,#dialog-options a:hover::before{color:#721f4d}#portfolio-container{display:none}body.portfolio-mode #portfolio-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:.5s ease-out 2s both fadeIn;animation:.5s ease-out 2s both fadeIn;margin:0 100px 100px}.portfolio-item{display:block;width:25%;height:calc(.2 * (100vw - 200px));position:relative;overflow:hidden;-webkit-transition:.5s ease-out;-o-transition:.5s ease-out;transition:.5s ease-out;opacity:0}.portfolio-item img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.modal-container{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-animation:.5s ease-out fadeIn;animation:.5s ease-out fadeIn;top:0;left:0;z-index:1000;background:#fff;padding:100px 100px 50px;bottom:0;right:0;overflow-y:auto}.modal-container .gallery{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:sticky;top:0}.modal-container .gallery img{height:auto;max-height:calc(100vh - 295px);max-width:100%;margin:0 auto}.portfolio-description{width:50%;padding:15px 50px 50px 0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;max-height:100%}.modal-container .close-button{color:#555;position:fixed;right:100px;top:100px;text-decoration:none;font-size:42px;line-height:25px;padding:10px;-webkit-animation:.5s ease-out 1s both fadeIn;animation:.5s ease-out 1s both fadeIn;z-index:99;cursor:pointer}.portfolio-description .text-content{max-width:600px;margin:auto;text-align:justify;position:relative;overflow:hidden;padding-bottom:50px}.portfolio-description.story .text-content p{text-indent:2em}.portfolio-description .text-content h2{font-size:1.8em;margin:0;font-weight:400}.portfolio-description.story .text-content h2{text-align:center}.portfolio-description.story .text-content h3{text-align:center;font-size:1em;margin:0 0 20px;font-weight:400;color:#999}.portfolio-description .text-content>em{color:#888}.portfolio-description .text-content p{margin:10px 0;font-size:1em}.portfolio-description .text-content audio{display:block;width:100%;margin:10px 0}.portfolio-description .text-content::after{content:'';position:absolute;left:0;width:100%;height:200%;background:-webkit-gradient(linear,left bottom,left top,color-stop(50%,#fffffffc),to(#ffffff00));background:-o-linear-gradient(bottom,#fffffffc 50%,#ffffff00);background:linear-gradient(0deg,#fffffffc 50%,#ffffff00);-webkit-animation:1s ease-out 1s both reveal;animation:1s ease-out 1s both reveal}.portfolio-description .text-content.change::after{-webkit-animation-delay:0s;animation-delay:0s}.gallery-thumbnails{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;margin:15px 0;-ms-flex-wrap:wrap;flex-wrap:wrap}.modal-container .gallery .thumbnail{width:150px;height:100px;-o-object-fit:cover;object-fit:cover;cursor:pointer;margin:10px}@media (max-width:1000px){#dialog-container,.modal-container,body.portfolio-mode #dialog-options{-webkit-box-orient:vertical;-webkit-box-direction:normal}#dialog-container,.gallery-thumbs{display:-webkit-box;display:-ms-flexbox}#dialog-container{height:auto!important;top:0;-webkit-transform:none;-ms-transform:none;transform:none;padding:50px 20px;-webkit-box-sizing:border-box;box-sizing:border-box;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100vh}body.portfolio-mode #dialog-container{min-height:0;text-align:left}body.portfolio-mode #dialog-options{-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}body.portfolio-mode #portfolio-container{margin:0 20px 20px}body.portfolio-mode .portfolio-item{width:100%;height:90vw;margin-bottom:10px}.modal-container{padding:50px 20px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.modal-container .gallery{width:100%;position:relative}.modal-container .portfolio-description{width:100%;padding:15px 0}.modal-container .close-button{right:5px;top:5px}.gallery-thumbs{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 -10px;position:relative;width:calc(100% + 10px)}.modal-container .gallery .thumbnail{width:23%;height:20vw;margin:10px 3px}.portfolio-description.story .text-content p{text-indent:1em}}