.nav{width:150px;font-size:14px;text-decoration:none;letter-spacing:1px;left:30px;top:150px}.nav,.nav .logo{display:inline-block;position:fixed}.nav .logo{top:0;left:0;font-size:80px;margin:0 20px;color:#00f883}.nav .logo,.nav a{vertical-align:middle}.nav a{color:hsla(0,0%,100%,.5);text-decoration:none;margin:10px;padding:8px 10px;-webkit-box-sizing:border-box;box-sizing:border-box;text-transform:uppercase;-webkit-transition:all .5s;transition:all .5s;display:inline-block;text-align:left}.nav a:hover{color:#00f883;-webkit-transform:rotate(5deg) scale(1.1);transform:rotate(5deg) scale(1.1)}.nav a:hover:after,.nav a:hover:before{-webkit-transition:all .3s ease;transition:all .3s ease;opacity:1;width:10px}.nav a:after,.nav a:before{opacity:0;border-top:1px solid #00f883;content:"";display:block;position:relative;z-index:-1;margin:auto;width:0;top:0}.nav a:before{-webkit-transform:rotate(120deg) translateY(-50%) translateX(-50%);transform:rotate(120deg) translateY(-50%) translateX(-50%)}.nav a:after{-webkit-transform:rotate(-60deg) translateY(-50%) translateX(-50%);transform:rotate(-60deg) translateY(-50%) translateX(-50%)}.nav .router-link-exact-active{color:#00f883;-webkit-transform:rotate(5deg) scale(1.1);transform:rotate(5deg) scale(1.1)}.nav .router-link-exact-active:after,.nav .router-link-exact-active:before{transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;opacity:1;width:10px}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:80px}.lang{position:fixed!important;top:20px;right:20px}.lang i{cursor:pointer;margin-right:5px;display:inline-block;color:hsla(0,0%,100%,.5);font-size:45px}.lang .active{color:#00f883;opacity:1}.transitionRouter-enter-active{-webkit-transition:all .5s ease;transition:all .5s ease}.transitionRouter-leave-active{-webkit-transition:all 0s ease;transition:all 0s ease}.transitionRouter-enter,.transitionRouter-leave{opacity:0}.benan{position:fixed;bottom:30px;width:100%;text-align:center}.benan,.benan a{color:#fff}.welcome{width:930px;margin:200px auto;font-size:200px;position:relative;text-transform:uppercase}.welcome div{display:inline-block;text-shadow:15px 15px 0 rgba(0,0,0,.1);color:#f5f5f5;position:absolute;-webkit-transition:all .2s;transition:all .2s}.welcome div:hover{-webkit-transform:scale(1.2);transform:scale(1.2);color:#00f883;cursor:none}.welcome .w{left:0;top:0;font-size:200px}.welcome .e{left:180px;top:50px;font-size:150px;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}.welcome .l{left:280px;top:-50px;font-size:250px;-webkit-transform:rotate(15deg);transform:rotate(15deg)}.welcome .c{left:380px;top:20px;font-size:180px;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.welcome .o{left:500px;top:50px;font-size:150px;-webkit-transform:rotate(15deg);transform:rotate(15deg)}.welcome .m{left:600px;top:-60px;font-size:250px;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}.welcome .ex{left:800px;top:50px;font-size:160px;-webkit-transform:rotate(15deg);transform:rotate(15deg)}.fed{width:100%;margin-top:80px}.fed .effect{display:inline-block;margin:0 1px;position:relative}.fed .effect span{display:inline-table;background:#00f883;padding:2px 12px;font-size:30px;text-shadow:1px 0 0 #555;text-transform:uppercase;color:#fff;font-weight:500;-webkit-transition:all .2s;transition:all .2s;-webkit-transform:skewY(-15deg);transform:skewY(-15deg);-webkit-transform-origin:0 0;transform-origin:0 0}.fed .effect span:nth-child(2n){-webkit-transform:skewY(15deg);transform:skewY(15deg);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;background:rgba(0,248,131,.5)}.fed .effect:nth-child(2n){top:-11px}.fed .effect:nth-child(2n) span{-webkit-transform:skewY(15deg);transform:skewY(15deg)}.fed .effect:nth-child(2n) span:nth-child(2n){-webkit-transform:skewY(-15deg);transform:skewY(-15deg)}.aboutMe{margin-top:20px;width:100%;text-align:center;position:relative}.aboutMe .labelTag{width:5px;height:5px;position:absolute;left:50%;margin-left:-250px}.aboutMe .labelTag span{position:absolute;color:#fff;display:inline-block;letter-spacing:1px}.aboutMe .labelTag span:hover{-webkit-animation:swing .5s;animation:swing .5s;cursor:default}.aboutMe .labelTag .js{font-size:30px;right:-510px;top:100px;opacity:.3}.aboutMe .labelTag .css{font-size:45px;right:-510px;top:-50px;color:#00f883;opacity:.8}.aboutMe .labelTag .wp{font-size:28px;right:-460px;top:30px;opacity:.3}.aboutMe .labelTag .node{font-size:25px;right:-560px;top:45px;opacity:.3}.aboutMe .labelTag .vue{font-size:35px;left:-60px;top:20px;color:#00f883;opacity:.6}.aboutMe .labelTag .h5{font-size:40px;left:-30px;top:80px;opacity:.3}.aboutMe .labelTag .canvas{font-size:30px;left:40px;top:-50px;opacity:.3}.aboutMe .labelTag .sass{font-size:22px;left:90px;top:20px;opacity:.5}.aboutMe .header{width:150px;height:150px;overflow:hidden;display:inline-block;border-radius:100%;border:5px solid #00f883}.aboutMe .header img{width:100%}.aboutMe .header:hover{-webkit-animation:swing .8s;animation:swing .8s}.aboutMe .info{width:50%;margin:0 auto;position:relative;padding-top:80px}.aboutMe .info:before{position:absolute;content:"";display:block;width:5px;height:370px;left:50%;top:-5px;background:#00f883}.aboutMe .info dd,.aboutMe .info dl,.aboutMe .info dt{padding:0;margin:0}.aboutMe .info dd,.aboutMe .info dt{display:inline-block;width:48%;-webkit-box-sizing:border-box;box-sizing:border-box}.aboutMe .info dl{display:block;font-size:16px;line-height:50px;height:50px;-webkit-transition:all .5s;transition:all .5s;color:#fff}.aboutMe .info dl:hover{font-size:20px;color:#00f883}.aboutMe .info dl:hover dd i{font-size:40px;color:#00f883}.aboutMe .info dt{text-align:right;padding-right:30px}.aboutMe .info dd{text-align:left;padding-left:30px}.aboutMe .info dd i{font-size:30px;margin-right:5px;vertical-align:middle;-webkit-transition:all .5s;transition:all .5s}.f2e{-webkit-transform:scale(1.5);transform:scale(1.5);width:220px;height:220px;border-radius:100%;background:#42b983;position:relative;margin:0 auto;margin-top:245px;font-size:80px;font-weight:700;-webkit-box-sizing:content-box;box-sizing:content-box;color:#4d5a5f;vertical-align:middle;line-height:180px}.f2e,.f2e span{text-align:center}.f2e span{width:100%;font-size:20px;line-height:20px;position:absolute;top:140px;left:0;display:block;font-weight:400}.f2e .shine{width:250px;height:250px;border-radius:100%;background:#fff;opacity:0;margin-top:-125px;margin-left:-125px;-webkit-animation:zoomIns 2s linear 0s infinite;animation:zoomIns 2s linear 0s infinite;z-index:-1}.f2e .shine,.f2e:before{position:absolute;left:50%;top:50%}.f2e:before{width:350px;height:350px;border-radius:100%;border:2px dashed #00f883;margin-top:-175px;margin-left:-175px;-webkit-animation:rotatingTwo 100s linear 0s infinite;animation:rotatingTwo 100s linear 0s infinite}.f2e:after,.f2e:before{content:"";display:block}.f2e:after{width:500px;height:500px;border-radius:100%;border:2px dotted rgba(66,185,131,.5);position:absolute;left:50%;top:50%;margin-top:-250px;margin-left:-250px;-webkit-animation:rotating 100s linear 0s infinite;animation:rotating 100s linear 0s infinite}.f2e .round{position:absolute;z-index:2}.f2e .rounda{width:150px;height:150px;line-height:150px;border-radius:150px;left:270px;top:-80px;font-size:35px;background:#42b983;color:#fff}.f2e .roundb{width:80px;height:80px;line-height:80px;border-radius:80px;left:-170px;top:0;font-size:25px;background:#4c585d;border:2px dotted #00f883;color:#fff}.f2e .roundc{width:100px;height:100px;line-height:100px;border-radius:100px;left:0;top:300px;font-size:22px;background:rgba(27,178,231,.5);color:#fff}.f2e .roundd{width:60px;height:60px;line-height:60px;border-radius:60px;left:-80px;top:150px;font-size:18px;background:#2c3e50;color:#fff;font-weight:400}.f2e .rounde{width:75px;height:75px;line-height:75px;border-radius:75px;left:270px;top:150px;font-size:18px;border:2px dashed #00f883;color:#00f883}.f2e .roundf{width:50px;height:50px;line-height:50px;border-radius:50px;left:80px;top:-90px;font-size:18px;background:#42b983;color:#fff}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes rotatingTwo{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes rotatingTwo{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}}@-webkit-keyframes zoomIns{0%{-webkit-transform:scale(1);transform:scale(1);opacity:.2}to{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0}}@keyframes zoomIns{0%{-webkit-transform:scale(1);transform:scale(1);opacity:.2}to{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0}}.main-timeline{font-family:Roboto,sans-serif;padding:20px 0;position:relative}.main-timeline:after,.main-timeline:before{content:"";height:40px;width:40px;background-color:#e7e7e7;border-radius:50%;border:10px solid #303334;-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute;left:50%;top:-15px;z-index:2}.main-timeline:after{top:auto;bottom:15px}.main-timeline .timeline{padding:35px 0;margin-top:-30px;position:relative;z-index:1}.main-timeline .timeline:after,.main-timeline .timeline:before{content:"";height:100%;width:50%;border-radius:150px 0 0 150px;border:15px solid #46b2bc;border-right:none;position:absolute;left:0;top:0;z-index:-1}.main-timeline .timeline:before{background-image:-webkit-gradient(linear,left top,left bottom,from(#6b7e84),to(#3d464b));background-image:linear-gradient(#6b7e84,#3d464b);opacity:.6}.main-timeline .timeline:after{height:calc(100% - 30px);width:calc(50% - 12px);border-color:#65c7d0;left:12px;top:15px}.main-timeline .timeline:nth-child(2n):before{left:auto;right:0;border-radius:0 150px 150px 0;border:15px solid red;border-left:none}.main-timeline .timeline:nth-child(2n):after{left:auto;right:12px;border:15px solid green;border-left:none;border-radius:0 150px 150px 0}.main-timeline .timeline-content{display:inline-block}.main-timeline .timeline-content:hover{text-decoration:none}.main-timeline .timeline-year{color:#65c7d0;font-size:40px;font-weight:600;display:inline-block;-webkit-transform:translateY(-50%);transform:translateY(-50%);position:absolute;top:50%;left:10%}.main-timeline .content{color:#909090;width:50%;padding:20px;display:inline-block;float:right}.main-timeline .title{color:#65c7d0;font-size:22px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0 0 5px 0}.main-timeline .description{font-size:15px;letter-spacing:1px;margin:0;color:hsla(0,0%,100%,.8)}.main-timeline .timeline:nth-child(2n) .content{float:left}.main-timeline .timeline:nth-child(2n) .timeline-year{left:auto;right:10%}.main-timeline .timeline:nth-child(5n+2):before{border-color:#42b983}.main-timeline .timeline:nth-child(5n+2):after{border-color:#33ca86}.main-timeline .timeline:nth-child(5n+2) .timeline-year,.main-timeline .timeline:nth-child(5n+2) .title{color:#42b983}.main-timeline .timeline:nth-child(5n+3):before{border-color:#00f883}.main-timeline .timeline:nth-child(5n+3):after{border-color:#20f883}.main-timeline .timeline:nth-child(5n+3) .timeline-year,.main-timeline .timeline:nth-child(5n+3) .title{color:#00f883}.main-timeline .timeline:nth-child(5n+4):before{border-color:#ff6}.main-timeline .timeline:nth-child(5n+4):after{border-color:#eaea83}.main-timeline .timeline:nth-child(5n+4) .timeline-year,.main-timeline .timeline:nth-child(5n+4) .title{color:#ff6}.main-timeline .timeline:nth-child(5n+5):before{border-color:#0071bd}.main-timeline .timeline:nth-child(5n+5):after{border-color:#0050a3}.main-timeline .timeline:nth-child(5n+5) .timeline-year,.main-timeline .timeline:nth-child(5n+5) .title{color:#0071bd}.waterFallBox{width:calc(100% - 400px);margin-left:250px}.process-box{width:100%;height:450px;margin-top:-30px}.process-box ul{width:1140px}.process-box ul .two li{margin-top:-40px}.process-box ul li{width:196px;height:196px;float:left;cursor:pointer;position:relative;margin-right:89px}.process-box ul li .box{position:absolute;width:196px;height:196px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border:1px solid #ddd;margin-top:42px;margin-left:42px}.process-box ul li .boxa{top:0;left:0;z-index:1;border:1px solid #00f883;opacity:.1}.process-box ul li .boxb{left:10px;top:0;z-index:2;border:1px solid #00f883;background-image:url(../img/bg.c880a384.png)}.process-box ul li .texta{width:276px;height:276px;text-align:center;z-index:3;position:absolute;left:7px;top:2px}.process-box ul li .texta .num{margin-top:50px;font-size:90px;color:#00f883;display:inline-block}.process-box ul li .texta .title{font-size:20px;color:#00f883}.process-box ul li .textb{width:276px;height:276px;z-index:4;position:absolute;left:5px;top:0;display:none}.process-box ul li .textb .mengban{border:1px solid #42b983;position:absolute;z-index:1;width:196px;height:196px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:#42b983;margin-top:42px;margin-left:47px}.process-box ul li .textb .desc{position:absolute;z-index:2;width:160px;top:85px;left:60px;font-size:14px;color:#fff;text-align:center;line-height:24px}.process-box ul li .textb .desc .toUrl{display:table;margin:10px auto;padding:2px 10px;border:1px dashed #fff;border-radius:5px;color:#fff}.process-box ul li .textb .desc .toUrl:hover{background:#fff;color:#42b983}.process-box ul li:hover .textb{-webkit-animation:flipInX .8s;animation:flipInX .8s;display:block}*,body,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,ul{margin:0;padding:0}li{list-style-type:none}img{vertical-align:top;border:0}ol,ul{list-style:none}body{font-family:Helvetica Neue,Helvetica,serif;background-image:-webkit-gradient(linear,left top,left bottom,from(#3d464b),to(#6b7e84));background-image:linear-gradient(#3d464b,#6b7e84);background-attachment:fixed;width:100%;height:100%;color:#2c3e50}.bgNum{color:#fff;font-size:500px;position:fixed;z-index:-1;opacity:.08;top:0;right:0;bottom:0;left:0}.content{width:1000px;height:100%;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box}.waterfall{width:98%;margin:1em auto}.waterfall .list{-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:1em;-moz-column-gap:1em;column-gap:1em}.waterfall .list .item{padding:1em;margin:0 0 1em 0;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);-webkit-transition:all .2s;transition:all .2s;border-radius:10px;color:#fff;font-size:15px;font-family:Arial,Helvetica,sans-serif}.waterfall .list .item:hover{background:hsla(0,0%,100%,.3)}.waterfall .list .item img{width:100%;margin-bottom:1em}