.matrix-box{--scale: 1;--z: 0;position:relative;width:var(--size);height:var(--size);font-size:var(--size)}.matrix-box:hover{--scale: 1;z-index:1}.matrix-box:active{--z: -5rem}.matrix-box:before{content:"";display:block;padding-bottom:100%}.matrix-box__ceil{position:absolute;width:.1em;height:.1em}.matrix-box__ceil.x-0{right:100%;bottom:0%}.matrix-box__ceil.x-0:hover{--x: 0}.matrix-box__ceil.x-1{right:100%;bottom:0%}.matrix-box__ceil.x-1:hover{--x: 1}.matrix-box__ceil.x-2{right:100%;bottom:0%}.matrix-box__ceil.x-2:hover{--x: 2}.matrix-box__ceil.x-3{right:100%;bottom:0%}.matrix-box__ceil.x-3:hover{--x: 3}.matrix-box__ceil.x-4{right:100%;bottom:0%}.matrix-box__ceil.x-4:hover{--x: 4}.matrix-box__ceil.x-5{right:100%;bottom:0%}.matrix-box__ceil.x-5:hover{--x: 5}.matrix-box__ceil.x-6{right:100%;bottom:0%}.matrix-box__ceil.x-6:hover{--x: 6}.matrix-box__ceil.x-7{right:100%;bottom:0%}.matrix-box__ceil.x-7:hover{--x: 7}.matrix-box__ceil.x-8{right:100%;bottom:0%}.matrix-box__ceil.x-8:hover{--x: 8}.matrix-box__ceil.x-9{right:-900%;bottom:100%}.matrix-box__ceil.x-9:hover{--x: 9}.matrix-box__ceil.x-10{right:100%;bottom:0%}.matrix-box__ceil.x-10:hover{--x: 10}.matrix-box__ceil.y-0:hover{--y: 0}.matrix-box__ceil.y-1:hover{--y: 1}.matrix-box__ceil.y-2:hover{--y: 2}.matrix-box__ceil.y-3:hover{--y: 3}.matrix-box__ceil.y-4:hover{--y: 4}.matrix-box__ceil.y-5:hover{--y: 5}.matrix-box__ceil.y-6:hover{--y: 6}.matrix-box__ceil.y-7:hover{--y: 7}.matrix-box__ceil.y-8:hover{--y: 8}.matrix-box__ceil.y-9:hover{--y: 9}.matrix-box__ceil.y-10:hover{--y: 10}.matrix-box__ceil.x-9.y-9{bottom:0;right:0}.matrix-box__center{width:.1em;height:.1em;position:absolute;top:450%;left:450%;transition:transform .1s linear .01s;pointer-events:none;transform-style:preserve-3d;transform-origin:.05em .05em 0;transform:perspective(calc(var(--size) * 2)) translateZ(var(--z)) rotateX(calc(7deg * (5 - var(--y)))) rotateY(calc(7deg * (var(--x) - 5))) scale(var(--scale))}.matrix-box__center>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading{position:fixed;top:0;bottom:0;right:0;left:0;display:flex;align-items:center;justify-content:center;background:#e5e5e5;z-index:9999}.loading__main{width:500px;height:500px;max-width:100%}.loading__box{width:200px;height:200px;position:absolute;top:50%;left:50%;font-size:12px;transform:translate(-50%,-50%);transform-style:preserve-3d;transform-origin:0 0 0}.loading__box-face{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:200px;height:200px;background-color:#fff7;border:1px solid;box-sizing:border-box;transform-origin:0 0 0}.loading__box-face.-face-1{transform:rotateY(90deg) translate3d(-100px,0,200px);--rotate: 180deg}.loading__box-face.-face-2{transform:rotateY(90deg) translate(-100px);--rotate: 180deg}.loading__box-face.-face-3{transform:rotate(90deg) translate3d(0,-200px,100px);--rotate: 90deg}.loading__box-face.-face-4{transform:rotate(90deg) translate3d(0,-200px,-100px);--rotate: 90deg}.loading__box-face.-face-5{transform:rotateX(90deg) translateY(-100px)}.loading__box-face.-face-5:before{display:none!important}.loading__box-face.-face-6{transform:rotateX(90deg) translate3d(0,-100px,-200px)}.loading__box-face.-face-6:before{transform:none!important}.loading__box-face:before{content:"";position:absolute;top:0;left:0;display:block;padding-bottom:100%;width:100%;background:#000000;transform:rotate(var(--rotate)) translateY(calc(var(--progress) - 100%))}.header{position:fixed;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;z-index:100}.header__logo{position:relative;font-size:3rem;font-weight:bold;user-select:none}.header__logo a{position:absolute;top:0;left:0;width:100%;height:100%}.header__desc{font-size:1rem}.fade-enter-from{opacity:0}.fade-enter-to{opacity:1}.fade-enter-active{opacity:1;transition:opacity .5s}.fade-leave-from{opacity:1}.fade-leave-to{opacity:0}.fade-leave-active{opacity:0;transition:opacity .5s}.project-card{display:flex;align-items:center;justify-content:center;font-size:1.5rem;text-align:center;cursor:pointer}.project-card__title{position:relative;padding:15px;font-size:30px;white-space:nowrap;color:#000;margin-bottom:1rem}.project-card__pop-up{position:fixed;top:0;left:0;padding:2rem;font-size:1rem;text-align:left;z-index:99;pointer-events:none}.project-card__pop-up-main{position:relative;padding:1rem;color:#fff;background-color:#000;transform:translate(-50%,-50%)}.project-card__pop-up-main.-note{padding-bottom:2.5rem}.project-card__pop-up-title{font-size:3rem;font-family:Noto Sans TC,Microsoft YaHei UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-weight:bold;line-height:1.25;margin-bottom:.77rem}@media (max-width: 767.98px){.project-card__pop-up-title{font-size:2rem}}.project-card__pop-up-detail{line-height:1.5}.project-card__pop-up-detail .-title{margin-left:.2em}.project-card__pop-up-detail .-me{color:red}.project-card__pop-up-note{position:absolute;bottom:1rem;right:1rem;display:flex;font-size:.5rem}.project-card__pop-up-note li{display:flex;align-items:center;justify-content:center}.project-card__pop-up-note li+.project-card__pop-up-note li{margin-right:.5rem}.project-card__pop-up-note-major:before{content:"";display:block;margin-right:.5em;background-color:red;flex:0 0 .5rem;width:.5rem;height:.5rem}.project-card__pop-up-enter-from{opacity:0}.project-card__pop-up-enter-to{opacity:1}.project-card__pop-up-enter-active{transition:opacity .3s ease-in-out}.project-card__pop-up-leave-from{opacity:1}.project-card__pop-up-leave-to{opacity:0}.project-card__pop-up-leave-active{transition:opacity .3s ease-in-out}.page-index{overflow:hidden;padding-top:5rem;padding-bottom:5rem;text-align:center}.page-index__title{font-size:5rem;font-family:Noto Sans TC,Microsoft YaHei UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-weight:bold;line-height:1.25}@media (max-width: 767.98px){.page-index__title{font-size:3rem}}.page-index__title p{margin:0 auto}.page-index__projects{padding-top:2rem;padding-bottom:2rem}.page-index__projects-block{margin-bottom:1.5rem;padding-top:3rem;padding-bottom:3rem;font-size:5rem;font-family:Noto Sans TC,Microsoft YaHei UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-weight:bold;line-height:1.25}@media (max-width: 767.98px){.page-index__projects-block{font-size:3rem}}.page-dev{text-align:center}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio{margin:0;padding:0;font-size:100%;border:0;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{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}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}textarea{overflow:auto;vertical-align:top;resize:vertical}audio,canvas{display:inline-block;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure{margin:0}form{margin:0}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid #c0c0c0}legend{padding:0;white-space:normal;border:0}button,input,select,textarea{margin:0;font-size:100%;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button{outline:none;border:none}input[type=checkbox],input[type=radio]{padding:0;box-sizing:border-box}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}html,button,input,select,textarea{color:#222}img{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;padding:.2em 0;color:#000;background:#cccccc}:root{--vh: 1vh}::selection{color:#fff;background:#e5e5e5}.container,.container-fluid,.container-large,.container-desktop,.container-medium,.container-tablet,.container-mobile{margin-right:auto;margin-left:auto;width:100%}.container{max-width:100%;padding-right:20px;padding-left:20px}@media (min-width: 768px){.container-tablet,.container{max-width:100%;padding-right:40px;padding-left:40px}}@media (min-width: 1024px){.container-medium,.container-tablet,.container{max-width:100%}}@media (min-width: 1200px){.container-desktop,.container-medium,.container-tablet,.container{max-width:1280px}}@media (min-width: 1920px){.container-large,.container-desktop,.container-medium,.container-tablet,.container{max-width:1280px}}.row{display:flex;margin-right:-12.5px;margin-left:-12.5px;flex-wrap:wrap}.row>*{padding-right:12.5px;padding-left:12.5px;width:100%;max-width:100%;flex-shrink:0}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333333%}.offset-2{margin-left:16.6666666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333333%}.offset-5{margin-left:41.6666666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333333%}.offset-8{margin-left:66.6666666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333333%}.offset-11{margin-left:91.6666666667%}@media (min-width: 768px){.col-tablet{flex:1 0 0%}.row-cols-tablet-auto>*{flex:0 0 auto;width:auto}.row-cols-tablet-1>*{flex:0 0 auto;width:100%}.row-cols-tablet-2>*{flex:0 0 auto;width:50%}.row-cols-tablet-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-tablet-4>*{flex:0 0 auto;width:25%}.row-cols-tablet-5>*{flex:0 0 auto;width:20%}.row-cols-tablet-6>*{flex:0 0 auto;width:16.6666666667%}.col-tablet-auto{flex:0 0 auto;width:auto}.col-tablet-1{flex:0 0 auto;width:8.3333333333%}.col-tablet-2{flex:0 0 auto;width:16.6666666667%}.col-tablet-3{flex:0 0 auto;width:25%}.col-tablet-4{flex:0 0 auto;width:33.3333333333%}.col-tablet-5{flex:0 0 auto;width:41.6666666667%}.col-tablet-6{flex:0 0 auto;width:50%}.col-tablet-7{flex:0 0 auto;width:58.3333333333%}.col-tablet-8{flex:0 0 auto;width:66.6666666667%}.col-tablet-9{flex:0 0 auto;width:75%}.col-tablet-10{flex:0 0 auto;width:83.3333333333%}.col-tablet-11{flex:0 0 auto;width:91.6666666667%}.col-tablet-12{flex:0 0 auto;width:100%}.offset-tablet-0{margin-left:0}.offset-tablet-1{margin-left:8.3333333333%}.offset-tablet-2{margin-left:16.6666666667%}.offset-tablet-3{margin-left:25%}.offset-tablet-4{margin-left:33.3333333333%}.offset-tablet-5{margin-left:41.6666666667%}.offset-tablet-6{margin-left:50%}.offset-tablet-7{margin-left:58.3333333333%}.offset-tablet-8{margin-left:66.6666666667%}.offset-tablet-9{margin-left:75%}.offset-tablet-10{margin-left:83.3333333333%}.offset-tablet-11{margin-left:91.6666666667%}}@media (min-width: 1024px){.col-medium{flex:1 0 0%}.row-cols-medium-auto>*{flex:0 0 auto;width:auto}.row-cols-medium-1>*{flex:0 0 auto;width:100%}.row-cols-medium-2>*{flex:0 0 auto;width:50%}.row-cols-medium-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-medium-4>*{flex:0 0 auto;width:25%}.row-cols-medium-5>*{flex:0 0 auto;width:20%}.row-cols-medium-6>*{flex:0 0 auto;width:16.6666666667%}.col-medium-auto{flex:0 0 auto;width:auto}.col-medium-1{flex:0 0 auto;width:8.3333333333%}.col-medium-2{flex:0 0 auto;width:16.6666666667%}.col-medium-3{flex:0 0 auto;width:25%}.col-medium-4{flex:0 0 auto;width:33.3333333333%}.col-medium-5{flex:0 0 auto;width:41.6666666667%}.col-medium-6{flex:0 0 auto;width:50%}.col-medium-7{flex:0 0 auto;width:58.3333333333%}.col-medium-8{flex:0 0 auto;width:66.6666666667%}.col-medium-9{flex:0 0 auto;width:75%}.col-medium-10{flex:0 0 auto;width:83.3333333333%}.col-medium-11{flex:0 0 auto;width:91.6666666667%}.col-medium-12{flex:0 0 auto;width:100%}.offset-medium-0{margin-left:0}.offset-medium-1{margin-left:8.3333333333%}.offset-medium-2{margin-left:16.6666666667%}.offset-medium-3{margin-left:25%}.offset-medium-4{margin-left:33.3333333333%}.offset-medium-5{margin-left:41.6666666667%}.offset-medium-6{margin-left:50%}.offset-medium-7{margin-left:58.3333333333%}.offset-medium-8{margin-left:66.6666666667%}.offset-medium-9{margin-left:75%}.offset-medium-10{margin-left:83.3333333333%}.offset-medium-11{margin-left:91.6666666667%}}@media (min-width: 1200px){.col-desktop{flex:1 0 0%}.row-cols-desktop-auto>*{flex:0 0 auto;width:auto}.row-cols-desktop-1>*{flex:0 0 auto;width:100%}.row-cols-desktop-2>*{flex:0 0 auto;width:50%}.row-cols-desktop-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-desktop-4>*{flex:0 0 auto;width:25%}.row-cols-desktop-5>*{flex:0 0 auto;width:20%}.row-cols-desktop-6>*{flex:0 0 auto;width:16.6666666667%}.col-desktop-auto{flex:0 0 auto;width:auto}.col-desktop-1{flex:0 0 auto;width:8.3333333333%}.col-desktop-2{flex:0 0 auto;width:16.6666666667%}.col-desktop-3{flex:0 0 auto;width:25%}.col-desktop-4{flex:0 0 auto;width:33.3333333333%}.col-desktop-5{flex:0 0 auto;width:41.6666666667%}.col-desktop-6{flex:0 0 auto;width:50%}.col-desktop-7{flex:0 0 auto;width:58.3333333333%}.col-desktop-8{flex:0 0 auto;width:66.6666666667%}.col-desktop-9{flex:0 0 auto;width:75%}.col-desktop-10{flex:0 0 auto;width:83.3333333333%}.col-desktop-11{flex:0 0 auto;width:91.6666666667%}.col-desktop-12{flex:0 0 auto;width:100%}.offset-desktop-0{margin-left:0}.offset-desktop-1{margin-left:8.3333333333%}.offset-desktop-2{margin-left:16.6666666667%}.offset-desktop-3{margin-left:25%}.offset-desktop-4{margin-left:33.3333333333%}.offset-desktop-5{margin-left:41.6666666667%}.offset-desktop-6{margin-left:50%}.offset-desktop-7{margin-left:58.3333333333%}.offset-desktop-8{margin-left:66.6666666667%}.offset-desktop-9{margin-left:75%}.offset-desktop-10{margin-left:83.3333333333%}.offset-desktop-11{margin-left:91.6666666667%}}@media (min-width: 1920px){.col-large{flex:1 0 0%}.row-cols-large-auto>*{flex:0 0 auto;width:auto}.row-cols-large-1>*{flex:0 0 auto;width:100%}.row-cols-large-2>*{flex:0 0 auto;width:50%}.row-cols-large-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-large-4>*{flex:0 0 auto;width:25%}.row-cols-large-5>*{flex:0 0 auto;width:20%}.row-cols-large-6>*{flex:0 0 auto;width:16.6666666667%}.col-large-auto{flex:0 0 auto;width:auto}.col-large-1{flex:0 0 auto;width:8.3333333333%}.col-large-2{flex:0 0 auto;width:16.6666666667%}.col-large-3{flex:0 0 auto;width:25%}.col-large-4{flex:0 0 auto;width:33.3333333333%}.col-large-5{flex:0 0 auto;width:41.6666666667%}.col-large-6{flex:0 0 auto;width:50%}.col-large-7{flex:0 0 auto;width:58.3333333333%}.col-large-8{flex:0 0 auto;width:66.6666666667%}.col-large-9{flex:0 0 auto;width:75%}.col-large-10{flex:0 0 auto;width:83.3333333333%}.col-large-11{flex:0 0 auto;width:91.6666666667%}.col-large-12{flex:0 0 auto;width:100%}.offset-large-0{margin-left:0}.offset-large-1{margin-left:8.3333333333%}.offset-large-2{margin-left:16.6666666667%}.offset-large-3{margin-left:25%}.offset-large-4{margin-left:33.3333333333%}.offset-large-5{margin-left:41.6666666667%}.offset-large-6{margin-left:50%}.offset-large-7{margin-left:58.3333333333%}.offset-large-8{margin-left:66.6666666667%}.offset-large-9{margin-left:75%}.offset-large-10{margin-left:83.3333333333%}.offset-large-11{margin-left:91.6666666667%}}*{margin:0;padding:0;box-sizing:border-box}html,body,button,input,textarea{font-family:Noto Sans TC,Microsoft YaHei UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{min-width:320px;overscroll-behavior:none;scroll-behavior:smooth;font-size:1vw}@media (max-width: 767.98px){html,body{font-size:16px}}input,textarea{border:none;appearance:none}pre{white-space:pre-line}a{text-decoration:none;color:inherit}a:hover,a:active,a:focus{outline:0}button{background-color:transparent}.icon{width:1rem;height:1rem;fill:currentColor}