@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap";#root,body{box-sizing:border-box;margin:0;height:100%;width:100%;overflow-x:hidden}#root .section,body .section{padding:25px 0}html{scrollbar-width:none;overflow-y:scroll}html ::-webkit-scrollbar{display:none}#footer{position:relative;width:100%;padding:20px 0;display:flex;justify-content:center;align-items:center;flex-direction:column}#footer p{margin:0;font-size:14px}.darkTheme{background-color:#0f0f14;color:#fff;transition:background-color 1.5s,color 1.5s}.darkTheme .loading{background-color:#0f0f14}.darkTheme .loading .progress{background-color:#35f8ff}.darkTheme #naviContainer{background-color:#0f0f14;transition:opacity 1s,background-color 1.5s}.darkTheme .notOnTop{opacity:0}.darkTheme .notOnTop:hover{opacity:1;transition:opacity 1.5s}.darkTheme .fading text{fill:#0f0f14;stroke:#fff}.darkTheme #planet .orbit{border:3px solid rgba(255,255,255,.1)}.darkTheme #birdsEyeContainer #img{border:2px solid wheat}.darkTheme #projectContainer .urlItem a{color:#fff;transition:color 1s}.darkTheme #projectContainer .urlItem a:hover{color:#35f8ff}.darkTheme #projectContainer .urlItem a:before{background-color:#f0f0f0;color:#0c0101}.darkTheme #themeSwitcher #tick path{stroke:#fff}.darkTheme #contactContainer #info svg{fill:#ff0}.lightTheme{background-color:#f0f0f0;color:#0c0101;transition:background-color 1.5s,color 1.5s}.lightTheme .loading{background-color:#f0f0f0}.lightTheme .loading .progress{background-color:#a5c9ca}.lightTheme #naviContainer{background-color:#f0f0f0;transition:opacity 1s,background-color 1.5s}.lightTheme .notOnTop{opacity:0}.lightTheme .notOnTop:hover{opacity:1;transition:opacity 1.5s}.lightTheme .fading text{fill:#f0f0f0;stroke:#0c0101;transition:fill 2s,stroke 2s}.lightTheme #planet .orbit{border:3px solid rgba(0,0,0,.1)}.lightTheme #birdsEyeContainer #img{border:3px solid rgb(230,141,26)}.lightTheme #projectContainer .urlItem a{color:#0c0101;transition:color 1.5s}.lightTheme #projectContainer .urlItem a:hover{color:#a5c9ca}.lightTheme #projectContainer .urlItem a:before{background-color:#0f0f14;color:#fff}.lightTheme #themeSwitcher #tick path{stroke:#000}.lightTheme #contactContainer #info svg{fill:#34c9d1}#contactContainer{padding:2% 0 10% 0%}#contactContainer h2{padding:0% 5% 5%;font-size:3em;font-style:italic}#contactContainer #info{display:flex;justify-content:space-evenly;align-items:center;margin:8% 0}#contactContainer #info svg{margin:5px 0 -11px}#contactContainer #info .contactItem{text-align:center;width:22%;border:3px solid rgb(165,201,202);border-radius:30px;padding:3vh 2px;cursor:pointer}#contactContainer #info .contactItem:hover{transform:translate(1px,-1px)}#contactContainer #info .contactItem:active{border:3px solid rgb(255,231,14)}#contactContainer #info .contactItem p{margin:0}@media (max-width: 1250px){#contactContainer #info{flex-direction:column}#contactContainer #info .contactItem{width:50%;margin:3% 0;padding:3vh 0}}@media (max-width: 420px){#contactContainer p{font-size:11px;font-weight:600}#contactContainer #info .contactItem{width:70%;margin:3% 0;padding:5% 0}}#titleContainer .title{width:100%;padding:0% 5%;font-size:3em;font-style:italic;display:flex;overflow:hidden}#titleContainer .title .bouncy{animation:fontActivate .8s alternate ease-out}@keyframes fontActivate{0%{transform:scaleX(1) scaleY(1)}40%{transform:scaleX(1.12) scaleY(.75)}55%{transform:scaleX(.85) scaleY(1);color:tomato}65%{transform:scaleX(1.09) scaleY(.85)}75%{transform:scaleX(.9) scaleY(1)}90%{transform:scaleX(1.05) scaleY(.95)}to{transform:scaleX(1) scaleY(1)}}@media (max-width: 1250px){#titleContainer .title{padding:0% 5%;font-size:2.5em}}@media (max-width: 420px){#titleContainer .title{padding:0% 3.5%;font-size:1.7em}}@media (max-width: 374px){#titleContainer .title{padding:0% 3%;font-size:1.6em}}#homeContainer{position:relative;width:100%;height:75dvh;padding:10% 0 3%;display:flex;flex-direction:column;justify-content:space-between;align-items:start}#homeContainer .paragraph{z-index:25;margin-top:5%;margin-left:15%}#homeContainer .paragraph h2{font-size:2em;margin:10px 0}#homeContainer #infiniteMarquee{z-index:30;width:100%;box-shadow:50px 0 50px #4645451a;background-color:#b0b0b040;padding:15px 0 10px}#homeContainer #infiniteMarquee img{margin:0 64px;width:48px;height:48px}@media (max-width: 1800px){#homeContainer .paragraph{justify-content:center}}@media (max-width: 1250px){#homeContainer{height:60dvh}#homeContainer .paragraph{justify-content:center}#homeContainer .paragraph h2{font-size:2em;margin:-15px 0}#homeContainer #infiniteMarquee{margin-top:20dvh}#homeContainer #infiniteMarquee img{margin:0 48px;width:36px;height:36px}}@media (max-width: 420px){#homeContainer{height:80dvh;position:relative}#homeContainer .paragraph{justify-content:center}#homeContainer .paragraph h2{font-size:1.5em;margin:-15px 0}#homeContainer #infiniteMarquee{margin-top:20dvh}#homeContainer #infiniteMarquee img{margin:0 32px;width:32px;height:32px}}#planet{position:absolute;left:30%;top:-320px;width:1200px;height:1200px}#planet .fakeEarth{cursor:pointer;position:absolute;left:60%;top:58%;width:20%;height:20%;z-index:20;border-radius:50%}#planet .earth{z-index:10;cursor:pointer;position:absolute;left:60%;top:58%;width:20%;animation:earthLayer 6s infinite steps(1,start);-webkit-animation:earthLayer 6s infinite steps(1,start);-moz-animation:earthLayer 6s infinite steps(1,start);-o-animation:earthLayer 6s infinite steps(1,start)}#planet .earth img{width:100%}#planet .orbit{position:absolute;border-radius:50%;box-sizing:border-box}#planet .orbit .satellite{position:absolute;border:1px solid rgba(0,0,0,0);padding:5px}#planet .path1{animation:spin 6s infinite linear;width:70%;height:70%;top:34%;left:35%;z-index:5}#planet .path1 .satellite{width:5%;animation:satellite-spin 6s infinite linear;left:12%;top:11%}#planet .path2{animation:spin 8s infinite linear;width:3.33%;width:105%;height:105%;top:17%;left:17.5%;z-index:4}#planet .path2 .satellite{width:3.6%;animation:satellite-spin 8s infinite linear;left:13.5%;top:12%}#planet .path3{animation:spin 10s infinite linear;width:140%;height:140%;z-index:3}#planet .path3 .satellite{width:2.5%;animation:satellite-spin 10s infinite linear;left:19%;top:8%}@keyframes spin{0%{transform:scaleY(.2) rotate(0)}to{transform:scaleY(.2) rotate(360deg)}}@keyframes satellite-spin{0%{transform:rotate(0) scaleY(5)}to{transform:rotate(-360deg) scaleY(5)}}@keyframes earthLayer{60%{z-index:10}68%{z-index:0}}@media only screen and (max-width: 1250px){#planet{top:-100px;left:35%;width:700px;height:700px}#planet .path1 .satellite{left:11%;top:10%}#planet .path2 .satellite{left:14%;top:10%}#planet .path3 .satellite{left:18%;top:8%}}@media only screen and (max-width: 500px){#planet{top:20%;left:20%;width:450px;height:450px}#planet .path1 .satellite{width:6%;left:9%;top:10%}#planet .path2 .satellite{width:4.32%;left:12%;top:10%}#planet .path3 .satellite{width:3%;left:16.5%;top:8%}}.fading svg{width:550px;stroke-dasharray:1200px;stroke-dashoffset:1200px;-moz-animation:draw 8s ease-in infinite;-webkit-animation:draw 8s ease-in infinite;animation:draw 8s ease-in infinite;font-size:5.5em}.fading svg text{stroke-width:2px}@keyframes draw{5%{stroke-dashoffset:1200px}80%{stroke-dashoffset:0}to{stroke-dashoffset:0}}@media (max-width: 1250px){.fading svg{font-size:4em}}@media (max-width: 420px){.fading{margin:0;padding:0}.fading svg{font-size:3.5em}}.loading{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;height:100%;width:100%;z-index:1000;position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading p{font-size:1.5em;font-weight:700}.loading .loadingBar{position:relative;width:150px;height:4px;border-radius:15px}.loading .loadingBar .basic{position:absolute;width:99%;height:100%;background-color:#fff;border-radius:15px}.loading .loadingBar .progress{position:absolute;height:100%;animation:barProgress 3.5s ease-out .5s forwards;border-radius:15px}@keyframes barProgress{0%{width:0%}to{width:100%}}.visible{display:flex}.invisible{display:none}#naviContainer{height:50px;width:100%;display:flex;flex-direction:row;align-items:center;box-shadow:#8a8a8a59 3px 3px 10px;position:fixed;z-index:100}#naviContainer button{all:unset;cursor:pointer}#naviContainer .logo{height:70%;margin-left:2%;background-color:#fff;border-radius:100%}#naviContainer .logo img{height:100%}#naviContainer .btnContainer{position:relative;left:10%;width:30%;display:flex;justify-content:space-around}#naviContainer .btnContainer .option{font-style:italic;font-weight:600;opacity:.8}#naviContainer .btnContainer .option:hover{opacity:1}.abc{opacity:0;transition:opacity 1s ease-in;transition:background-color 1.5s}.abc:hover{opacity:1;transition:opacity 1.5s ease-in}@media (max-width: 1250px){#naviContainer .btnContainer{left:10%;width:50%}}@media (max-width: 420px){#naviContainer .btnContainer{left:5%;width:75%}}#portfolioContainer{height:100%;margin-top:5%}#projectContainer{display:flex;align-items:center;width:96%;margin-bottom:75px;margin-left:2%}#projectContainer .carouselContainer{width:50%;height:100%;display:flex;align-items:center;justify-content:center}#projectContainer .carouselContainer img{margin:5% 0;width:80%;border-radius:10px;box-shadow:5px 5px 5px #464545cc;-webkit-user-select:none;-ms-user-select:none;user-select:none}#projectContainer .carouselContainer video{object-fit:fill;margin:5% 0;width:80%;border-radius:10px;box-shadow:5px 5px 5px #464545cc;-webkit-user-select:none;-ms-user-select:none;user-select:none}#projectContainer .paragraph{width:50%;height:100%;padding:0% 3%;box-sizing:border-box}#projectContainer .paragraph h2{font-size:2em}#projectContainer .paragraph p{margin:30px 0}#projectContainer .paragraph h4{font-style:italic;margin-bottom:0;padding-bottom:0}#projectContainer .paragraph ul{margin-block-start:0}#projectContainer .paragraph li{line-height:1.3em}#projectContainer .paragraph .urlItem{list-style-type:none;position:relative}#projectContainer .paragraph .urlItem a{text-decoration:none}#projectContainer .paragraph .urlItem a:before{content:attr(hovertext);visibility:hidden;text-align:center;border-radius:5px;padding:5px 10px;position:absolute;z-index:2;left:-5%;top:110%}#projectContainer .paragraph .urlItem a:hover:before{opacity:.8;visibility:visible}@media (max-width: 1250px){#projectContainer{flex-direction:column}#projectContainer .carouselContainer{width:100%}#projectContainer .carouselContainer img,#projectContainer .carouselContainer video{margin:10% 0}#projectContainer .paragraph{width:80%;padding:0%}#projectContainer .paragraph h2{font-size:1.8em}}@media (max-width: 500px){#projectContainer{margin-bottom:50px}#projectContainer .paragraph h2{font-size:1.5em}}.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:""}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translateZ(0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px #000000e6;background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,.9);color:#fff}.carousel:hover .slide .legend{opacity:1}#themeSwitcher{position:fixed;right:40px;bottom:40px;width:35px;height:35px;border:1px solid rgb(185,185,185);border-radius:50%;box-sizing:border-box;z-index:100;cursor:pointer;padding:2px}#themeSwitcher .circle,#themeSwitcher .circle img{width:100%;height:100%}#themeSwitcher .circle rect{width:100%;height:100%}#themeSwitcher .toDark{animation:rotateToDark 1.5s ease-out forwards}@keyframes rotateToDark{0%{transform:rotate(0)}to{transform:rotate(-180deg)}}#themeSwitcher .toLight{animation:rotateToLight 1.5s ease-out forwards}@keyframes rotateToLight{0%{transform:rotate(180deg)}to{transform:rotate(360deg)}}#themeSwitcher #tick{top:8%;left:7%;position:absolute;width:50%}@media (max-width: 1250px){#themeSwitcher{right:35px;bottom:35px;width:40px;height:40px}}@media (max-width: 500px){#themeSwitcher{right:30px;bottom:30px;width:45px;height:45px}}#toTop{position:fixed;right:40px;bottom:90px;width:35px;height:35px;background-color:#3f3f3f;border:2px solid rgb(185,185,185);border-radius:50%;box-sizing:border-box;z-index:100;cursor:pointer;display:flex;justify-content:center;align-items:center}@media (max-width: 1250px){#toTop{right:35px;bottom:90px;width:40px;height:40px}}@media (max-width: 420px){#toTop{right:30px;bottom:90px;width:45px;height:45px}}:root{font-family:Noto Sans TC,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;letter-spacing:2px}