@import url('https://fonts.googleapis.com/css?family=Roboto:300'); /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button, html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-font-smoothing:antialiased}body{font-family:Roboto,'Helvetica Neue',Helvetica,Arial,'Microsoft JhengHei','微軟正黑體','Microsoft PMingLiU','新細明體',sans-serif;color:#666;font-size:15px;line-height:1.4em;background-color:#000;background-image:url(../img/glitch/glitch.gif);background-size:cover;background-repeat:no-repeat;opacity:1;transition:1.5s opacity}body.fade-out{opacity:0;transition:none}@media (min-width:1441px){body{font-size:16px;line-height:1.4em}}@media (min-width:2000px){body{font-size:18px;line-height:1.4em}}img{width:100%;height:auto;display:block}a{color:#666;text-decoration:none}.text a{border-bottom:1px dotted #d9d9d9}figure{width:100%;margin:0 0 8.333333333333332% 0}@media (min-width:603px){figure{width:100%;margin:0 0 8.333333333333332% 0}}@media (min-width:880px){figure{width:83.33333333333334%;margin:0 8.333333333333332% 8.333333333333332%}}@media (min-width:1100px){figure{width:83.33333333333334%;margin:0 8.333333333333332% 8.333333333333332%}}figure.project-primary-image{width:100%;margin:0 0 8.333333333333332% 0}figure.project-secondary-image{width:83.33333333333334%;margin:0 8.333333333333332% 8.333333333333332%}.content{width:100%;max-width:2560px;margin:0 auto;background-color:#fff;overflow:hidden}.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;-webkit-transition:opacity 80ms;transition:opacity 80ms}.col{background:#e6e6e6;margin-bottom:6px;text-align:center;padding:6px}.col1{width:6.25%}.col2{width:12.5%}.col3{width:18.75%}.col4{width:25%}.col5{width:31.25%}.col6{width:37.5%}.col7{width:43.75%}.col8{width:50%}.col9{width:56.25%}.col10{width:62.5%}.col11{width:68.75%}.col12{width:75%}.col13{width:81.25%}.col14{width:87.5%}.col15{width:93.75%}.col16{width:100%}.header{font-weight:600;padding:40px 0}@media (min-width:603px){.header{padding:60px 0}}@media (min-width:880px){.header{padding:70px 0}}@media (min-width:1100px){.header{padding:80px 0}}.navigation ul{margin:0 0 0 8.333333333333332%;padding:0}@media (min-width:603px){.navigation ul{margin:0 0 0 8.333333333333332%}}@media (min-width:880px){.navigation ul{margin:0 0 0 12.5%}}@media (min-width:1100px){.navigation ul{margin:0 0 0 12.5%}}.navigation li{display:inline-block;margin-right:30px}.navigation a{padding-bottom:2px;border-bottom:1px dashed #000}.navigation a:hover{border-bottom:1px dashed #d9d9d9}.navigation .active{border-bottom:1px dashed}.navigation .active:hover{border-bottom:1px dashed}.row{width:100%;clear:both;float:left}@media (min-width:603px){.row--1{margin-bottom:8.333333333333332%}}@media (min-width:880px){.row--1{margin-bottom:7.142857142857142%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}}@media (min-width:1100px){.row--1{margin-bottom:6.25%}}@media (min-width:603px){.row--2{margin-bottom:8.333333333333332%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}}@media (min-width:880px){.row--2{margin-bottom:7.142857142857142%}}@media (min-width:1100px){.row--2{margin-bottom:6.25%}}@media (min-width:603px){.row--3{margin-bottom:8.333333333333332%}}@media (min-width:880px){.row--3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:7.142857142857142%}}@media (min-width:1100px){.row--3{margin-bottom:6.25%}}@media (min-width:603px){.row--4{margin-bottom:8.333333333333332%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}}@media (min-width:880px){.row--4{margin-bottom:7.142857142857142%}}@media (min-width:1100px){.row--4{margin-bottom:6.25%}}.work-tile--1{width:100%;float:left;margin-bottom:8.333333333333332%}@media (min-width:603px){.work-tile--1{width:66.66666666666666%;margin-left:8.333333333333332%;margin-bottom:0}}@media (min-width:880px){.work-tile--1{width:64.28571428571429%;margin-left:7.142857142857142%}}@media (min-width:1100px){.work-tile--1{width:56.25%;margin-left:12.5%;overflow:hidden}}.work-tile--2{width:100%;float:left;margin-bottom:8.333333333333332%}@media (min-width:603px){.work-tile--2{width:66.66666666666666%;margin-left:8.333333333333332%;margin-bottom:0}}@media (min-width:880px){.work-tile--2{width:42.857142857142854%;margin-left:7.142857142857142%}}@media (min-width:1100px){.work-tile--2{width:37.5%;margin-left:12.5%;overflow:hidden}}.work-tile--3{width:100%;margin-bottom:8.333333333333332%;float:right}@media (min-width:603px){.work-tile--3{width:66.66666666666666%;margin-left:8.333333333333332%;margin-bottom:0;float:left}}@media (min-width:880px){.work-tile--3{width:35.714285714285715%;margin-left:7.142857142857142%}}@media (min-width:1100px){.work-tile--3{width:37.5%;margin-left:6.25%}}.work-tile--4{width:83.33333333333334%;float:left;margin-left:8.333333333333332%;margin-bottom:8.333333333333332%}@media (min-width:603px){.work-tile--4{width:66.66666666666666%;margin-left:25%;margin-bottom:0}}@media (min-width:880px){.work-tile--4{width:50%;margin-left:35.714285714285715%}}@media (min-width:1100px){.work-tile--4{width:50%;margin-left:12.5%}}.work-tile--5{width:100%;float:left;margin-bottom:8.333333333333332%}@media (min-width:603px){.work-tile--5{width:66.66666666666666%;margin-left:8.333333333333332%;margin-bottom:0}}@media (min-width:880px){.work-tile--5{width:42.857142857142854%;margin-left:7.142857142857142%}}@media (min-width:1100px){.work-tile--5{width:37.5%;margin-left:12.5%;overflow:hidden}}.work-tile--6{width:83.33333333333334%;margin-left:8.333333333333332%;margin-bottom:8.333333333333332%;float:left}@media (min-width:603px){.work-tile--6{width:66.66666666666666%;margin-bottom:0;margin-left:8.333333333333332%}}@media (min-width:880px){.work-tile--6{width:35.714285714285715%;margin-left:7.142857142857142%;margin-right:0}}@media (min-width:1100px){.work-tile--6{width:37.5%;margin-left:6.25%}}.wrapper{position:relative;display:block;overflow:hidden;-webkit-transition:all .3s;transition:all .3s}.wrapper h1{font-weight:bold;font-size:1.2em;color:#fff;text-shadow:0px 2px 6px #000}.wrapper img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:opacity .6s, -webkit-transform 1s;transition:opacity .6s, transform 1s;height:auto}.wrapper .overlay{background:none;position:absolute;width:100%;height:100%;text-align:center;color:#474747;opacity:0;-webkit-transition:opacity .3s, -webkit-transform .3s;transition:opacity .3s, transform .3s;letter-spacing: .2px;z-index:500}.wrapper .overlay .center-title{position:absolute;width:100%;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);padding: $padding_half $padding $padding_half $padding}.wrapper:hover img{opacity: .4;-webkit-transform:scale(0.97);-ms-transform:scale(0.97);transform:scale(0.97);-webkit-transition:opacity .4s, -webkit-transform 1s;transition:opacity .4s, transform 1s -webkit-filter: blur(6px);filter:blur(6px)}.wrapper:hover .overlay{opacity:1;-webkit-transition:opacity .4s, -webkit-transform .4s;transition:opacity .4s, transform .4s;z-index:500}.project--introduction{width:83.33333333333334%;margin-left:8.333333333333332%;padding:40px 0;color:#474747;font-size:1.3em;line-height:1.4em}@media (min-width:603px){.project--introduction{font-size:1.4em;line-height:1.4em}}@media (min-width:880px){.project--introduction{font-size:1.5em;line-height:1.4em}}@media (min-width:603px){.project--introduction{width:66.66666666666666%;margin-left:8.333333333333332%}}@media (min-width:880px){.project--introduction{width:64.28571428571429%;margin-left:12.5%;padding:30px 0}}@media (min-width:1100px){.project--introduction{width:50%;margin-left:12.5%;padding:40px 0}}.project--description{width:83.33333333333334%;margin-left:8.333333333333332%;padding:20px 0 20px 0}@media (min-width:603px){.project--description{width:66.66666666666666%;margin-left:8.333333333333332%}}@media (min-width:880px){.project--description{width:57.14285714285714%;margin-left:12.5%;padding:30px 0 30px 0}}@media (min-width:1100px){.project--description{width:37.5%;margin-left:12.5%;padding:40px 0 40px 0}}.project--pagination{width:83.33333333333334%;margin-left:8.333333333333332%;padding:40px 0;color:#b3b3b3}@media (min-width:603px){.project--pagination{width:66.66666666666666%}}@media (min-width:880px){.project--pagination{width:64.28571428571429%;margin-left:7.142857142857142%;padding:60px 0}}@media (min-width:1100px){.project--pagination{width:50%;margin-left:12.5%;padding:80px 0}}.project--pagination a{color:#b3b3b3}.project--pagination-separator{display:inline-block;padding:0 10px}.profile--introduction{float:left;width:83.33333333333334%;margin-left:8.333333333333332%;margin-bottom:60px;color:#474747;font-size:1.3em;line-height:1.4em}@media (min-width:603px){.profile--introduction{font-size:1.4em;line-height:1.4em}}@media (min-width:880px){.profile--introduction{font-size:1.5em;line-height:1.4em}}@media (min-width:603px){.profile--introduction{width:66.66666666666666%;margin-left:8.333333333333332%}}@media (min-width:880px){.profile--introduction{width:64.28571428571429%;margin-left:7.142857142857142%}}@media (min-width:1100px){.profile--introduction{width:50%;margin-left:12.5%}}.profile--image{width:100%;float:right;margin-bottom:8.333333333333332%}@media (min-width:603px){.profile--image{width:100%}}@media (min-width:880px){.profile--image{width:57.14285714285714%;margin-bottom:0}}@media (min-width:1100px){.profile--image{width:56.25%}}.profile--bio{float:left;width:83.33333333333334%;margin-left:8.333333333333332%;margin-bottom:8.333333333333332%}@media (min-width:603px){.profile--bio{width:58.333333333333336%;margin-left:8.333333333333332%}}@media (min-width:880px){.profile--bio{width:28.57142857142857%;margin-left:7.142857142857142%;margin-bottom:7.142857142857142%}}@media (min-width:1100px){.profile--bio{width:25%;margin-left:12.5%;margin-bottom:6.25%}}.profile--bio p{margin-top:0}.folio-entry{width:100%;float:left;margin-bottom:80px}.folio-entry--image{width:100%;float:left}.folio-entry--image img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:opacity .6s, -webkit-transform 1s;transition:opacity .6s, transform 1s;height:auto}.folio-entry--image:hover img{opacity: .4;-webkit-transform:scale(0.97);-ms-transform:scale(0.97);transform:scale(0.97);-webkit-transition:opacity .4s, -webkit-transform 1s;transition:opacity .4s, transform 1s;-webkit-filter:blur(6px);filter:blur(6px)}@media (min-width:880px){.folio-entry--image{width:57.14285714285714%}}@media (min-width:1100px){.folio-entry--image{width:56.25%}}.folio-entry--text{float:left;width:83.33333333333334%;margin-left:8.333333333333332%;padding-top:50px}@media (min-width:603px){.folio-entry--text{margin-left:8.333333333333332%;width:66.66666666666666%}}@media (min-width:880px){.folio-entry--text{width:28.57142857142857%;margin-left:7.142857142857142%}}@media (min-width:1100px){.folio-entry--text{width:31.25%;margin-left:6.25%}}.folio-entry--meta{margin-bottom:2em}.folio-entry--title{font-weight:normal;color:#474747;margin:0;font-size:1.35em;line-height:1.4em}.folio-entry--title a{color:#474747}.folio-entry--date{color:#b3b3b3}.folio-pagination{width:100%;clear:both;margin-bottom:8.333333333333332%;color:#b3b3b3}@media (min-width:880px){.folio-pagination{margin-bottom:7.142857142857142%}}@media (min-width:1100px){.folio-pagination{margin-bottom:6.25%}}.folio-pagination a{color:#b3b3b3}.folio-pagination--container{width:83.33333333333334%;margin-left:8.333333333333332%}@media (min-width:603px){.folio-pagination--container{width:66.66666666666666%}}@media (min-width:880px){.folio-pagination--container{width:28.57142857142857%;margin-left:64.28571428571429%}}@media (min-width:1100px){.folio-pagination--container{width:31.25%;margin-left:62.5%}}.folio-pagination--separator{display:inline-block;padding:0 6px}.entry-full img{margin-bottom:2px}.entry-full--text{width:83.33333333333334%;margin-left:8.333333333333332%;padding:40px 0}@media (min-width:603px){.entry-full--text{margin-left:8.333333333333332%;width:66.66666666666666%}}@media (min-width:880px){.entry-full--text{margin-left:7.142857142857142%;width:64.28571428571429%;padding:60px 0}}@media (min-width:1100px){.entry-full--text{width:50%;margin-left:12.5%;padding:80px 0}}.dev-introduction{width:83.33333333333334%;margin-left:8.333333333333332%;margin-bottom:60px}@media (min-width:603px){.dev-introduction{margin-left:8.333333333333332%}}@media (min-width:880px){.dev-introduction{width:57.14285714285714%;margin-left:7.142857142857142%}}@media (min-width:1100px){.dev-introduction{width:50%;margin-left:12.5%;margin-bottom:90px}}.dev-projects{float:left;width:100%;background:#e6e6e6;background:#0d0d0d;padding:60px 8.333333333333332%}@media (min-width:603px){.dev-projects{padding:60px 8.333333333333332%}}@media (min-width:880px){.dev-projects{padding:90px 7.142857142857142%}}@media (min-width:1100px){.dev-projects{padding-left:12.5%}}.dev-project{margin-bottom:60px}.dev-project:last-of-type{margin-bottom:0}.dev-project--title{color:#f0f0f0;font-weight:normal;font-size:1.80em;margin:0 0 .2em 0;line-height:1.2em}.dev-project--title a{color:#f0f0f0}.dev-project--title a:hover{border-bottom:1px solid}html.error-page{background:#050505}body.error{background:#050505}.error--gif{-webkit-background-size:cover !important;background-size:cover !important;background-position:center center !important;position:fixed;width:100%;height:100%;opacity: .3;z-index:50}.error--content{position:absolute;width:100%;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-align:center;color:#fff;z-index:100}.error--content a{color:#fff}.error--content a:hover{border-bottom:1px solid;padding-bottom:2}.error--title{font-size:1.3em;line-height:1.4em;margin-bottom: $padding_half}@media (min-width:603px){.error--title{font-size:1.4em;line-height:1.4em}}@media (min-width:880px){.error--title{font-size:1.5em;line-height:1.4em}}.error--body{font-size:1em}.bio-introduction{width:83.33333333333334%;margin-left:8.333333333333332%;margin-bottom:60px}@media (min-width:603px){.bio-introduction{margin-left:8.333333333333332%}}@media (min-width:880px){.bio-introduction{width:57.14285714285714%;margin-left:7.142857142857142%}}@media (min-width:1100px){.bio-introduction{width:50%;margin-left:12.5%;margin-bottom:90px}}.bio-lists{float:left;width:100%;background:#e6e6e6;background-image:url(../img/2010004bw.jpg);background-repeat:no-repeat;background-size:cover;padding:60px 8.333333333333332%}@media (min-width:603px){.bio-lists{padding:60px 8.333333333333332%}}@media (min-width:880px){.bio-lists{padding:90px 7.142857142857142%}}@media (min-width:1100px){.bio-lists{padding-left:12.5%}}.bio-list{margin-bottom:40px}.bio-list:last-of-type{margin-bottom:0}.bio-list--title{color:#000;font-weight:normal;font-size:1.5em;margin:0 0 .2em 0;line-height:1.2em}.bio-list--title a{color:#000}.bio-list--title a:hover{border-bottom:1px dotted}.footer-transparent,.footer-white,.footer-black{width:100%;margin:0 auto;padding:10px 40px;font-size:13px;color:#9d9d9d}.footer-white{background:#fff}.footer-black{background:#000}::-webkit-scrollbar{display:none}.fluidvid{position:relative;padding-bottom:56.25%;padding-top:0px;height:0;overflow:hidden}.fluidvid iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.fade-menu ul{display:inline-block;margin:0 0 0 40px;padding:0}@media (min-width:603px){.fade-menu ul{margin-left:50px}}@media (min-width:880px){.fade-menu ul{margin-left:60px}}@media (min-width:1100px){.fade-menu ul{margin-left:70px}}.fade-menu a,hover{border-bottom:0;padding-bottom:0px}.fade-menu li{margin-right:30px}@media (min-width:603px){.fade-menu li{margin-right:40px}}@media (min-width:880px){.fade-menu li{margin-right:50px}}@media (min-width:1100px){.fade-menu li{margin-right:60px}}.fade-menu li:hover ul{opacity:1;visibility:visible;-webkit-transition-delay:0s, 0s;-moz-transition-delay:0s, 0s;-o-transition-delay:0s, 0s;transition-delay:0s, 0s}.fade-menu ul{opacity:0;visibility:hidden;z-index:1;position:absolute;-webkit-transition-property:opacity, visibility;-moz-transition-property:opacity, visibility;-o-transition-property:opacity, visibility;transition-property:opacity, visibility;-webkit-transition-duration: .8s, 0s;-moz-transition-duration: .8s, 0s;-o-transition-duration: .8s, 0s;transition-duration: .8s,0s;-webkit-transition-delay:0s,.8s;-moz-transition-delay:0s,.8s;-o-transition-delay:0s,.8s;transition-delay:0s,.8s}.menuicon{width:80%}@media (min-width:603px){.menuicon{width:85%}}@media (min-width:880px){.menuicon{width:90%}}@media (min-width:1100px){.menuicon{width:100%}}.bg_glitch01,.bg_glitch02,.bg_glitch03,.bg_glitch04,.bg_404,.bg_403{pointer-events:none;position:fixed;opacity:0.013;left:0;top:0;min-width:100%;min-height:100%;width:fixed;height:fixed;background-size:cover;z-index:900}.bg_glitch01{background-image:url(../img/glitch/UUP31.gif)}.bg_glitch02{background-image:url(../img/glitch/PRbAQ.gif)}.bg_glitch03{background-image:url(../img/glitch/GvhsT.gif)}.bg_glitch04{background-image:url(../img/glitch/5R1re.gif)}.bg_404{background-image:url(../img/404.jpg);opacity:0.7}.bg_403{background-image:url(../img/403.jpg);opacity:0.7}#bg_pattern{background-image:url(../img/overlay/01.png);pointer-events:none;position:fixed;opacity:0.2;left:0;top:0;width:100%;height:100%;z-index:800}.pages{display:inline-block}.pages a{color:#666;float:left;padding:8px 16px;text-decoration:none}.pages a.active{background-color:#000;color:white}.pages a:hover:not(.active){background-color:#eee}.bg_gradient{pointer-events:none;background-size:100%;background-image:-webkit-radial-gradient(left top, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05));background:radial-gradient(ellipse at top right, rgba(255, 235, 215, 0.5) 0%, rgba(255, 255, 255, 0) 60%);background-image:radial-gradient(left top, #fff, #fff, #fff);-webkit-animation:animate_background 10s linear infinite;animation:animate_background 15s ease-in-out infinite;position:fixed;top:0;right:0;left:0;bottom:0;z-index:1000}@-webkit-keyframes animate_background{from{-webkit-filter:hue-rotate(0deg)}to{-webkit-filter:hue-rotate(360deg)}}