@import url(https://fonts.googleapis.com/css?family=Kanit|Noto+Sans+TC);@media(min-width:0){.app-nav{height:50vh;padding-top:calc(50vh - 50px)}}@media(min-width:567px){.app-nav{height:52px;margin-bottom:15px;padding-top:0}}.app-nav{background:#fff;box-shadow:1px 0 20px #ababab}.nav-item{color:#000;display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;line-height:52px;text-align:center;transition:all .3s ease}.nav-item.active{border-bottom:5px solid #3f51b5;line-height:42px}@media(min-width:567px){.nav-item{font-size:16px}.nav-item:hover{background-color:#e0e0e0;border-bottom:5px solid #e91e63;line-height:42px}}.cover-avatar{animation:pop-up .5s cubic-bezier(.21,.15,.01,.9) 0s 1;background:#fff;border-radius:50%;display:inline-block;height:180px;width:180px}@media(min-width:567px){.cover-avatar{height:200px;width:200px}}.cover-avatar{border:6px solid #fff}.cover{background-attachment:fixed;background-size:cover;transition:opacity .5s}@media(min-width:0){.cover{height:50vh}}@media(min-width:567px){.cover{height:400px}}.cover .switch-language-container{position:absolute;right:2rem;top:1rem}@media(min-width:0){.cover-wrapper{padding-top:calc(50vh - 90px)}}@media(min-width:567px){.cover-wrapper{padding-top:100px}}.cover-wrapper h3{font-weight:600;opacity:.87}.cover-wrapper h6{font-weight:600;opacity:.54}@media(min-width:0){.cover-wrapper .name{margin-top:5vh}}@media(min-width:567px){.cover-wrapper .name{margin-top:10px}}footer{background-color:#000;color:#fff;height:52px;line-height:52px;text-align:center}.index .title{border-left:6px solid #e91e63;font-weight:600;letter-spacing:2px;padding:5px 5px 5px 24px}.index .social-button-link{color:#000;font-size:3rem;letter-spacing:2rem;transition:opacity .3s ease}.index .social-button-link:hover{color:#000;opacity:.6}.milestones{animation:dropdown .5s cubic-bezier(0,.66,.25,1) 0s 1;padding-bottom:50px;position:relative}.milestones:before{bottom:0;content:"";position:absolute;top:0;width:4px}@media(min-width:768px){.milestones:before{left:50px}}.milestones:before{background-color:#b5b5b5}.milestones:after{bottom:0;content:"";height:32px;left:-15px;position:absolute;width:32px}@media(min-width:768px){.milestones:after{left:36px}}.milestones:after{background-color:#ef6c00;border-radius:50%}.milestones .event{padding-left:30px;padding-top:24px;position:relative}.milestones .event span{color:#000000bf}@media(min-width:768px){.milestones .event{padding-left:100px}}.milestones .event:before{content:"";height:20px;left:-7px;position:absolute;width:20px}@media(min-width:768px){.milestones .event:before{left:42px}}.milestones .event:before{background-color:#0c8763;border-radius:50%}.milestones .event.big span{font-size:1.1rem}.milestones .event.big:before{height:32px;left:-14px;width:32px}@media(min-width:768px){.milestones .event.big:before{left:36px}}.milestones .event.big:before{background-color:#fff;border:5px solid #5b76c3}.gallery .item{position:relative;text-align:center}.gallery .item img{border:5px solid #424242;display:inline-block;height:162px;width:288px}.gallery .item .mask{background-color:#000000b3;height:162px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease;width:288px;z-index:1000}.gallery .item .mask .mask-overlay{padding:30px;position:relative;text-align:center;top:calc(50% - 90px)}.gallery .item .mask .mask-overlay .mask-text{color:#fff;font-size:14px;margin-bottom:10px;max-height:80px}.gallery .item .mask .mask-overlay .mask-icon{background-color:#fff;border:2px solid #666;border-radius:50%;color:#000;cursor:pointer;display:inline-block;font-size:18px;height:44px;line-height:100%;margin:3px;padding:10px;width:44px}.gallery .item .mask .mask-overlay .mask-icon a{color:#000}.gallery .item:active .mask,.gallery .item:hover .mask{opacity:1}.gallery .item.popup{animation:fade-in .2s ease 1;background-color:#000;height:120vh;left:0;position:fixed;top:0;width:100vw;z-index:1001}.gallery .item.popup img{height:162px;margin-top:calc(50vh - 181px);width:288px}@media(min-width:768px){.gallery .item.popup img{height:324px;margin-top:calc(50vh - 222px);width:576px}}@media(min-width:992px){.gallery .item.popup img{height:486px;margin-top:calc(50vh - 343px);width:864px}}.gallery .item.popup .mask{opacity:1;position:relative;width:100%}.gallery .item.popup .mask .mask-text{color:#fff;font-size:14px;text-align:center}.gallery .popup-close{color:#fff;cursor:pointer;font-size:48px}.skills .construction{font-size:128px;text-align:center}.skills .title{border-left:6px solid #e91e63;font-style:italic;font-weight:700;letter-spacing:2px;padding:5px 5px 5px 24px}.skills .card{box-shadow:0 1px 5px 0 #0003,0 2px 2px 0 #00000024,0 3px 1px -2px #0000001f;letter-spacing:1px}.skills .card .thumbnail{height:5rem;width:5rem}.skills .card.average{box-shadow:inset 0 0 0 2px #ffa726}.skills .card.fair{box-shadow:inset 0 0 0 2px #9e9e9e}@media(min-width:0){.skills .chart-container{height:90vw;width:90vw}}@media(min-width:567px){.skills .chart-container{height:400px;width:400px}}@media(min-width:768px){.skills .chart-container{height:600px;width:600px}}@media(min-width:992px){.skills .chart-container{height:800px;width:800px}}.skills .chart-container{height:1000px;margin:auto;width:1000px}.skills svg{display:block;margin:auto}.skills .circle-overlay{border-radius:50%;font-size:16px;overflow:hidden;position:absolute}.skills .circle-overlay__inner{height:100%;text-align:center;width:100%}.skills .circle-overlay__title{font-size:1rem;margin-top:1rem;text-align:center}@keyframes fade-in{0%{opacity:.2}to{opacity:1}}@keyframes pop-up{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes dropdown{0%{transform:translateY(-50%) scaleY(0)}to{transform:translateY(0) scaleY(1)}}@keyframes shake-head{0%{transform:translateX(0)}20%{transform:translateX(5px)}40%{transform:translateX(-5px)}60%{transform:translateX(5px)}80%{transform:translateX(-5px)}to{transform:translateX(0)}}@media(min-width:0){html{font-size:12px}}@media(min-width:768px){html{font-size:16px}}body{background:#eee;font-family:Kanit,sans-serif;overflow-x:hidden}a:focus,a:hover{text-decoration:none}h1{margin-bottom:20px;margin-top:20px}.main-content>*{animation:fade-in .5s ease 0s 1}.main-content{background-color:#fff;min-height:60vh}.chinese{font-family:Noto Sans TC,sans-serif,Roboto}.weight-light{font-weight:lighter}.weight-normal{font-weight:400}.weight-bold{font-weight:700}.weight-bolder{font-weight:bolder}.italic{font-style:italic}
/*# sourceMappingURL=main.8dddf22c.css.map*/