.blogPage{min-height:100vh}.blogPage .header{display:flex;justify-content:center;align-items:center;width:100%;height:300px;overflow:hidden}.blogPage .header img{width:100%;height:auto}.blogPage .pageContent{max-width:1400px}.blogPage .pageContent .pageTitle{padding:30px 10px;margin-right:15px}.blogPage .pageContent .pageTitle .mainTitle{font-size:2.4rem}.blogPage .pageContent .pageTitle .mainTitle svg{width:45px;height:45px;margin-right:12px}.blogPage .pageContent .pageTitle>span{margin-bottom:.55rem}.blogPage .pageContent .divider{width:100%;height:0;border-bottom:1px solid #d3d3d3}.blogPage .pageContent .tabButtonBar{display:flex;justify-content:center}.blogPage .pageContent .tabButtonBar .btn-tab{padding:12px 30px;border:1px solid var(--cyberstar-gray);margin:0 8px;border-radius:6px;background:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;transition:.3s}.blogPage .pageContent .tabButtonBar .btn-tab:hover{transform:scale(1.05)}.blogPage .pageContent .tabButtonBar .btn-tab.selected{background:var(--cyberstar-blue-btn-hover);color:#fff;border:1px solid var(--cyberstar-blue-btn)}.blogPage .pageContent .blogList .blog-item{border-radius:6px;padding-bottom:20px;overflow:hidden;transition:.3s;cursor:pointer}.blogPage .pageContent .blogList .blog-item .imageBox{position:relative;width:100%;line-height:0}.blogPage .pageContent .blogList .blog-item .imageBox>img{width:100%;height:auto}.blogPage .pageContent .blogList .blog-item .imageBox .overlay{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);opacity:0;transition:.3s}.blogPage .pageContent .blogList .blog-item .imageBox .overlay>svg{width:60px;height:60px;color:#fff}.blogPage .pageContent .blogList .blog-item .time{font-size:.85rem;color:var(--cyberstar-gray)}.blogPage .pageContent .blogList .blog-item .tag{padding:1px 5px;margin-right:5px;border-radius:4px;color:#fff;font-size:.85rem}.blogPage .pageContent .blogList .blog-item .tag-type-1{background:#82b019}.blogPage .pageContent .blogList .blog-item .tag-type-2{background:#d1ae29}.blogPage .pageContent .blogList .blog-item .tag-type-3{background:#8800a7}.blogPage .pageContent .blogList .blog-item .tag-type-4{background:#667638}.blogPage .pageContent .blogList .blog-item .title{font-size:1.3rem;font-weight:700;transition:.2s}.blogPage .pageContent .blogList .blog-item .text{transition:.3s}.blogPage .pageContent .blogList .blog-item .article-divider{width:60%;border-bottom:1px solid var(--mui-palette-grey-300);transition:.2s}.blogPage .pageContent .blogList .blog-item .read{font-size:.9rem;transition:.2s}.blogPage .pageContent .blogList .blog-item:hover{transform:scale(1.05)}.blogPage .pageContent .blogList .blog-item:hover .imageBox .overlay{opacity:1}.blogPage .pageContent .blogList .blog-item:hover .title{color:var(--cyberstar-blue-btn)}.blogPage .pageContent .blogList .blog-item:hover .text{color:var(--mui-palette-grey-600)}.blogPage .pageContent .blogList .blog-item:hover .article-divider{width:80%}.blogPage .pageContent .blogList .blog-item:hover .read{color:var(--cyberstar-blue-btn-hover)}@media screen and (max-width:768px){.blogPage .pageContent .tabButtonBar{justify-content:start;flex-wrap:wrap}.blogPage .pageContent .tabButtonBar .btn-tab{min-width:120px;padding:8px 10px;margin:0 5px 8px 0}}.btn-goTop{display:flex;justify-content:center;align-items:center;position:fixed;bottom:5px;right:10px;width:50px;height:50px;border-radius:999px;background:var(--cyberstar-blue-btn);cursor:pointer;color:#fff;opacity:0;pointer-events:none;transition:.2s;transform:rotate(-180deg)}.btn-goTop svg{width:70%;height:70%;transition:.2s}.btn-goTop:hover{background:var(--cyberstar-blue-btn-hover);transform:scale(1.05)}.btn-goTop:hover svg{margin-bottom:8px}.btn-goTop.show{opacity:1;bottom:15px;pointer-events:auto;transform:rotate(0deg)}.loading{display:flex;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.3rem;color:#fff;opacity:.5}.btn-mainMenu{position:fixed;top:15px;right:10px;width:45px;height:45px;padding:8px;border:0;border-radius:4px;background-color:rgba(0,0,0,.6);cursor:pointer;z-index:99999}.btn-mainMenu,.btn-mainMenu .icon-mainMenu,.btn-mainMenu .icon-mainMenu-close{transition:.3s}.btn-mainMenu .icon-mainMenu-close.disable,.btn-mainMenu .icon-mainMenu.disable{display:none}.btn-mainMenu:hover .icon-mainMenu,.btn-mainMenu:hover .icon-mainMenu-close{transform:scale(1.05)}.overlay{position:fixed;width:100%;height:100%;pointer-events:none;z-index:100;transition:.3s}.overlay.show{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto}.mainMenu{display:flex;flex-direction:column;position:fixed;top:0;right:-270px;width:270px;height:100%;padding:30px 25px;background-color:rgba(0,0,0,.8);color:#fff;z-index:99998;transition:.2s}.mainMenu.show{right:0}.mainMenu .title{font-size:1.6rem;margin-bottom:15px}.mainMenu .menuItem{display:flex;align-items:center;width:100%;min-width:220px;padding:15px 0;margin:5px 0;font-size:1.2rem;color:#fff;text-decoration:none;cursor:pointer;transition:.2s}.mainMenu .menuItem:after{content:"";display:block;position:absolute;left:0;bottom:0;width:0;height:0;border-bottom:1px solid #fff;transition:.2s}.mainMenu .menuItem:hover{transform:scale(1.05)}.mainMenu .menuItem:hover:after{width:60%}.mainMenu .menuItem svg{margin-right:15px}.footer{position:relative;width:100%;padding:15px 10px;background:var(--cyberstar-black);color:#fff;overflow:visible}.footer:before{content:"";display:block;position:absolute;bottom:100%;left:calc(50% - 30px);width:0;height:0;border-style:solid;border-width:0 30px 20px;border-color:transparent transparent var(--cyberstar-black) transparent}