.typewriter[data-v-f3018257]{--blue:#1cb19d;--blue-dark:#167c6f;--key:#fff;--paper:#eef0fd;--text:#d3d4ec;--tool:#fbc56c;--duration:3s;animation:bounce05-f3018257 var(--duration) linear infinite;position:relative;text-align:center}.typewriter>p[data-v-f3018257]{color:#888;font-size:14px;margin-top:10px}.typewriter .slide[data-v-f3018257]{animation:slide05-f3018257 var(--duration) ease infinite;background:linear-gradient(var(--blue),var(--blue-dark));border-radius:3px;height:20px;margin-left:14px;transform:translate(14px);width:92px}.typewriter .slide i[data-v-f3018257]:before,.typewriter .slide[data-v-f3018257]:after,.typewriter .slide[data-v-f3018257]:before{background:var(--tool);content:"";position:absolute}.typewriter .slide[data-v-f3018257]:before{height:8px;left:100%;top:6px;width:2px}.typewriter .slide[data-v-f3018257]:after{border-radius:3px;height:14px;left:94px;top:3px;width:6px}.typewriter .slide i[data-v-f3018257]{background:var(--tool);display:block;height:4px;position:absolute;right:100%;top:4px;width:6px}.typewriter .slide i[data-v-f3018257]:before{border-radius:2px;height:14px;right:100%;top:-2px;width:4px}.typewriter .paper[data-v-f3018257]{animation:paper05-f3018257 var(--duration) linear infinite;background:var(--paper);border-radius:5px;height:46px;left:24px;position:absolute;top:-26px;transform:translateY(46px);width:40px}.typewriter .paper[data-v-f3018257]:before{background:var(--text);border-radius:2px;box-shadow:0 12px 0 var(--text),0 24px 0 var(--text),0 36px 0 var(--text);content:"";height:4px;left:6px;position:absolute;right:6px;top:7px;transform:scaleY(.8)}.typewriter .keyboard[data-v-f3018257]{height:56px;margin-top:-10px;position:relative;width:120px;z-index:1}.typewriter .keyboard[data-v-f3018257]:after,.typewriter .keyboard[data-v-f3018257]:before{content:"";position:absolute}.typewriter .keyboard[data-v-f3018257]:before{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:7px;bottom:0;left:0;right:0;top:0;transform:perspective(10px) rotateX(2deg);transform-origin:50% 100%}.typewriter .keyboard[data-v-f3018257]:after{animation:keyboard05-f3018257 var(--duration) linear infinite;border-radius:2px;box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key);height:4px;left:2px;top:25px;width:11px}@keyframes bounce05-f3018257{85%,92%,to{transform:translateY(0)}89%{transform:translateY(-4px)}95%{transform:translateY(2px)}}@keyframes slide05-f3018257{5%{transform:translate(14px)}15%,30%{transform:translate(6px)}40%,55%{transform:translate(0)}65%,70%{transform:translate(-4px)}80%,89%{transform:translate(-12px)}to{transform:translate(14px)}}@keyframes paper05-f3018257{5%{transform:translateY(46px)}20%,30%{transform:translateY(34px)}40%,55%{transform:translateY(22px)}65%,70%{transform:translateY(10px)}80%,85%{transform:translateY(0)}92%,to{transform:translateY(46px)}}@keyframes keyboard05-f3018257{12%,21%,30%,39%,48%,5%,57%,66%,75%,84%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}9%{box-shadow:15px 2px 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}18%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 2px 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}27%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 12px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}36%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 12px 0 var(--key),60px 12px 0 var(--key),68px 12px 0 var(--key),83px 10px 0 var(--key)}45%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 2px 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}54%{box-shadow:15px 0 0 var(--key),30px 2px 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}63%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 12px 0 var(--key)}72%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 2px 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}81%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 12px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}}.blog-container[data-v-f5a4891f]{align-items:flex-start;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;margin:50px auto;max-width:1200px;padding:0 10px;width:100%}.left-card-container[data-v-f5a4891f]{position:sticky;position:-webkit-sticky;top:100px;width:300px}.left-card-container>div[data-v-f5a4891f]{border-radius:6px;box-shadow:0 0 6px 1px var(--color-shadow);box-sizing:border-box;margin-bottom:30px;padding:20px}.left-card-container>div>p[data-v-f5a4891f]{font-size:20px;font-weight:600;margin-bottom:20px}.left-card-container .big-sort[data-v-f5a4891f]{animation:bottomIn .8s}.left-card-container .big-sort>div[data-v-f5a4891f]{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.left-card-container .big-sort>div>span[data-v-f5a4891f]:first-child{font-size:20px;font-weight:600}.left-card-container .big-sort>div>span[data-v-f5a4891f]:nth-child(2){font-size:14px;transition:.3s}.left-card-container .big-sort>div>span[data-v-f5a4891f]:nth-child(2):hover{color:var(--color-main)}.left-card-container .big-sort>ul>li[data-v-f5a4891f]{align-items:center;border-bottom:1px solid var(--color-border);border-radius:6px;box-sizing:border-box;display:flex;justify-content:space-between;margin:16px 0;padding:10px;transition:.3s}.left-card-container .big-sort>ul>li>span[data-v-f5a4891f]{align-items:center;display:flex}.left-card-container .big-sort>ul>li>span>p[data-v-f5a4891f]{font-size:16px;margin-left:10px}.left-card-container .big-sort>ul>li[data-v-f5a4891f]:hover{background-color:var(--color-main);color:var(--color-hover-font);padding:10px 20px}.left-card-container .big-sort>ul>li>p[data-v-f5a4891f]{font-size:14px}.left-card-container .acticle-time-sort[data-v-f5a4891f]{animation:bottomBigIn .8s}.left-card-container .acticle-time-sort>ul>li[data-v-f5a4891f]{align-items:center;border-bottom:1px solid var(--color-border);border-radius:6px;box-sizing:border-box;display:flex;justify-content:space-between;margin:16px 0;padding:10px;transition:.3s}.left-card-container .acticle-time-sort>ul>li[data-v-f5a4891f]:hover{background-color:var(--color-main);color:var(--color-hover-font);padding:10px 20px}.right-acticle-container[data-v-f5a4891f]{animation:rightIn .8s;border-radius:6px;box-shadow:0 0 6px 1px var(--color-shadow);box-sizing:border-box;padding:30px;width:calc(100% - 340px)}.right-acticle-container .acticle-list-wrap[data-v-f5a4891f]{border-left:2px solid var(--color-main);box-sizing:border-box;padding-left:30px;padding-top:2px}.right-acticle-container .acticle-list-wrap>h1[data-v-f5a4891f]{font-size:26px;font-weight:500;margin-top:-12px;position:relative}.right-acticle-container .acticle-list-wrap>h1[data-v-f5a4891f]:before{background:var(--color-bg);border:6px solid var(--color-main);border-radius:50%;content:"";height:10px;left:-42px;position:absolute;top:50%;transform:translateY(-50%);transition:.3s;width:10px}.right-acticle-container .acticle-list-wrap>li[data-v-f5a4891f]{margin:50px 0}.right-acticle-container .acticle-list-wrap>li .acticle-time[data-v-f5a4891f]{font-size:14px;position:relative}.right-acticle-container .acticle-list-wrap>li .acticle-time[data-v-f5a4891f]:before{background:var(--color-bg);border:2px solid var(--color-main);border-radius:50%;content:"";height:8px;left:-37px;position:absolute;top:44%;transform:translateY(-50%);transition:.3s;width:8px}.right-acticle-container .acticle-list-wrap>li .acticle-title[data-v-f5a4891f]{display:block;font-size:16px;margin-top:10px;transition:.3s}.right-acticle-container .acticle-list-wrap>li:hover .acticle-time[data-v-f5a4891f]:before{border-color:var(--color-list-border-before)}.right-acticle-container .acticle-list-wrap>li:hover .acticle-title[data-v-f5a4891f]{color:var(--color-main);transform:translate(10px)}.select-tag[data-v-f5a4891f]{background-color:var(--color-main);color:#fff}@media screen and (max-width:768px){.blog-container[data-v-f5a4891f]{margin-top:0}.left-card-container[data-v-f5a4891f]{position:static}.left-card-container .acticle-time-sort[data-v-f5a4891f],.left-card-container .big-sort[data-v-f5a4891f]{animation:fade-in-out .8s ease-in-out}.left-card-container[data-v-f5a4891f],.right-acticle-container[data-v-f5a4891f]{width:100%}.right-acticle-container[data-v-f5a4891f]{animation:fade-in-out .8s ease-in-out}}