@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;900&family=Noto+Serif+TC:wght@500;900&display=swap";.logo[data-v-bee6da10]{position:relative;width:100%;max-width:180px;background-color:transparent;border-radius:100%}.logo .aspect-spacer[data-v-bee6da10]{padding-bottom:100%;width:100%}.logo .center[data-v-bee6da10]{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.logo .center .element[data-v-bee6da10]{position:absolute;transform:translateY(50px) rotate(-90deg) scale(0);width:0;transition:width .6s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),border-radius .8s ease}.logo .center .element[data-v-bee6da10]:nth-child(1){transition-delay:25ms}.logo .center .element[data-v-bee6da10]:nth-child(2){transition-delay:.05s}.logo .center .element[data-v-bee6da10]:nth-child(3){transition-delay:75ms}.logo .center .element[data-v-bee6da10]:nth-child(4){transition-delay:.1s}.logo .center .element[data-v-bee6da10]:nth-child(5){transition-delay:.125s}.logo .center .element[data-v-bee6da10]:nth-child(6){transition-delay:.15s}.logo .center .element[data-v-bee6da10]:nth-child(7){transition-delay:.175s}.logo .center .element[data-v-bee6da10]:nth-child(8){transition-delay:.2s}.logo .center .element[data-v-bee6da10]:nth-child(9){transition-delay:.225s}.logo .center .element[data-v-bee6da10]:nth-child(10){transition-delay:.25s}.logo .center .element[data-v-bee6da10]:nth-child(11){transition-delay:.275s}.logo .center .element[data-v-bee6da10]:nth-child(12){transition-delay:.3s}.logo .center .element[data-v-bee6da10]:nth-child(13){transition-delay:.325s}.logo .center.show .element[data-v-bee6da10]{transform:translate(0);border-radius:2px}.logo .center.show .element-01[data-v-bee6da10]{width:12.5%;height:56.25%;left:25%;top:-6.25%;background-color:#111;border-bottom-right-radius:0;border-bottom-left-radius:0;z-index:1}.logo .center.show .element-02[data-v-bee6da10]{width:25%;height:12.5%;left:25%;top:12.5%;background-color:#111}.logo .center.show .element-03[data-v-bee6da10]{width:12.5%;height:20%;left:0;top:12.5%;background-color:#111}.logo .center.show .element-04[data-v-bee6da10]{width:25%;height:25%;left:0;top:25%;background-color:#111;border-bottom-left-radius:75%;border-bottom-right-radius:0}.logo .center.show .element-04[data-v-bee6da10]:before{position:absolute;display:block;content:"";background-color:#fff;width:50%;height:50%;left:50%;bottom:50%;border-top:solid 2px white;box-sizing:content-box;border-bottom-left-radius:50%}.logo .center.show .element-04[data-v-bee6da10]:after{position:absolute;display:block;content:"";background-color:#111;width:50%;height:50%;right:-25%;top:50%;border-radius:100%}.logo .center.show .element-05[data-v-bee6da10]{width:12.5%;height:12.5%;left:37.5%;top:37.5%;background-color:#111;border-radius:0 2px 100% 0}.logo .center.show .element-05[data-v-bee6da10]:after{position:absolute;display:block;content:"";background-color:#111;width:100%;height:100%;left:-50%;top:0;border-radius:100%}.logo .center.show .element-06[data-v-bee6da10]{width:12.5%;height:37.5%;left:62.5%;top:-6.25%;background-color:#111;border-bottom-right-radius:0;border-bottom-left-radius:0;z-index:1}.logo .center.show .element-07[data-v-bee6da10]{width:37.5%;height:12.5%;left:62.5%;top:12.5%;background-color:#111}.logo .center.show .element-08[data-v-bee6da10]{width:25%;height:25%;left:62.5%;top:25%;background-color:#111;border-bottom-left-radius:75%;border-bottom-right-radius:0}.logo .center.show .element-08[data-v-bee6da10]:before{position:absolute;display:block;content:"";background-color:#fff;width:50%;height:50%;left:50%;bottom:50%;border-right:solid 2px white;box-sizing:content-box;border-bottom-left-radius:50%}.logo .center.show .element-08[data-v-bee6da10]:after{position:absolute;display:block;content:"";background-color:#111;width:50%;height:50%;right:-25%;top:50%;border-radius:100%}.logo .center.show .element-09[data-v-bee6da10]{width:18.75%;height:12.5%;left:81.25%;top:37.5%;background-color:#111}.logo .center.show .element-10[data-v-bee6da10]{width:12.5%;height:56.25%;left:50%;top:50%;background-color:#111}.logo .center.show .element-11[data-v-bee6da10]{width:87.5%;height:12.5%;left:12.5%;top:62.5%;background-color:#111;border-top-left-radius:0%;border-bottom-left-radius:0%}.logo .center.show .element-11[data-v-bee6da10]:after{box-sizing:content-box;border-right:solid 1px #111;position:absolute;display:block;content:"";background-color:#111;width:14.29%;height:100%;left:-14.29%;top:0%;border-bottom-left-radius:100%;border-top-left-radius:2px}.logo .center.show .element-12[data-v-bee6da10]{width:25%;height:12.5%;left:0%;top:87.5%;background-color:#111;border-top-right-radius:0%;border-bottom-right-radius:0%}.logo .center.show .element-12[data-v-bee6da10]:after{box-sizing:content-box;border-right:solid 1px #111;position:absolute;display:block;content:"";background-color:#111;width:50%;height:100%;right:-50%;top:0%;border-bottom-right-radius:100%;border-top-right-radius:2px}.logo .center.show .element-13[data-v-bee6da10]{width:12.5%;height:12.5%;left:87.5%;top:87.5%;background-color:#111;border-top-left-radius:0%;border-bottom-left-radius:0%}.logo .center.show .element-13[data-v-bee6da10]:after{box-sizing:content-box;border-right:solid 1px #111;position:absolute;display:block;content:"";background-color:#111;width:100%;height:100%;left:-100%;top:0%;border-bottom-left-radius:100%;border-top-left-radius:2px}.project-wrapper[data-v-cac43bff]{width:100%}.portfolio-container[data-v-f1728326]{position:relative;z-index:1}.background-canvas-wrap[data-v-f1b4ad53]{width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:0;pointer-events:none}canvas[data-v-f1b4ad53]{display:block;width:100%;height:100%}html,body{margin:0;padding:0;background-color:#fafafa;color:#111;font-family:Outfit,Noto Sans TC,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:#111;color:#fff}.portfolio-app{min-height:100vh;position:relative}*,*:before,*:after{box-sizing:border-box}html,body,div,span,object,iframe,figure,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,em,img,small,strike,strong,sub,sup,tt,b,u,i,ol,ul,li,fieldset,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,canvas,embed,footer,header,nav,section,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}footer,header,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}input{-webkit-appearance:none;border-radius:0}.content{position:relative;margin:auto;max-width:600px;padding:20px}@media all and (min-width:1200px){.content{max-width:50vw}}footer{font-size:.8em;background-color:#111;color:#eee}hr{margin:100px;border:solid 2px #eee}.cover-block{position:absolute;z-index:-1;transition:opacity 1.2s,width 1s,height 1s,border-radius 1s;width:0;height:0;opacity:0}.cover-block--1{background:#eee;top:0;left:0}.cover-block--2{background:#111;bottom:-10px;left:0}@media all and (min-width:1000px){.cover-block--2{bottom:-10vw}}.cover-block--3{background:#111;top:0;right:0}.cover-block--4{background:#eee;bottom:0;right:0}.show .cover-block{opacity:1}.show .cover-block--1{min-width:100px;width:25vw;height:12.5vh;transition-delay:.2s}.show .cover-block--2{width:10px;height:40vh;border-top-right-radius:100px;border-bottom-right-radius:100px}@media all and (min-width:600px){.show .cover-block--2{width:20px}}@media all and (min-width:1000px){.show .cover-block--2{width:10vw;min-height:20vw;border-top-right-radius:12.5vw;border-bottom-right-radius:12.5vw}}.show .cover-block--2{transition-delay:.3s}.show .cover-block--3{width:10px;height:10px;border-bottom-left-radius:100px}@media all and (min-height:300px){.show .cover-block--3{width:100px;height:30vh}}@media all and (min-width:500px){.show .cover-block--3{width:20vw;border-bottom-left-radius:20vw}}.show .cover-block--3{transition-delay:.4s}.show .cover-block--4{width:10px;height:10px}@media all and (min-height:300px){.show .cover-block--4{height:20vh}}@media all and (min-width:400px){.show .cover-block--4{width:100px;height:20vh}}.show .cover-block--4{transition-delay:.5s}.cover-menu{pointer-events:none}@media all and (min-width:400px){.cover-menu{position:absolute;bottom:0;width:100%;height:30vh;min-height:330px}}.cover-menu--content{position:relative;left:100%;transform:translate(-100%);display:inline-block;right:20px}.cover-menu--item{pointer-events:initial;padding:10px;transition:transform .1s;cursor:pointer}.cover-menu--item:hover{transform:translate(10px)}.cover-menu{overflow:hidden}.cover-menu--arrow{position:relative;height:40px;width:40px;background:#000;border-radius:40px}.cover-menu--arrow:before{position:absolute;display:block;width:20px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;content:""}.cover-menu--arrow:after{position:absolute;display:block;width:16px;height:16px;border-top:solid 2px white;border-right:solid 2px white;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);content:""}.cover-menu--arrow-down{transform:rotate(90deg)}.cover-menu--arrow-left{transform:rotate(180deg)}.cover-contact{position:fixed;width:100vw;height:100vh;top:0%;z-index:1;overflow:hidden;pointer-events:none}.cover-contact.showContact .contact-table--item{width:100%}.cover-contact .contact-table{position:absolute;font-size:1.5em}@media all and (min-height:0)and (max-height:300px){.cover-contact .contact-table{font-size:.75em}}.cover-contact .contact-table{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}.cover-contact .contact-table--item:nth-child(1){transition-delay:.04s}.cover-contact .contact-table--item:nth-child(2){transition-delay:.08s}.cover-contact .contact-table--item:nth-child(3){transition-delay:.12s}.cover-contact .contact-table--item:nth-child(4){transition-delay:.16s}.cover-contact .contact-table--item:nth-child(5){transition-delay:.2s}.cover-contact .contact-table--item:nth-child(6){transition-delay:.24s}.cover-contact .contact-table--item{pointer-events:initial}.cover-contact .contact-table--item:before,.cover-contact .contact-table--item:after{flex-grow:1;content:"";display:block;width:100%}.cover-contact .contact-table--item{cursor:pointer;width:0;overflow:hidden;height:16.666%;flex-shrink:0;flex-grow:0;background-color:#fff;transition:width .5s;display:flex;flex-direction:column;justify-content:center;align-items:center}.cover-contact .contact-table--item .contact-title{flex-grow:0;flex-shrink:0;font-weight:900;overflow:hidden;font-size:.95em}.cover-contact .contact-table--item .contact-desc{flex-grow:0;flex-shrink:0;height:0px;overflow:hidden;transition:height .2s}.cover-contact .contact-table--item:hover .contact-desc{height:40%}.cover{min-height:100vh;position:relative;margin-bottom:100px}.cover-desc{margin-top:20px;max-width:340px}.cover-menu--item{opacity:0;transform:translateY(20px);transition:opacity 1s,transform 1s}.cover-menu--item:nth-child(1){transition-delay:.7s}.cover-menu--item:nth-child(2){transition-delay:.9s}.cover-menu--item:nth-child(3){transition-delay:1.1s}.cover-menu--item:nth-child(4){transition-delay:1.3s}.cover-menu--item:nth-child(5){transition-delay:1.5s}.cover-menu{transition-delay:1s}.cover-logo{width:200px}@media all and (min-width:0)and (max-width:600px){.cover-logo{width:100px}}@media all and (min-height:0)and (max-height:600px){.cover-logo{width:100px}}@media all and (min-width:0)and (max-width:300px){.cover-logo{width:60px}}@media all and (min-height:0)and (max-height:300px){.cover-logo{width:60px}}@media all and (min-height:300px){.cover{padding-top:100px}}@media all and (min-height:600px){.cover{padding-top:150px}}@media all and (min-height:1000px){.cover{padding-top:20vh}}.show .cover-menu--item{opacity:1;transform:initial}.project{min-height:100vh}.project img{width:100%;height:auto;transition:all .5s}.project-fields{border:solid 1px #111;border-radius:10px}.project-field{font-size:.75em;display:inline-block;color:#000;padding:6px 8px;margin:5px;border-radius:10px}.project-field:hover{color:#000;background-color:#eee}.project-table{margin:0 -10px}.project-table_container{display:flex;flex-wrap:wrap}.project-item{cursor:pointer;width:100%}.project-item_image{overflow:hidden}.project-item:hover img{transform:scale(1.1)}@media all and (min-width:600px){.project-item{width:50%}}@media all and (min-width:1600px){.project-item{width:33.33%}}@media all and (min-width:2400px){.project-item{width:25%}}.project-item{padding:10px;margin:10px 0}.project-item_fields{margin:-3px}.project-item_field{font-size:.5em;display:inline-block;background-color:#111;color:#eee;padding:3px 5px;margin:0 3px;border-radius:10px}.project-item_time{font-size:.5em;margin:2px 0 -5px}.text-animate-line{display:inline-block;position:relative;overflow:hidden}.text-animate-wrap{position:relative}.text-animate-item1{color:transparent}.text-animate-item1::selection{background:transparent;color:transparent}.text-animate-item2{transition:transform .5s ease-out;display:inline-block;position:absolute;left:0;top:0;transform:translateY(100%);pointer-events:none}.text-animate::selection,.text-animate *::selection{background:#000;color:#fff}.show .text-animate-item2{transform:translate(0)}body{font-family:Noto Sans TC,微軟正黑體,PingFang,sans-serif;font-weight:100;font-size:16px;line-height:1.2}@media all and (min-width:600px){body{font-size:20px}}body{scroll-behavior:smooth}*::selection{background:#000;color:#fff}h1{font-size:2em;font-weight:900;margin:5px 0}h2{font-size:1em;font-weight:500;margin:5px 0}p{font-weight:300;line-height:1.5}strong{font-weight:500}a{color:#000;font-weight:500;text-decoration:none}footer a{color:#fff}