*{margin:0;padding:0;font-family:Microsoft JhengHei,Noto Sans TC,sans-serif}body,html{height:100%;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@font-face{font-family:keepCalm;src:url(../fonts/KeepCalm-Medium.52c3a1cf.ttf)}#hero,#hero #name{height:100vh}#hero #name{background-color:#cef;color:#8cd;font-size:3px;position:relative;overflow:hidden}#hero #name .dots{position:absolute;width:700px;height:40%;background-color:transparent;color:#fff;bottom:25%;right:5%}#hero #name h1{font-size:80px;top:50%;color:#fff}#hero #name h1,#hero #name p{position:absolute;left:30%;font-family:keepCalm}#hero #name p{font-size:12px;top:62%;color:#1e3273;padding-left:6px}#hero #name .title{position:absolute;top:20%;right:18%;height:1100px;width:1100px;border-radius:100%;background:linear-gradient(180deg,#92b1eb,transparent 65%);color:#fff;font-size:40px;font-weight:800}#hero #name .arrow{width:100%;position:absolute;bottom:5%;transition:.4s;animation:up-down .6s ease-in-out infinite alternate-reverse both}#hero #name .arrow .fas{width:18px;color:#000;margin:auto;font-size:24px}@-webkit-keyframes up-down{0%{transform:translateY(5px)}to{transform:translateY(-5px)}}@keyframes up-down{0%{transform:translateY(5px)}to{transform:translateY(-5px)}}#app{width:100%;height:100vh;background:#fff}#app a{font-weight:700;color:#2c3e50}#app a.router-link-exact-active{color:#42b983}#main-content{height:100%;width:100%;position:relative}*{list-style:none;box-sizing:border-box}.active{color:red}#navbar{width:60%;position:fixed;left:calc(50% - 515px);background-color:#fff;border-radius:0 0 12px 12px;z-index:2;transition:1s}#navbar ul{height:60px;display:flex;justify-content:center;align-items:center;margin:0}#navbar ul li{margin:0 22px;padding:6px 0;font-size:14px;letter-spacing:1px;transition:.2s;color:#180059;transition-timing-function:all ease-in;position:relative}#navbar ul li:hover{color:#ef7d60;position:relative;cursor:pointer}#navbar ul li:hover a{color:#ef7d60}#navbar ul li:before{content:"";position:absolute;bottom:-1px;width:100%;height:0;color:#fff;transition:.2s}#navbar ul li:hover:before{height:1px;background:#fff}#navbar ul li a{color:#180059;text-decoration:none}#navbar ul li a:hover{color:#ef7d60}@media(max-width:576px){#navbar{width:100%;position:fixed;left:0;right:0;bottom:0;z-index:8;border-radius:0;background-color:#fff}#navbar li{margin:0 10px!important;display:flex;justify-content:center;align-items:center;flex-direction:column-reverse}#navbar a{font-size:8px}}@media(min-width:576px){.fai{display:none}}#about{height:auto;text-align:center;padding:70px;position:relative}#about:before{background:#cef;width:45%;height:380px;right:160px;top:290px;z-index:-2}#about:after,#about:before{content:"";position:absolute}#about:after{background:#ffd0b0;width:30%;height:120px;right:480px;top:230px;z-index:-1}#about h2{margin:30px}#about h5{font-weight:700}#about p{letter-spacing:1px}#about .pic{width:300px;height:500px;margin:auto;position:relative}#about .pic .pic-wrap{width:100%;height:100%;overflow:hidden}#about .pic .pic-wrap img{width:100%}#about .pattern-diagonal-lines-sm{width:300px;height:500px;top:22px;left:-30px;position:absolute;background-color:#fff;color:#ffd0b0;z-index:-1}#about .block{margin:30px 0}#about .intro{padding:50px 0;text-align:left}@media(max-width:576px){#about .pic{width:250px}#about .pattern-diagonal-lines-sm{width:250px;height:430px}}#skill{padding:80px}#skill li{position:relative;margin:0 20px}#skill li:before{content:"";position:absolute;width:6px;height:6px;border-radius:3px;background:#000;left:-15px;top:40%}#skill h2{text-align:center;margin-bottom:90px;position:relative}#skill h2:before{content:"//";position:absolute;top:8px;left:45%;font-size:17px}#skill h2:after{content:"";position:absolute;bottom:-5px;right:45%;width:10%;height:30px;background:#cef;transform:skewX(-20deg);z-index:-1}#skill h5{font-weight:700;margin-bottom:20px}#skill .row{width:76%;margin:auto}#skill .col-12{display:flex;justify-content:center}#resume{background:#fff;text-align:center;padding:80px 0}#resume h2{margin:30px}#resume .row{width:100%;padding:50px 15%;text-align:left}#resume .row .col-12{margin:20px 0}#portfolio{text-align:center;padding:80px 0}#portfolio h2{padding:30px}#portfolio .row{padding:0 10%;justify-content:center;margin:0}#portfolio .row h5{font-weight:700;margin:15px 0}#portfolio .row p{font-size:14px}#portfolio .box{width:100%}#portfolio .card{width:320px;height:380px;border-radius:8px;overflow:hidden;margin:10px}#portfolio .card .img{width:100%;height:45%;overflow:hidden}#portfolio .card .img img{transition:.7s}#portfolio .card .img:hover img{transform:scale(1.07)}#portfolio .card .text{height:60%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}#portfolio .card .text .btn1{width:80px;height:28px;line-height:28px;border-radius:5px;background:#000;color:#fff;cursor:pointer}#footer{height:10vh;line-height:10vh;background:#404040;color:#888;text-align:center}#footer p{margin:0}