From 486a3ee2c6981cacdbc751cd0e7daa749210a900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=9C=E6=81=92?= <2323333339@qq.com>
Date: Tue, 2 Mar 2021 20:31:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/joe.global.css  |    2 +-
 assets/css/joe.global.scss | 6041 ++++++++++++++++++------------------
 core/function.php          |    2 +-
 functions.php              |   15 +-
 public/aside.php           |    6 +
 5 files changed, 3052 insertions(+), 3014 deletions(-)

diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index 76c302f..dc80099 100644
--- a/assets/css/joe.global.css
+++ b/assets/css/joe.global.css
@@ -1 +1 @@
-.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 var(--radius-inner) var(--radius-inner);padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above{position:relative;z-index:999;background:var(--background)}.joe_header__above .joe_container{align-items:center}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;z-index:2;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:var(--radius-inner);visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 10px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:2px;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:5px}.joe_header__above-searchicon,.joe_header__above-slideicon{display:none;width:20px;height:20px;fill:var(--routine);cursor:pointer}.joe_header__above-searchicon{margin-left:auto}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;z-index:1;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_header__searchout{position:absolute;top:60px;left:0;right:0;z-index:890;background:var(--background);border-top:1px solid var(--classC);-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;visibility:hidden}.joe_header__searchout.active{visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_header__searchout-inner{padding:15px 0;width:100%}.joe_header__searchout-inner .search{width:100%;display:flex;align-items:center}.joe_header__searchout-inner .search input{flex:1;height:36px;padding:0 10px;border:1px solid var(--classB);border-right:none;border-radius:2px 0 0 2px;color:var(--routine);background:var(--classD)}.joe_header__searchout-inner .search button{padding:0 10px;height:36px;border:none;background:var(--theme);color:#fff;border-radius:0 2px 2px 0}.joe_header__searchout-inner .title{color:var(--routine);padding:15px 0 10px;font-size:16px;display:flex;align-items:center}.joe_header__searchout-inner .title .icon{width:22px;height:22px;fill:var(--routine);margin-right:5px}.joe_header__searchout-inner .cloud{display:flex;flex-wrap:wrap;margin:0 -5px -5px}.joe_header__searchout-inner .cloud .item{padding:5px}.joe_header__searchout-inner .cloud .item a{display:block;padding:0 10px;height:24px;line-height:24px;border-radius:2px;font-size:12px;color:#fff}.joe_header__slideout{position:fixed;top:0;bottom:0;left:0;width:80%;z-index:1020;background:var(--classD);-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);visibility:hidden;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;overflow-y:auto;padding:135px 15px 15px}.joe_header__slideout::-webkit-scrollbar{display:none}.joe_header__slideout.active{visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_header__slideout-image{position:absolute;top:0;left:0;width:100%;height:150px;-o-object-fit:cover;object-fit:cover;z-index:-1}.joe_header__slideout-author{display:flex;margin-bottom:15px;background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow)}.joe_header__slideout-author .avatar{width:50px;height:50px;margin-right:10px;border-radius:var(--radius-inner)}.joe_header__slideout-author .info{overflow:hidden;line-height:25px}.joe_header__slideout-author .info .link,.joe_header__slideout-author .info .motto{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.joe_header__slideout-author .info .link{display:block;font-size:15px;font-weight:500;color:var(--main)}.joe_header__slideout-author .info .motto{font-size:12px;color:var(--routine)}.joe_header__slideout-count{background:var(--background);border-radius:var(--radius-wrap);padding:10px 15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_header__slideout-count .item{display:flex;align-items:center;color:var(--routine);padding:5px 0}.joe_header__slideout-count .item .icon{width:15px;height:15px;fill:var(--routine);margin-right:5px}.joe_header__slideout-count .item strong{font-weight:500;color:var(--theme)}.joe_header__slideout-menu{background:var(--background);padding:10px 15px;border-radius:var(--radius-wrap);overflow:hidden;box-shadow:var(--box-shadow)}.joe_header__slideout-menu .link{display:flex;align-items:center;justify-content:space-between;padding:10px 0;color:var(--main);transition:color 0.15s}.joe_header__slideout-menu .link a{transition:color 0.15s;color:var(--routine)}.joe_header__slideout-menu .link .icon{width:13px;height:13px;fill:var(--minor);transition:fill 0.15s, -webkit-transform 0.15s;transition:transform 0.15s, fill 0.15s;transition:transform 0.15s, fill 0.15s, -webkit-transform 0.15s}.joe_header__slideout-menu .link.in{color:var(--theme)}.joe_header__slideout-menu .link.in a{color:var(--theme)}.joe_header__slideout-menu .link.in .icon{fill:var(--theme);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_header__slideout-menu .current a{color:var(--theme);font-weight:500;font-size:15px}.joe_header__slideout-menu .slides{display:none;border-left:1px solid var(--classC);padding-left:15px}.joe_header__slideout-menu .slides .link{color:var(--routine)}.joe_header__slideout-menu .slides .current{color:var(--theme);font-weight:500;font-size:15px}.joe_header__mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:visibility 0.35s, opacity 0.35s;z-index:880}.joe_header__mask.active{visibility:visible;opacity:1}.joe_header__mask.slideout{z-index:1010}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center;word-break:break-all}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:var(--radius-inner);overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s;max-height:48px}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_list__item{position:relative;width:100%;border-bottom:1px solid var(--classC);padding:15px 0}.joe_list__item:last-child{border-bottom:none}.joe_list__item .information .title{margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all;color:var(--main);font-size:18px;line-height:24px;max-height:48px;transition:color 0.35s}.joe_list__item .information .title:hover{color:var(--theme)}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap;vertical-align:2px}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);word-break:break-all;line-height:22px;max-height:44px;opacity:0.85}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .meta .items{display:flex;align-items:center}.joe_list__item .meta .items li::after{content:'/';color:var(--seat);padding:0 5px}.joe_list__item .meta .items li:last-child::after{display:none}.joe_list__item .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .meta .last .icon{margin-right:3px}.joe_list__item .meta .last .link{color:var(--minor)}.joe_list__item .meta .last .link:hover{color:var(--theme)}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item.default{display:flex;position:relative}.joe_list__item.default:hover .thumbnail img{opacity:0.8}.joe_list__item.default:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item.default .thumbnail{flex-shrink:0;position:relative;width:210px;height:140px;margin-right:15px;overflow:hidden}.joe_list__item.default .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item.default .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item.default .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item.default .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item.single:hover .thumbnail img{opacity:0.8}.joe_list__item.single:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item.single .information{margin-bottom:15px}.joe_list__item.single .thumbnail{display:block;position:relative;width:100%;height:280px;overflow:hidden;margin-bottom:15px}.joe_list__item.single .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item.single .thumbnail time{position:absolute;z-index:1;top:10px;right:10px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item.single .thumbnail svg{position:absolute;z-index:1;top:10px;left:10px;width:20px;height:20px;fill:#fff}.joe_list__item.multiple .information{margin-bottom:15px}.joe_list__item.multiple .thumbnail{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:180px;gap:15px;margin-bottom:15px}.joe_list__item.multiple .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;border-radius:var(--radius-inner)}.joe_list__item.multiple .thumbnail img:hover{-webkit-transform:scale(1.025);transform:scale(1.025);opacity:0.85}.joe_list__item.none .information{display:flex;flex-direction:column;height:140px}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{flex-shrink:0;position:relative;width:210px;height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:var(--radius-inner)}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:var(--radius-inner);background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:var(--radius-inner);background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__category .edit{color:var(--minor);margin-left:auto}.joe_detail__category .edit:hover{color:var(--theme)}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classC)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px;-o-object-fit:cover;object-fit:cover}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between;font-size:12px}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px;word-break:break-all;color:var(--routine)}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:18px;position:relative}.joe_detail__article h1{padding:0 15px}.joe_detail__article h1::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px 0 20px}.joe_detail__article h3::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:18px}.joe_detail__article p{line-height:26px;margin-bottom:18px}.joe_detail__article blockquote{line-height:26px;margin-bottom:18px;background:#ecf8ff;border-left:5px solid #50bfff;color:#50bfff;padding:8px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 0}.joe_detail__article blockquote p{margin:0}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn){display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn):hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn)::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:var(--radius-inner);font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c;vertical-align:top}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;margin:0 0 18px;padding:30px 0 0;font-size:14px;border-radius:var(--radius-inner);overflow:hidden}.joe_detail__article pre[class*='language-'] code[class*='language-']{display:block;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;padding:0 15px 12px}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d;border-radius:var(--radius-inner) var(--radius-inner) 0 0}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article pre[class*='language-'] .copy{position:absolute;top:9px;right:15px;z-index:5;color:#909399;transition:color 0.35s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article pre[class*='language-'] .copy:hover{color:#c0c4cc}.joe_detail__article img:not(.owo_image){display:block;max-width:100%;border-radius:var(--radius-inner);transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:not(.owo_image):hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article .owo_image{max-height:26px;vertical-align:top}.joe_detail__article ol,.joe_detail__article ul{margin-bottom:18px;padding-left:36px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:18px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-player{width:100%;height:500px}.joe_detail__article-protected{display:flex;justify-content:center;background:repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);padding:20px 0;margin-bottom:18px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow);border-radius:20px;overflow:hidden}.joe_detail__article-protected .contain .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:15px}.joe_detail__article-protected .contain .password{width:250px;height:40px;border:none;color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--main);border:none;background:none}.joe_detail__article-checkbox{-webkit-appearance:none;position:relative;border-radius:2px;width:15px;height:15px;border:2px solid var(--theme);vertical-align:-2px}.joe_detail__article-checkbox:disabled{cursor:not-allowed}.joe_detail__article-checkbox:checked{border:none;background:var(--theme)}.joe_detail__article-checkbox:checked::after{content:'';width:3px;height:7px;position:absolute;top:2px;left:5px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.joe_detail__article-card{margin:0 auto;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);border-radius:var(--radius-inner);border:1px solid var(--classC);background:var(--background)}.joe_detail__article-card .title{padding:8px 10px;border-bottom:1px solid var(--classC);color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-card .content{padding:10px;color:var(--routine)}.joe_detail__article-message{position:relative;border-left-width:4px;border-left-style:solid;padding:8px 15px;border-radius:0 4px 4px 0}.joe_detail__article-message:hover .icon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_detail__article-message .icon{position:absolute;top:-9px;left:-11px;width:18px;height:18px;border-radius:50%;transition:-webkit-transform 0.85s;transition:transform 0.85s;transition:transform 0.85s, -webkit-transform 0.85s}.joe_detail__article-message .icon::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:10px;height:10px;fill:#fff;background-repeat:no-repeat;background-size:100% 100%}.joe_detail__article-message.success{border-left-color:#2bde3f;background:#2bde3f20;color:#2bde3f}.joe_detail__article-message.success .icon{background:#2bde3f}.joe_detail__article-message.success .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=)}.joe_detail__article-message.info{border-left-color:#1d72f3;background:#1d72f320;color:#1d72f3}.joe_detail__article-message.info .icon{background:#1d72f3}.joe_detail__article-message.info .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.warning{border-left-color:#ffc007;background:#ffc00720;color:#ffc007}.joe_detail__article-message.warning .icon{background:#ffc007}.joe_detail__article-message.warning .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.error{border-left-color:#f56c6c;background:#f56c6c20;color:#f56c6c}.joe_detail__article-message.error .icon{background:#f56c6c}.joe_detail__article-message.error .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+)}.joe_detail__article-mtitle{display:flex;justify-content:center}.joe_detail__article-mtitle .text{position:relative;color:var(--minor);padding:0 15px;transition:padding 0.35s}.joe_detail__article-mtitle .text:hover{padding:0}.joe_detail__article-mtitle .text::before,.joe_detail__article-mtitle .text::after{content:'';position:absolute;top:50%;width:20px;height:1px;background:var(--theme)}.joe_detail__article-mtitle .text::before{left:-35px}.joe_detail__article-mtitle .text::after{right:-35px}.joe_detail__article-anote{position:relative;display:inline-block;color:#fff;height:35px;line-height:35px;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_detail__article-anote:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px)}.joe_detail__article-anote .icon{display:inline-block;vertical-align:top;width:35px;height:35px;text-align:center;background:rgba(0,0,0,0.2)}.joe_detail__article-anote .icon .fa{color:#fff}.joe_detail__article-anote .content{display:inline-block;vertical-align:top;padding:0 12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_detail__article-anote.secondary{background:#34495e}.joe_detail__article-anote.success{background:#27ae60}.joe_detail__article-anote.warning{background:#f39c12}.joe_detail__article-anote.error{background:#e74c3c}.joe_detail__article-anote.info{background:#3498db}.joe_detail__article-abtn{display:inline-block;color:#fff;height:35px;line-height:35px;padding:0 15px;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0)}.joe_detail__article-abtn:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.joe_detail__article-abtn .icon{display:inline-block;vertical-align:top;text-align:center}.joe_detail__article-abtn .icon .fa{color:#fff}.joe_detail__article-abtn .icon [class^='fa-']{margin-right:8px}.joe_detail__article-abtn .content{display:inline-block;vertical-align:top;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__article-copy{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-video{margin-bottom:18px}.joe_detail__article-video .play,.joe_detail__article-video .episodes{position:relative;background:var(--classD);padding:60px 15px 15px}.joe_detail__article-video .play .title,.joe_detail__article-video .episodes .title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-video .play .title::after,.joe_detail__article-video .episodes .title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_detail__article-video .play .box,.joe_detail__article-video .episodes .box{border-top:1px solid var(--classB);padding-top:15px}.joe_detail__article-video .play{margin-bottom:15px}.joe_detail__article-video .play .box iframe{background:#000;width:100%;height:520px}.joe_detail__article-video .episodes .box{display:grid;grid-template-columns:repeat(6, 1fr);gap:15px}.joe_detail__article-video .episodes .box .item{height:30px;line-height:30px;border-radius:15px;background:var(--background);color:var(--routine);cursor:pointer;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;padding:0 10px}.joe_detail__article-video .episodes .box .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_detail__article-video .episodes .box .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_detail__article-mp3 .plyr{max-width:450px;margin:0 auto}.joe_detail__article-mp3 .plyr--audio{box-shadow:var(--box-shadow);background:var(--classD);border-radius:26px;padding:0 5px;--plyr-audio-control-color: var(--routine)}.joe_detail__article-mp3 .plyr--audio .plyr__controls{background:var(--classD)}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classC)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:var(--radius-inner)}.joe_detail__copyright .content .item{color:var(--minor);margin-bottom:5px;word-break:break-all;line-height:22px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:18px;height:18px;margin-right:3px;vertical-align:-4px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__friends{display:grid;grid-template-columns:repeat(3, 1fr);gap:15px;margin-bottom:15px}.joe_detail__friends-item .contain{display:block;border-radius:var(--radius-inner);overflow:hidden;padding:15px;color:#fff;word-break:break-all;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__friends-item .contain:hover{-webkit-transform:translateY(-5px) scale(1.025);transform:translateY(-5px) scale(1.025);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .desc{margin-right:10px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container .run{margin:0 auto 0 10px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}.joe_comment__close-icon{fill:var(--routine);margin-right:5px}.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none;transition:color 0.35s, background 0.35s}.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}.joe_comment__respond-type .item.active{color:#fff;background:var(--theme)}.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}.joe_comment__respond-form .head .list{flex:1}.joe_comment__respond-form .head .list input{width:100%;border:none;background:transparent;padding:0 15px;height:40px;color:var(--routine)}.joe_comment__respond-form .head .list:nth-child(2){position:relative}.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(2)::before{left:0}.joe_comment__respond-form .head .list:nth-child(2)::after{right:0}.joe_comment__respond-form .body{padding:15px}.joe_comment__respond-form .body .text{width:100%;height:200px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:transparent}.joe_comment__respond-form .body .draw{position:relative;width:100%}.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main);transition:color 0.35s}.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;bottom:10px;left:10px}.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer;transition:box-shadow 0.35s}.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,0.35)}.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .icon-undo{top:10px}.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}.joe_comment__respond-form .foot{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .owo{min-height:32px;padding-top:3px}.joe_comment__respond-form .foot .owo .seat{text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:0.85;border-radius:13px;width:70px}.joe_comment__respond-form .foot .submit{position:absolute;top:0;right:15px;white-space:nowrap}.joe_comment__respond-form .foot .submit .cancle{display:none;color:var(--main);cursor:pointer;margin-right:10px;transition:color 0.35s}.joe_comment__respond-form .foot .submit .cancle:hover{color:var(--theme)}.joe_comment__respond-form .foot .submit button{border-radius:3px;height:32px;padding:0 15px;border:none;background:var(--theme);color:#fff;font-size:14px}.joe_comment__respond-form .foot .submit button:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment .comment-list{padding-top:15px}.joe_comment .comment-list__item-contain .term{display:flex;margin-bottom:15px}.joe_comment .comment-list__item-contain .term .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD);-o-object-fit:cover;object-fit:cover}.joe_comment .comment-list__item-contain .term .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}.joe_comment .comment-list__item-contain .term .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}.joe_comment .comment-list__item-contain .term .content .user .author{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .user .author a{color:#409eff}.joe_comment .comment-list__item-contain .term .content .user .owner{background:var(--theme);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}.joe_comment .comment-list__item-contain .term .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .user .waiting{color:#e6a23c;font-style:normal}.joe_comment .comment-list__item-contain .term .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-all;line-height:24px}.joe_comment .comment-list__item-contain .term .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500}.joe_comment .comment-list__item-contain .term .content .substance .owo_image{height:22px}.joe_comment .comment-list__item-contain .term .content .substance .draw_image{max-width:100%}.joe_comment .comment-list__item-contain .term .content .handle{display:flex;align-items:center;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .handle .date{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .handle .reply{display:flex;align-items:center;color:var(--main);font-size:13px;cursor:pointer;transition:color 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply .icon{margin-right:5px}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover{color:var(--theme)}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon{fill:var(--theme)}.joe_comment .comment-list__item-children{padding-left:63px}.joe_comment .comment-list__item-children .comment-list__item-children{padding-left:0}.joe_comment .comment-list__item .joe_comment__respond{margin-left:63px;margin-bottom:15px;-webkit-animation:showComment 0.5s;animation:showComment 0.5s}.joe_comment .comment-list .comment-list{padding-top:0}.joe_comment .joe_pagination{padding-top:0}.joe_run__day,.joe_run__hour,.joe_run__minute,.joe_run__second{font-weight:500;color:var(--theme)}.joe_owo__contain{position:relative}.joe_owo__contain .seat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.joe_owo__contain .box{width:100%;display:none;background:var(--background);border-radius:var(--radius-inner);overflow:hidden;margin-top:15px}.joe_owo__contain .box .scroll{display:none;max-height:200px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;padding:5px}.joe_owo__contain .box .scroll .item{text-align:center;width:calc(100% / 18);display:inline-block;padding:5px;cursor:pointer;border-radius:var(--radius-inner);transition:background 0.25s}.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}.joe_owo__contain .box .scroll .item:hover{background:var(--classD)}.joe_owo__contain .box .scroll:nth-child(3) .item{color:var(--routine);width:calc(100% / 5)}.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid var(--classC)}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s, color 0.25s}.joe_owo__contain .box .bar .item.active{color:#fff;background:var(--theme)}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@-webkit-keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@-webkit-keyframes shaked{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}@keyframes shaked{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}
+.joe_dropdown{position:relative}.joe_dropdown__link{display:flex;align-items:center}.joe_dropdown__link-icon{transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu{position:absolute;left:50%;visibility:hidden;z-index:999;border-top:3px solid var(--theme);-webkit-transform-origin:top;transform-origin:top;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:0 0 var(--radius-inner) var(--radius-inner);padding:10px 0;opacity:0;-webkit-transform:translateX(-50%) perspective(600px) rotateX(-45deg);transform:translateX(-50%) perspective(600px) rotateX(-45deg);transition:opacity 0.35s, visibility 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s;transition:opacity 0.35s, visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_dropdown__menu::before{content:'';position:absolute;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--theme)}.joe_dropdown.active .joe_dropdown__link-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.joe_dropdown.active .joe_dropdown__menu{visibility:visible;opacity:1;-webkit-transform:translateX(-50%) perspective(600px) rotateX(0);transform:translateX(-50%) perspective(600px) rotateX(0)}.joe_header{position:-webkit-sticky;position:sticky;top:0;z-index:1000;background:var(--background);box-shadow:0 2px 10px 0 rgba(0,0,0,0.1)}.joe_header__above{position:relative;z-index:999;background:var(--background)}.joe_header__above .joe_container{align-items:center}.joe_header__above-logo{position:relative;display:flex;align-items:center;height:60px;padding-right:15px;margin-right:15px}.joe_header__above-logo img{max-width:150px;max-height:50px;-o-object-fit:cover;object-fit:cover}.joe_header__above-logo svg{display:none}.joe_header__above-logo::after{content:'';position:absolute;top:50%;right:0;width:1px;height:20px;background:var(--classC);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.joe_header__above-nav{display:flex;align-items:center}.joe_header__above-nav .item{position:relative;height:60px;line-height:60px;font-size:15px;padding:0 8px;margin-right:15px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .item:last-child{margin-right:0}.joe_header__above-nav .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;transition:opacity 0.5s, -webkit-transform 0.5s;transition:opacity 0.5s, transform 0.5s;transition:opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;border-radius:6px 6px 0 0;opacity:0;-webkit-transform:scaleX(0.25);transform:scaleX(0.25);background:var(--theme)}.joe_header__above-nav .item.active,.joe_header__above-nav .item:hover{color:var(--theme)}.joe_header__above-nav .item.active::after,.joe_header__above-nav .item:hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_header__above-nav .joe_dropdown__link a{height:60px;line-height:60px;font-size:15px;padding-left:8px;padding-right:3px;transition:color 0.35s;white-space:nowrap;color:var(--main)}.joe_header__above-nav .joe_dropdown__menu{width:110px;text-align:center}.joe_header__above-nav .joe_dropdown__menu a{display:block;line-height:34px;height:34px;transition:color 0.35s, background 0.35s;color:var(--minor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 15px}.joe_header__above-nav .joe_dropdown__menu a:hover,.joe_header__above-nav .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__above-search{position:relative;margin-left:auto;display:flex;align-items:center}.joe_header__above-search .input{background:var(--classC);width:170px;height:34px;border:1px solid transparent;padding:0 18px;color:var(--routine);transition:background 0.35s, border-color 0.35s, padding-right 0.35s;border-radius:17px 0 0 17px}.joe_header__above-search .input:focus{background:var(--background);border-color:var(--theme);padding-right:28px}.joe_header__above-search .input:focus ~ .icon{-webkit-transform:translate3d(0, -50%, 0) rotateY(180deg);transform:translate3d(0, -50%, 0) rotateY(180deg)}.joe_header__above-search .submit{position:relative;z-index:1;height:34px;border:none;background:var(--theme);color:#fff;border-radius:0 17px 17px 0;padding:0 10px}.joe_header__above-search .icon{position:absolute;top:50%;left:142px;width:28px;height:38px;background:url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);background-size:100% 100%;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(100%, -50%, 0) rotateY(180deg);transform:translate3d(100%, -50%, 0) rotateY(180deg)}.joe_header__above-search .result{position:absolute;z-index:2;top:60px;left:0;right:0;background:var(--background);box-shadow:0 0 10px rgba(0,0,0,0.15);border-radius:var(--radius-inner);visibility:hidden;opacity:0;transition:visibility 0.35s, opacity 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s;transition:visibility 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(0, 15px, 0);transform:translate3d(0, 15px, 0)}.joe_header__above-search .result.active{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;visibility:visible}.joe_header__above-search .result .item{height:40px;line-height:40px;border-bottom:1px solid var(--classD);display:flex;align-items:center;overflow:hidden;padding:0 10px;transition:background 0.35s}.joe_header__above-search .result .item:last-child{border-bottom:none}.joe_header__above-search .result .item:nth-child(1) .sort{background:#fe2d46}.joe_header__above-search .result .item:nth-child(2) .sort{background:#f60}.joe_header__above-search .result .item:nth-child(3) .sort{background:#faa90e}.joe_header__above-search .result .item:hover{background:var(--classD)}.joe_header__above-search .result .item .sort{color:#fff;background:#7f7f8c;width:18px;height:18px;line-height:18px;border-radius:2px;text-align:center;margin-right:8px;font-weight:500}.joe_header__above-search .result .item .text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--routine);font-size:12px}.joe_header__above-search .result .item .views{color:var(--seat);font-size:12px;margin-left:5px}.joe_header__above-searchicon,.joe_header__above-slideicon{display:none;width:20px;height:20px;fill:var(--routine);cursor:pointer}.joe_header__above-searchicon{margin-left:auto}.joe_header__below{position:relative;border-top:1px solid var(--classC);height:45px}.joe_header__below-class{display:flex}.joe_header__below-class .item{margin-right:15px;color:var(--minor);height:45px;line-height:45px;transition:color 0.35s;white-space:nowrap}.joe_header__below-class .item:hover,.joe_header__below-class .item.active{color:var(--theme)}.joe_header__below-class .joe_dropdown{margin-right:15px}.joe_header__below-class .joe_dropdown__link .item{margin-right:3px}.joe_header__below-class .joe_dropdown__menu{width:110px;text-align:center}.joe_header__below-class .joe_dropdown__menu a{display:block;height:34px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--minor);transition:color 0.35s, background 0.35s}.joe_header__below-class .joe_dropdown__menu a:hover,.joe_header__below-class .joe_dropdown__menu a.active{color:var(--theme);background:var(--classD)}.joe_header__below-progress{position:absolute;z-index:1;left:0;bottom:-3px;height:3px;border-radius:1.5px;background:linear-gradient(to right, #4cd964, #5ac8fa, #007aff);transition:width 0.35s}.joe_header__searchout{position:absolute;top:60px;left:0;right:0;z-index:890;background:var(--background);border-top:1px solid var(--classC);-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;visibility:hidden}.joe_header__searchout.active{visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_header__searchout-inner{padding:15px 0;width:100%}.joe_header__searchout-inner .search{width:100%;display:flex;align-items:center}.joe_header__searchout-inner .search input{flex:1;height:36px;padding:0 10px;border:1px solid var(--classB);border-right:none;border-radius:2px 0 0 2px;color:var(--routine);background:var(--classD)}.joe_header__searchout-inner .search button{padding:0 10px;height:36px;border:none;background:var(--theme);color:#fff;border-radius:0 2px 2px 0}.joe_header__searchout-inner .title{color:var(--routine);padding:15px 0 10px;font-size:16px;display:flex;align-items:center}.joe_header__searchout-inner .title .icon{width:22px;height:22px;fill:var(--routine);margin-right:5px}.joe_header__searchout-inner .cloud{display:flex;flex-wrap:wrap;margin:0 -5px -5px}.joe_header__searchout-inner .cloud .item{padding:5px}.joe_header__searchout-inner .cloud .item a{display:block;padding:0 10px;height:24px;line-height:24px;border-radius:2px;font-size:12px;color:#fff}.joe_header__slideout{position:fixed;top:0;bottom:0;left:0;width:80%;z-index:1020;background:var(--classD);-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);visibility:hidden;transition:visibility 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, visibility 0.35s;transition:transform 0.35s, visibility 0.35s, -webkit-transform 0.35s;overflow-y:auto;padding:135px 15px 15px}.joe_header__slideout::-webkit-scrollbar{display:none}.joe_header__slideout.active{visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_header__slideout-image{position:absolute;top:0;left:0;width:100%;height:150px;-o-object-fit:cover;object-fit:cover;z-index:-1}.joe_header__slideout-author{display:flex;margin-bottom:15px;background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow)}.joe_header__slideout-author .avatar{width:50px;height:50px;margin-right:10px;border-radius:var(--radius-inner)}.joe_header__slideout-author .info{overflow:hidden;line-height:25px}.joe_header__slideout-author .info .link,.joe_header__slideout-author .info .motto{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.joe_header__slideout-author .info .link{display:block;font-size:15px;font-weight:500;color:var(--main)}.joe_header__slideout-author .info .motto{font-size:12px;color:var(--routine)}.joe_header__slideout-count{background:var(--background);border-radius:var(--radius-wrap);padding:10px 15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_header__slideout-count .item{display:flex;align-items:center;color:var(--routine);padding:5px 0}.joe_header__slideout-count .item .icon{width:15px;height:15px;fill:var(--routine);margin-right:5px}.joe_header__slideout-count .item strong{font-weight:500;color:var(--theme)}.joe_header__slideout-menu{background:var(--background);padding:10px 15px;border-radius:var(--radius-wrap);overflow:hidden;box-shadow:var(--box-shadow)}.joe_header__slideout-menu .link{display:flex;align-items:center;justify-content:space-between;padding:10px 0;color:var(--main);transition:color 0.15s}.joe_header__slideout-menu .link a{transition:color 0.15s;color:var(--routine)}.joe_header__slideout-menu .link .icon{width:13px;height:13px;fill:var(--minor);transition:fill 0.15s, -webkit-transform 0.15s;transition:transform 0.15s, fill 0.15s;transition:transform 0.15s, fill 0.15s, -webkit-transform 0.15s}.joe_header__slideout-menu .link.in{color:var(--theme)}.joe_header__slideout-menu .link.in a{color:var(--theme)}.joe_header__slideout-menu .link.in .icon{fill:var(--theme);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_header__slideout-menu .current a{color:var(--theme);font-weight:500;font-size:15px}.joe_header__slideout-menu .slides{display:none;border-left:1px solid var(--classC);padding-left:15px}.joe_header__slideout-menu .slides .link{color:var(--routine)}.joe_header__slideout-menu .slides .current{color:var(--theme);font-weight:500;font-size:15px}.joe_header__mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.65);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:visibility 0.35s, opacity 0.35s;z-index:880}.joe_header__mask.active{visibility:visible;opacity:1}.joe_header__mask.slideout{z-index:1010}.joe_aside{padding:15px 0;margin-left:15px}.joe_aside__item{position:relative;width:250px;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);overflow:hidden}.joe_aside__item:last-child{position:-webkit-sticky;position:sticky;margin-bottom:0}.joe_aside__item-title{display:flex;align-items:center;border-bottom:1px solid var(--classC);font-size:16px;font-weight:500;height:45px;line-height:45px;padding:0 15px;color:var(--main)}.joe_aside__item-title .icon{width:18px;height:18px;margin-right:8px;fill:var(--main)}.joe_aside__item-title .line{width:10px;height:1px;background:#54b5db;margin-left:12px}.joe_aside__item-contain{position:relative;padding:15px}.joe_aside__item.author{background:var(--background);padding:45px 15px 15px}.joe_aside__item.author::before{content:'';position:absolute;top:90px;left:0;width:100%;height:30px;z-index:2;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--background))}.joe_aside__item.author::after{display:none;content:'';position:absolute;top:0;left:0;width:100%;height:273px;background:url("https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif") no-repeat;background-size:cover;z-index:3;pointer-events:none}.joe_aside__item.author:hover::after{display:block}.joe_aside__item.author .image{position:absolute;top:0;left:0;width:100%;height:120px;-o-object-fit:cover;object-fit:cover;z-index:1}.joe_aside__item.author .user{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;padding-bottom:15px}.joe_aside__item.author .user .avatar{width:75px;height:75px;border-radius:50%;overflow:hidden;margin-bottom:10px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s;background:var(--background);padding:5px}.joe_aside__item.author .user .avatar:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_aside__item.author .user .link{color:var(--theme);margin-bottom:10px;font-size:16px;font-weight:500}.joe_aside__item.author .user .link:hover{text-decoration:underline}.joe_aside__item.author .user .motto{color:var(--main);text-align:center;word-break:break-all}.joe_aside__item.author .count{width:100%;padding-bottom:15px;display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_aside__item.author .count .item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;color:var(--routine);font-size:12px}.joe_aside__item.author .count .item:first-child{border-right:1px solid var(--classC)}.joe_aside__item.author .count .item .num{max-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:22px;color:var(--main);margin-bottom:3px;text-shadow:var(--text_shadow)}.joe_aside__item.author .list{padding-top:15px}.joe_aside__item.author .list .item{display:flex;align-items:center;justify-content:space-between;line-height:30px}.joe_aside__item.author .list .item .link{position:relative;color:var(--routine);max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.author .list .item .link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:all 0.35s}.joe_aside__item.author .list .item .link:hover{color:var(--theme)}.joe_aside__item.author .list .item .link:hover::after{width:100%}.joe_aside__item.author .list .item .icon{fill:var(--routine)}.joe_aside__item.timelife{background:var(--background)}.joe_aside__item.timelife .item{margin-bottom:15px}.joe_aside__item.timelife .item:last-child{margin-bottom:0}.joe_aside__item.timelife .item .title{font-size:12px;color:var(--minor);margin-bottom:5px;display:flex;align-items:center}.joe_aside__item.timelife .item .title .text{color:var(--theme);font-weight:500;font-size:14px;margin:0 5px}.joe_aside__item.timelife .item .progress{display:flex;align-items:center}.joe_aside__item.timelife .item .progress-bar{height:10px;border-radius:5px;overflow:hidden;background:var(--classC);width:0;min-width:0;flex:1;margin-right:5px}.joe_aside__item.timelife .item .progress-bar-inner{width:0;height:100%;border-radius:5px;transition:width 0.35s;-webkit-animation:progress 750ms linear infinite;animation:progress 750ms linear infinite}.joe_aside__item.timelife .item .progress-bar-inner-0{background:#bde6ff;background-image:linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-1{background:#ffd980;background-image:linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-2{background:#ffa9a9;background-image:linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-bar-inner-3{background:#67c23a;background-image:linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);background-size:30px 30px}.joe_aside__item.timelife .item .progress-percentage{color:var(--minor)}.joe_aside__item.weather{background:var(--background)}.joe_aside__item.weather .joe_aside__item-contain{min-height:300px}.joe_aside__item.hot{background:var(--background)}.joe_aside__item.hot .empty{text-align:center;color:var(--routine)}.joe_aside__item.hot .item{margin-bottom:15px}.joe_aside__item.hot .item:last-child{margin-bottom:0}.joe_aside__item.hot .item:nth-child(1) .link .sort{background:#ff183e}.joe_aside__item.hot .item:nth-child(2) .link .sort{background:#ff5c38}.joe_aside__item.hot .item:nth-child(3) .link .sort{background:#ffb821}.joe_aside__item.hot .item .link{position:relative;display:block;border-radius:var(--radius-inner);overflow:hidden}.joe_aside__item.hot .item .link:hover .image{-webkit-transform:scale(1.2);transform:scale(1.2)}.joe_aside__item.hot .item .link .sort{position:absolute;top:5px;right:-20px;background:#7f7f8c;color:#fff;width:65px;text-align:center;font-size:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-weight:500;z-index:1;font-style:normal}.joe_aside__item.hot .item .link .image{width:100%;height:130px;-o-object-fit:cover;object-fit:cover;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_aside__item.hot .item .link .describe{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));font-size:12px;color:var(--seat)}.joe_aside__item.hot .item .link .describe h6{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:24px;font-size:14px}.joe_aside__item.ranking{background:var(--background)}.joe_aside__item.ranking .item{display:flex;align-items:center;line-height:32px;overflow:hidden}.joe_aside__item.ranking .item:nth-child(1) .sort{color:#fe2d46}.joe_aside__item.ranking .item:nth-child(2) .sort{color:#f60}.joe_aside__item.ranking .item:nth-child(3) .sort{color:#faa90e}.joe_aside__item.ranking .item .sort{color:var(--minor);font-weight:700;font-size:18px;width:18px;min-width:18px;max-width:18px}.joe_aside__item.ranking .item .link{position:relative;color:var(--routine);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_aside__item.ranking .item .link::after{position:absolute;content:'';bottom:0;left:0;width:0;height:1px;background:var(--theme);transition:width 0.5s}.joe_aside__item.ranking .item .link:hover{color:var(--theme)}.joe_aside__item.ranking .item .link:hover::after{width:100%}.joe_aside__item.ranking .error{text-align:center;color:var(--routine)}.joe_aside__item.newreply{background:var(--background)}.joe_aside__item.newreply .empty{text-align:center;color:var(--routine)}.joe_aside__item.newreply .item{margin-bottom:15px;border-bottom:1px dashed var(--classC);padding-bottom:15px}.joe_aside__item.newreply .item:last-child{margin-bottom:0;border-bottom-color:transparent;padding-bottom:0}.joe_aside__item.newreply .item .user{display:flex;margin-bottom:12px}.joe_aside__item.newreply .item .user .avatar{width:40px;height:40px;min-width:40px;min-height:40px;margin-right:12px;border-radius:50%;border:1px solid var(--classA);padding:3px}.joe_aside__item.newreply .item .user .info{display:flex;flex-direction:column;justify-content:space-between}.joe_aside__item.newreply .item .user .info .author{color:var(--main);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_aside__item.newreply .item .user .info .date{font-size:12px;color:var(--minor)}.joe_aside__item.newreply .item .reply{position:relative;background:var(--classD);border-radius:6px;padding:5px 10px}.joe_aside__item.newreply .item .reply::before{content:'';width:0;height:0;border-bottom:6px solid var(--classD);border-left:6px solid transparent;border-right:6px solid transparent;position:absolute;left:15px;bottom:100%}.joe_aside__item.newreply .item .reply .link{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all;color:var(--minor);font-size:13px;font-weight:500;line-height:24px;transition:all 0.35s;max-height:48px}.joe_aside__item.newreply .item .reply .link:hover{color:var(--theme)}.joe_aside__item.newreply .item .reply .link .owo_image{height:18px;vertical-align:-5px}.joe_aside__item.advert{display:block}.joe_aside__item.advert img{width:100%;-o-object-fit:cover;object-fit:cover}.joe_aside__item.advert .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_list__item{position:relative;width:100%;border-bottom:1px solid var(--classC);padding:15px 0}.joe_list__item:last-child{border-bottom:none}.joe_list__item .information .title{margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all;color:var(--main);font-size:18px;line-height:24px;max-height:48px;transition:color 0.35s}.joe_list__item .information .title:hover{color:var(--theme)}.joe_list__item .information .title .badge{height:20px;line-height:20px;background-image:-webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);color:#fff;font-size:12px;margin-right:5px;border-radius:2px;padding:0 8px;white-space:nowrap;vertical-align:2px}.joe_list__item .information .abstract{display:-webkit-box;-webkit-line-clamp:2;/*! autoprefixer: off */-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--minor);word-break:break-all;line-height:22px;max-height:44px;opacity:0.85}.joe_list__item .line{position:absolute;z-index:1;top:15px;left:-15px;width:4px;height:25px;border-radius:2px;background:var(--theme);-webkit-transform:scaleY(0);transform:scaleY(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_list__item .meta{display:flex;align-items:center;margin-top:auto;color:var(--minor);font-size:13px}.joe_list__item .meta .items{display:flex;align-items:center}.joe_list__item .meta .items li::after{content:'/';color:var(--seat);padding:0 5px}.joe_list__item .meta .items li:last-child::after{display:none}.joe_list__item .meta .last{margin-left:auto;display:flex;align-items:center}.joe_list__item .meta .last .icon{margin-right:3px}.joe_list__item .meta .last .link{color:var(--minor)}.joe_list__item .meta .last .link:hover{color:var(--theme)}.joe_list__item:hover .line{-webkit-transform:scaleY(1);transform:scaleY(1)}.joe_list__item.default{display:flex;position:relative}.joe_list__item.default:hover .thumbnail img{opacity:0.8}.joe_list__item.default:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item.default .thumbnail{flex-shrink:0;position:relative;width:210px;height:140px;margin-right:15px;overflow:hidden}.joe_list__item.default .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item.default .thumbnail time{position:absolute;z-index:1;top:5px;right:5px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item.default .thumbnail svg{position:absolute;z-index:1;top:5px;left:5px;width:20px;height:20px;fill:#fff}.joe_list__item.default .information{display:flex;flex-direction:column;flex:1;min-width:0}.joe_list__item.single:hover .thumbnail img{opacity:0.8}.joe_list__item.single:hover .thumbnail time{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.joe_list__item.single .information{margin-bottom:15px}.joe_list__item.single .thumbnail{display:block;position:relative;width:100%;height:280px;overflow:hidden;margin-bottom:15px}.joe_list__item.single .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_list__item.single .thumbnail time{position:absolute;z-index:1;top:10px;right:10px;background:var(--theme);height:20px;line-height:20px;padding:0 8px;color:#fff;font-size:12px;border-radius:10px;transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;-webkit-transform:translate3d(120%, 0, 0);transform:translate3d(120%, 0, 0)}.joe_list__item.single .thumbnail svg{position:absolute;z-index:1;top:10px;left:10px;width:20px;height:20px;fill:#fff}.joe_list__item.multiple .information{margin-bottom:15px}.joe_list__item.multiple .thumbnail{display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:180px;gap:15px;margin-bottom:15px}.joe_list__item.multiple .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s;border-radius:var(--radius-inner)}.joe_list__item.multiple .thumbnail img:hover{-webkit-transform:scale(1.025);transform:scale(1.025);opacity:0.85}.joe_list__item.none .information{display:flex;flex-direction:column;height:140px}.joe_list__loading .item{display:flex;position:relative;width:100%;padding:15px 0;border-bottom:1px solid var(--classC)}.joe_list__loading .item:last-child{border-bottom:none}.joe_list__loading .item .thumbnail{flex-shrink:0;position:relative;width:210px;height:140px;margin-right:15px;background:var(--classD);-webkit-animation:list_thumbnail_loading 0.5s infinite alternate;animation:list_thumbnail_loading 0.5s infinite alternate;border-radius:var(--radius-inner)}.joe_list__loading .item .information{flex:1;min-width:0}.joe_list__loading .item .information .title{height:24px;border-radius:var(--radius-inner);background:var(--classD);-webkit-animation:list_title_loading 0.75s infinite alternate;animation:list_title_loading 0.75s infinite alternate;margin-bottom:15px}.joe_list__loading .item .information .abstract p{height:18px;border-radius:var(--radius-inner);background:var(--classD);margin-bottom:5px;-webkit-animation:list_abstract_loading 0.8s infinite alternate;animation:list_abstract_loading 0.8s infinite alternate}.joe_load{margin:15px auto 0;width:120px;height:32px;line-height:32px;text-align:center;border-radius:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:var(--background);color:var(--routine);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s;box-shadow:var(--box-shadow)}.joe_load:active{-webkit-transform:scale(0.75);transform:scale(0.75)}.joe_detail{background:var(--background);border-radius:var(--radius-wrap);padding:15px;box-shadow:var(--box-shadow);margin-bottom:15px}.joe_detail__category{display:flex;align-items:center;margin-bottom:15px}.joe_detail__category .item{color:#fff;font-size:12px;padding:3px 8px;margin-right:5px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__category .item:hover{opacity:0.85;-webkit-transform:translate3d(0, -3px, 0);transform:translate3d(0, -3px, 0)}.joe_detail__category .item:last-child{margin-right:0}.joe_detail__category .item-0{background:#0396ff}.joe_detail__category .item-1{background:#ea5455}.joe_detail__category .item-2{background:#7367f0}.joe_detail__category .item-3{background:#28c76f}.joe_detail__category .item-4{background:#9f44d3}.joe_detail__category .edit{color:var(--minor);margin-left:auto}.joe_detail__category .edit:hover{color:var(--theme)}.joe_detail__title{font-size:24px;color:var(--main);text-shadow:var(--text-shadow);text-align:center;margin-bottom:15px;word-break:break-all}.joe_detail__count{position:relative;display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--classC)}.joe_detail__count::after{content:'';position:absolute;bottom:-1.5px;left:0;width:80px;height:3px;border-radius:1.5px;background:var(--theme)}.joe_detail__count-information{display:flex;align-items:center}.joe_detail__count-information .avatar{width:35px;height:35px;border-radius:50%;margin-right:10px;border:1px solid var(--classA);padding:3px;-o-object-fit:cover;object-fit:cover}.joe_detail__count-information .meta{display:flex;flex-direction:column;height:35px;justify-content:space-between;font-size:12px}.joe_detail__count-information .meta .author .link{font-weight:500;color:var(--theme)}.joe_detail__count-information .meta .author .link:hover{text-decoration:underline}.joe_detail__count-information .meta .item{display:flex;align-items:center;color:var(--minor);line-height:16px}.joe_detail__count-information .meta .item .line{color:var(--seat);margin:0 7px;vertical-align:middle}.joe_detail__count-created{font-size:32px;line-height:42px;color:var(--routine);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:var(--text-shadow);font-family:consolas}.joe_detail__article{padding-top:15px;font-size:15px;word-break:break-all;color:var(--routine)}.joe_detail__article h1,.joe_detail__article h2,.joe_detail__article h3,.joe_detail__article h4,.joe_detail__article h5,.joe_detail__article h6{color:var(--main);font-size:18px;line-height:24px;margin-bottom:18px;position:relative}.joe_detail__article h1{padding:0 15px}.joe_detail__article h1::before{content:'';position:absolute;top:8.5px;left:0;height:7px;width:7px;border-radius:50%;background:var(--theme)}.joe_detail__article h2{padding:0 15px}.joe_detail__article h2::before{content:'';position:absolute;top:10%;bottom:10%;left:0;width:4px;border-radius:2px;background:var(--theme)}.joe_detail__article h3{padding:0 15px 0 20px}.joe_detail__article h3::before{content:'#';color:var(--theme);font-weight:700;position:absolute;top:0;left:0;line-height:24px}.joe_detail__article h4::before{content:'「';color:var(--theme);font-weight:600;margin-right:5px}.joe_detail__article h4::after{content:'」';color:var(--theme);font-weight:600;margin-left:5px}.joe_detail__article h5{padding:0 15px 0 28px}.joe_detail__article h5::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");background-size:100% 100%}.joe_detail__article h6{padding:0 15px 0 28px}.joe_detail__article h6::before{content:'';position:absolute;top:2px;left:0;width:20px;height:20px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");background-size:100% 100%}.joe_detail__article hr{border:none;height:1px;background-color:var(--classB);margin-bottom:18px}.joe_detail__article p{line-height:26px;margin-bottom:18px}.joe_detail__article blockquote{line-height:26px;margin-bottom:18px;background:#ecf8ff;border-left:5px solid #50bfff;color:#50bfff;padding:8px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 0}.joe_detail__article blockquote p{margin:0}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn){display:inline-block;line-height:26px;color:var(--theme);position:relative}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn):hover::after{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}.joe_detail__article a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn)::after{content:'';position:absolute;width:100%;height:1px;bottom:-1px;left:0;background:var(--theme);-webkit-transform:scaleX(0.25);transform:scaleX(0.25);opacity:0;transition:opacity 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s, -webkit-transform 0.35s}.joe_detail__article code{display:inline-block;min-height:26px;line-height:26px;border-radius:var(--radius-inner);font-size:12px;background:#fdf6ec;padding:0 8px;color:#e6a23c;vertical-align:top}.joe_detail__article pre code{display:unset;vertical-align:unset;min-height:unset;line-height:unset;border-radius:unset;font-size:unset;background:unset;padding:unset;color:unset}.joe_detail__article pre[class*='language-']{position:relative;margin:0 0 18px;padding:30px 0 0;font-size:14px;border-radius:var(--radius-inner);overflow:hidden}.joe_detail__article pre[class*='language-'] code[class*='language-']{display:block;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;word-wrap:break-word;padding:0 15px 12px}.joe_detail__article pre[class*='language-']::after{content:'';position:absolute;top:0;left:0;width:100%;height:30px;background:#2d2d2d;border-radius:var(--radius-inner) var(--radius-inner) 0 0}.joe_detail__article pre[class*='language-']::before{content:'';position:absolute;top:9px;left:15px;width:12px;height:12px;border-radius:50%;background:#fc625d;box-shadow:20px 0 #fdbc40, 40px 0 #35cd4b;z-index:1}.joe_detail__article pre[class*='language-'] .copy{position:absolute;top:9px;right:15px;z-index:5;color:#909399;transition:color 0.35s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article pre[class*='language-'] .copy:hover{color:#c0c4cc}.joe_detail__article img:not(.owo_image){display:block;max-width:100%;border-radius:var(--radius-inner);transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s;cursor:zoom-in;margin:0 auto}.joe_detail__article img:not(.owo_image):hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__article .owo_image{max-height:26px;vertical-align:top}.joe_detail__article ol,.joe_detail__article ul{margin-bottom:18px;padding-left:36px}.joe_detail__article ol li,.joe_detail__article ul li{line-height:26px}.joe_detail__article ol li{list-style:decimal}.joe_detail__article ul li{list-style:disc}.joe_detail__article table{width:100%;max-width:100%;table-layout:fixed;color:var(--minor);margin-bottom:18px;font-size:13px;border-top:1px solid var(--classC);border-left:1px solid var(--classC)}.joe_detail__article table td,.joe_detail__article table th{padding:8px;border-bottom:1px solid var(--classC);border-right:1px solid var(--classC)}.joe_detail__article table thead th{font-weight:500;background:var(--classC)}.joe_detail__article table tbody tr{transition:background 0.35s}.joe_detail__article table tbody tr:hover{background:var(--classD)}.joe_detail__article span.block{display:block}.joe_detail__article-hide{background:repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);padding:15px 0;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal}.joe_detail__article-hide i{position:relative;font-style:normal;cursor:pointer;color:var(--theme)}.joe_detail__article-player{width:100%;height:500px}.joe_detail__article-protected{display:flex;justify-content:center;background:repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);padding:20px 0;margin-bottom:18px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow);border-radius:20px;overflow:hidden}.joe_detail__article-protected .contain .icon{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:15px}.joe_detail__article-protected .contain .password{width:250px;height:40px;border:none;color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--main);border:none;background:none}.joe_detail__article-checkbox{-webkit-appearance:none;position:relative;border-radius:2px;width:15px;height:15px;border:2px solid var(--theme);vertical-align:-2px}.joe_detail__article-checkbox:disabled{cursor:not-allowed}.joe_detail__article-checkbox:checked{border:none;background:var(--theme)}.joe_detail__article-checkbox:checked::after{content:'';width:3px;height:7px;position:absolute;top:2px;left:5px;border:2px solid #fff;border-top:0;border-left:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.joe_detail__article-card{margin:0 auto;box-shadow:0 2px 12px 0 rgba(0,0,0,0.1);border-radius:var(--radius-inner);border:1px solid var(--classC);background:var(--background)}.joe_detail__article-card .title{padding:8px 10px;border-bottom:1px solid var(--classC);color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-card .content{padding:10px;color:var(--routine)}.joe_detail__article-message{position:relative;border-left-width:4px;border-left-style:solid;padding:8px 15px;border-radius:0 4px 4px 0}.joe_detail__article-message:hover .icon{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.joe_detail__article-message .icon{position:absolute;top:-9px;left:-11px;width:18px;height:18px;border-radius:50%;transition:-webkit-transform 0.85s;transition:transform 0.85s;transition:transform 0.85s, -webkit-transform 0.85s}.joe_detail__article-message .icon::before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:10px;height:10px;fill:#fff;background-repeat:no-repeat;background-size:100% 100%}.joe_detail__article-message.success{border-left-color:#2bde3f;background:#2bde3f20;color:#2bde3f}.joe_detail__article-message.success .icon{background:#2bde3f}.joe_detail__article-message.success .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=)}.joe_detail__article-message.info{border-left-color:#1d72f3;background:#1d72f320;color:#1d72f3}.joe_detail__article-message.info .icon{background:#1d72f3}.joe_detail__article-message.info .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.warning{border-left-color:#ffc007;background:#ffc00720;color:#ffc007}.joe_detail__article-message.warning .icon{background:#ffc007}.joe_detail__article-message.warning .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==)}.joe_detail__article-message.error{border-left-color:#f56c6c;background:#f56c6c20;color:#f56c6c}.joe_detail__article-message.error .icon{background:#f56c6c}.joe_detail__article-message.error .icon::before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+)}.joe_detail__article-mtitle{display:flex;justify-content:center}.joe_detail__article-mtitle .text{position:relative;color:var(--minor);padding:0 15px;transition:padding 0.35s}.joe_detail__article-mtitle .text:hover{padding:0}.joe_detail__article-mtitle .text::before,.joe_detail__article-mtitle .text::after{content:'';position:absolute;top:50%;width:20px;height:1px;background:var(--theme)}.joe_detail__article-mtitle .text::before{left:-35px}.joe_detail__article-mtitle .text::after{right:-35px}.joe_detail__article-anote{position:relative;display:inline-block;color:#fff;height:35px;line-height:35px;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s}.joe_detail__article-anote:hover{-webkit-transform:translateY(-3px);transform:translateY(-3px)}.joe_detail__article-anote .icon{display:inline-block;vertical-align:top;width:35px;height:35px;text-align:center;background:rgba(0,0,0,0.2)}.joe_detail__article-anote .icon .fa{color:#fff}.joe_detail__article-anote .content{display:inline-block;vertical-align:top;padding:0 12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.joe_detail__article-anote.secondary{background:#34495e}.joe_detail__article-anote.success{background:#27ae60}.joe_detail__article-anote.warning{background:#f39c12}.joe_detail__article-anote.error{background:#e74c3c}.joe_detail__article-anote.info{background:#3498db}.joe_detail__article-abtn{display:inline-block;color:#fff;height:35px;line-height:35px;padding:0 15px;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:translateZ(0);transform:translateZ(0)}.joe_detail__article-abtn:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.joe_detail__article-abtn .icon{display:inline-block;vertical-align:top;text-align:center}.joe_detail__article-abtn .icon .fa{color:#fff}.joe_detail__article-abtn .icon [class^='fa-']{margin-right:8px}.joe_detail__article-abtn .content{display:inline-block;vertical-align:top;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joe_detail__article-copy{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-video{margin-bottom:18px}.joe_detail__article-video .play,.joe_detail__article-video .episodes{position:relative;background:var(--classD);padding:60px 15px 15px}.joe_detail__article-video .play .title,.joe_detail__article-video .episodes .title{position:absolute;top:15px;left:-10px;background:var(--theme);color:#fff;font-weight:500;box-shadow:2px 5px 10px rgba(49,58,70,0.15);height:30px;line-height:30px;padding:0 12px;border-radius:2px 2px 2px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__article-video .play .title::after,.joe_detail__article-video .episodes .title::after{content:'';position:absolute;bottom:-10px;left:-10px;border-style:solid;border-width:10px;border-color:var(--theme) transparent transparent;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_detail__article-video .play .box,.joe_detail__article-video .episodes .box{border-top:1px solid var(--classB);padding-top:15px}.joe_detail__article-video .play{margin-bottom:15px}.joe_detail__article-video .play .box iframe{background:#000;width:100%;height:520px}.joe_detail__article-video .episodes .box{display:grid;grid-template-columns:repeat(6, 1fr);gap:15px}.joe_detail__article-video .episodes .box .item{height:30px;line-height:30px;border-radius:15px;background:var(--background);color:var(--routine);cursor:pointer;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;transition:transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s, -webkit-transform 0.35s;padding:0 10px}.joe_detail__article-video .episodes .box .item.active{-webkit-transform:translateY(-2px);transform:translateY(-2px);color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_detail__article-video .episodes .box .item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 5px 5px rgba(0,0,0,0.1)}.joe_detail__article-mp3 .plyr{max-width:450px;margin:0 auto}.joe_detail__article-mp3 .plyr--audio{box-shadow:var(--box-shadow);background:var(--classD);border-radius:26px;padding:0 5px;--plyr-audio-control-color: var(--routine)}.joe_detail__article-mp3 .plyr--audio .plyr__controls{background:var(--classD)}.joe_detail__agree{display:flex;align-items:center;justify-content:center;margin-bottom:15px}.joe_detail__agree .agree{text-align:center;font-size:12px;color:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_detail__agree .agree .icon{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#f56c6c;cursor:pointer;margin-bottom:8px}.joe_detail__agree .agree .icon.active{-webkit-animation:box_shadow 1s;animation:box_shadow 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_detail__agree .agree .icon svg{position:absolute;width:28px;height:28px;-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_detail__agree .agree .icon svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_detail__copyright{padding-top:15px;border-top:1px solid var(--classC)}.joe_detail__copyright .content{background:var(--classD);padding:15px;border-radius:var(--radius-inner)}.joe_detail__copyright .content .item{color:var(--minor);margin-bottom:5px;word-break:break-all;line-height:22px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:18px;height:18px;margin-right:3px;vertical-align:-4px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__friends{display:grid;grid-template-columns:repeat(3, 1fr);gap:15px;margin-bottom:15px}.joe_detail__friends-item .contain{display:block;border-radius:var(--radius-inner);overflow:hidden;padding:15px;color:#fff;word-break:break-all;transition:box-shadow 0.35s, -webkit-transform 0.35s;transition:transform 0.35s, box-shadow 0.35s;transition:transform 0.35s, box-shadow 0.35s, -webkit-transform 0.35s}.joe_detail__friends-item .contain:hover{-webkit-transform:translateY(-5px) scale(1.025);transform:translateY(-5px) scale(1.025);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3)}.joe_detail__friends-item .contain .title{position:relative}.joe_detail__friends-item .contain .title::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:#fff}.joe_detail__friends-item .contain .content{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.joe_detail__friends-item .contain .content .desc{margin-right:10px}.joe_detail__friends-item .contain .content .avatar{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;-o-object-fit:cover;object-fit:cover}.joe_footer{border-top:1px solid var(--classB);color:var(--minor)}.joe_footer .joe_container{display:flex;align-items:center;justify-content:space-between;min-height:65px}.joe_footer .joe_container .run{margin:0 auto 0 10px}.joe_footer .joe_container a{color:var(--minor);transition:all 0.35s}.joe_footer .joe_container a:hover{color:var(--theme)}.joe_pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_pagination li{margin-left:5px}.joe_pagination li.active a{background:var(--theme);color:#fff;font-weight:500}.joe_pagination li a{display:flex;align-items:center;height:32px;color:var(--main);padding:0 15px;background:var(--background);border-radius:2px;transition:background 0.35s, color 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_pagination li a:hover{background:var(--theme);color:#fff}.joe_pagination li a:hover .icon{fill:#fff}.joe_pagination li a .icon{width:12px;height:12px;fill:var(--routine);transition:fill 0.35s}.joe_pagination li a .icon-next{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.joe_action{position:fixed;bottom:90px;right:30px;z-index:333}.joe_action_item{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--background);border-radius:50%;cursor:pointer;margin-top:15px;box-shadow:0 0 10px rgba(0,0,0,0.1),0 5px 20px rgba(0,0,0,0.2)}.joe_action_item svg{position:absolute;width:25px;height:25px;fill:var(--theme)}.joe_action_item.scroll{visibility:hidden;-webkit-transform:scale(0);transform:scale(0);transition:visibility 0.35s, -webkit-transform 0.35s;transition:visibility 0.35s, transform 0.35s;transition:visibility 0.35s, transform 0.35s, -webkit-transform 0.35s}.joe_action_item.scroll.active{visibility:visible;-webkit-transform:scale(1);transform:scale(1)}.joe_action_item.mode svg{-webkit-transform:scale(0);transform:scale(0);opacity:0;transition:opacity 0.85s, -webkit-transform 0.85s;transition:transform 0.85s, opacity 0.85s;transition:transform 0.85s, opacity 0.85s, -webkit-transform 0.85s}.joe_action_item.mode svg.active{-webkit-transform:scale(1);transform:scale(1);opacity:1}.joe_comment{background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow);padding:15px}.joe_comment__title{font-weight:500;text-align:center;font-size:24px;color:var(--main);text-shadow:var(--text-shadow);border-bottom:1px solid var(--classC);margin-bottom:15px;padding-bottom:15px}.joe_comment__close{display:flex;align-items:center;justify-content:center;color:var(--routine)}.joe_comment__close-icon{fill:var(--routine);margin-right:5px}.joe_comment__respond-type{display:flex;align-items:center;justify-content:flex-end}.joe_comment__respond-type .item{background:var(--classD);padding:0 15px;height:32px;color:var(--main);border:none;transition:color 0.35s, background 0.35s}.joe_comment__respond-type .item:first-child{border-top-left-radius:var(--radius-inner)}.joe_comment__respond-type .item:last-child{border-top-right-radius:var(--radius-inner)}.joe_comment__respond-type .item.active{color:#fff;background:var(--theme)}.joe_comment__respond-form{border-radius:6px 0 6px 6px;background:var(--classD)}.joe_comment__respond-form .head{display:flex;align-items:center;border-bottom:1px solid var(--classA)}.joe_comment__respond-form .head .list{flex:1}.joe_comment__respond-form .head .list input{width:100%;border:none;background:transparent;padding:0 15px;height:40px;color:var(--routine)}.joe_comment__respond-form .head .list:nth-child(2){position:relative}.joe_comment__respond-form .head .list:nth-child(2)::after,.joe_comment__respond-form .head .list:nth-child(2)::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:1px;height:15px;background:var(--classA)}.joe_comment__respond-form .head .list:nth-child(2)::before{left:0}.joe_comment__respond-form .head .list:nth-child(2)::after{right:0}.joe_comment__respond-form .body{padding:15px}.joe_comment__respond-form .body .text{width:100%;height:200px;border:none;resize:none;vertical-align:middle;color:var(--routine);background:transparent}.joe_comment__respond-form .body .draw{position:relative;width:100%}.joe_comment__respond-form .body .draw .line{display:flex;align-items:center;position:absolute;top:10px;left:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .line li{cursor:pointer;margin-right:10px;color:var(--main);transition:color 0.35s}.joe_comment__respond-form .body .draw .line li.active{color:var(--theme)}.joe_comment__respond-form .body .draw .color{display:flex;align-items:center;position:absolute;bottom:10px;left:10px}.joe_comment__respond-form .body .draw .color li{width:20px;height:20px;border-radius:50%;margin:0 5px;cursor:pointer;transition:box-shadow 0.35s}.joe_comment__respond-form .body .draw .color li.active{box-shadow:0 4px 10px rgba(0,0,0,0.35)}.joe_comment__respond-form .body .draw .color li:nth-child(1){background:#303133}.joe_comment__respond-form .body .draw .color li:nth-child(2){background:#67c23a}.joe_comment__respond-form .body .draw .color li:nth-child(3){background:#e6a23c}.joe_comment__respond-form .body .draw .color li:nth-child(4){background:#f56c6c}.joe_comment__respond-form .body .draw .icon{position:absolute;right:10px;cursor:pointer;fill:var(--minor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_comment__respond-form .body .draw .icon-undo{top:10px}.joe_comment__respond-form .body .draw .icon-animate{bottom:10px}.joe_comment__respond-form .body .draw canvas{background:var(--background);border-radius:var(--radius-inner)}.joe_comment__respond-form .foot{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .owo{min-height:32px;padding-top:3px}.joe_comment__respond-form .foot .owo .seat{text-align:center;color:var(--routine);height:26px;line-height:26px;background:var(--background);opacity:0.85;border-radius:13px;width:70px}.joe_comment__respond-form .foot .submit{position:absolute;top:0;right:15px;white-space:nowrap}.joe_comment__respond-form .foot .submit .cancle{display:none;color:var(--main);cursor:pointer;margin-right:10px;transition:color 0.35s}.joe_comment__respond-form .foot .submit .cancle:hover{color:var(--theme)}.joe_comment__respond-form .foot .submit button{border-radius:3px;height:32px;padding:0 15px;border:none;background:var(--theme);color:#fff;font-size:14px}.joe_comment__respond-form .foot .submit button:hover{-webkit-animation:5s ease-in-out 0s infinite normal none running shaked;animation:5s ease-in-out 0s infinite normal none running shaked}.joe_comment .comment-list{padding-top:15px}.joe_comment .comment-list__item-contain .term{display:flex;margin-bottom:15px}.joe_comment .comment-list__item-contain .term .avatar{width:48px;height:48px;border-radius:50%;margin-right:15px;padding:3px;border:1px solid var(--classD);-o-object-fit:cover;object-fit:cover}.joe_comment .comment-list__item-contain .term .content{min-width:0;flex:1;border-bottom:1px solid var(--classC);padding-bottom:15px}.joe_comment .comment-list__item-contain .term .content .user{display:flex;align-items:center;margin-bottom:8px;line-height:20px;color:var(--main)}.joe_comment .comment-list__item-contain .term .content .user .author{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .user .author a{color:#409eff}.joe_comment .comment-list__item-contain .term .content .user .owner{background:var(--theme);color:#fff;padding:0 5px;border-radius:2px;font-style:normal}.joe_comment .comment-list__item-contain .term .content .user .agent{margin-left:auto;font-size:12px;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .user .waiting{color:#e6a23c;font-style:normal}.joe_comment .comment-list__item-contain .term .content .substance{width:100%;background:var(--classD);padding:12px 15px;border-radius:0 var(--radius-inner) var(--radius-inner) 10px;color:var(--main);margin-bottom:8px;word-break:break-all;line-height:24px}.joe_comment .comment-list__item-contain .term .content .substance .parent{color:#388bff;margin-bottom:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:500}.joe_comment .comment-list__item-contain .term .content .substance .owo_image{height:22px}.joe_comment .comment-list__item-contain .term .content .substance .draw_image{max-width:100%}.joe_comment .comment-list__item-contain .term .content .handle{display:flex;align-items:center;color:var(--minor)}.joe_comment .comment-list__item-contain .term .content .handle .date{margin-right:10px}.joe_comment .comment-list__item-contain .term .content .handle .reply{display:flex;align-items:center;color:var(--main);font-size:13px;cursor:pointer;transition:color 0.35s}.joe_comment .comment-list__item-contain .term .content .handle .reply .icon{margin-right:5px}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover{color:var(--theme)}.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon{fill:var(--theme)}.joe_comment .comment-list__item-children{padding-left:63px}.joe_comment .comment-list__item-children .comment-list__item-children{padding-left:0}.joe_comment .comment-list__item .joe_comment__respond{margin-left:63px;margin-bottom:15px;-webkit-animation:showComment 0.5s;animation:showComment 0.5s}.joe_comment .comment-list .comment-list{padding-top:0}.joe_comment .joe_pagination{padding-top:0}.joe_run__day,.joe_run__hour,.joe_run__minute,.joe_run__second{font-weight:500;color:var(--theme)}.joe_owo__contain{position:relative}.joe_owo__contain .seat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.joe_owo__contain .box{width:100%;display:none;background:var(--background);border-radius:var(--radius-inner);overflow:hidden;margin-top:15px}.joe_owo__contain .box .scroll{display:none;max-height:200px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:none;padding:5px}.joe_owo__contain .box .scroll .item{text-align:center;width:calc(100% / 18);display:inline-block;padding:5px;cursor:pointer;border-radius:var(--radius-inner);transition:background 0.25s}.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}.joe_owo__contain .box .scroll .item:hover{background:var(--classD)}.joe_owo__contain .box .scroll:nth-child(3) .item{color:var(--routine);width:calc(100% / 5)}.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid var(--classC)}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s, color 0.25s}.joe_owo__contain .box .bar .item.active{color:#fff;background:var(--theme)}.profile-color-modes-illu-frame{opacity:0}.profile-color-modes-illu-red{stroke:#da3633}.profile-color-modes-illu-orange{stroke:#f0883e}.profile-color-modes-illu-purple{stroke:#8957e5}.profile-color-modes-illu-green{stroke:#3fb950}.profile-color-modes-illu-blue{stroke:#388bfd}.profile-color-modes-illu-group{-webkit-animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;animation:profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards}.profile-color-modes-illu-frame{-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:first-child{opacity:1;-webkit-animation:profile-color-modes-illu-anim-frame-hide 0s forwards;animation:profile-color-modes-illu-anim-frame-hide 0s forwards}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation:profile-color-modes-illu-anim-frame-show 0s forwards;animation:profile-color-modes-illu-anim-frame-show 0s forwards}.profile-color-modes-illu-red{-webkit-animation-delay:0.4s;animation-delay:0.4s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-orange{-webkit-animation-delay:0.5s;animation-delay:0.5s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-purple{-webkit-animation-delay:0.6s;animation-delay:0.6s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-blue{-webkit-animation-delay:0.7s;animation-delay:0.7s;-webkit-animation-duration:0.1s;animation-duration:0.1s}.profile-color-modes-illu-green{-webkit-animation-delay:0.8s;animation-delay:0.8s;-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5);animation-timing-function:cubic-bezier(0.47, 2.92, 0.84, -1.5)}.profile-color-modes-illu-frame:first-child{-webkit-animation-delay:1.8s;animation-delay:1.8s}.profile-color-modes-illu-frame:nth-child(2){-webkit-animation-delay:1.8s, 2.58s;animation-delay:1.8s, 2.58s}.profile-color-modes-illu-frame:nth-child(3){-webkit-animation-delay:2.58s, 2.66s;animation-delay:2.58s, 2.66s}.profile-color-modes-illu-frame:nth-child(4){-webkit-animation-delay:2.66s, 2.78s;animation-delay:2.66s, 2.78s}.profile-color-modes-illu-frame:nth-child(5){-webkit-animation-delay:2.78s, 2.84s;animation-delay:2.78s, 2.84s}.profile-color-modes-illu-frame:nth-child(6){-webkit-animation-delay:2.84s, 3.44s;animation-delay:2.84s, 3.44s}.profile-color-modes-illu-frame:nth-child(7){-webkit-animation-delay:3.44s, 3.56s;animation-delay:3.44s, 3.56s}.profile-color-modes-illu-frame:nth-child(8){-webkit-animation-delay:3.56s;animation-delay:3.56s}.profile-color-modes-illu-frame:nth-child(9),.profile-color-modes-illu-frame:nth-child(10){-webkit-animation:none;animation:none}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@-webkit-keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes showComment{0%{opacity:0;-webkit-transform:scale(0.3);transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(0.9);transform:scale(0.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@keyframes box_shadow{0%{box-shadow:0 0 0 0 #f56c6c}}@-webkit-keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes progress{0%{background-position:0 0}100%{background-position:30px 0}}@-webkit-keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes list_thumbnail_loading{0%{-webkit-transform:scale(0.85);transform:scale(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes list_title_loading{0%{width:80%}100%{width:95%}}@keyframes list_title_loading{0%{width:80%}100%{width:95%}}@-webkit-keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@keyframes list_abstract_loading{0%{width:60%}100%{width:80%}}@-webkit-keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@keyframes profile-color-modes-illu-anim{0%{stroke:#666}}@-webkit-keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@keyframes profile-color-modes-illu-anim-frame-show{0%{opacity:0;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}to{opacity:1}}@-webkit-keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@keyframes profile-color-modes-illu-anim-frame-hide{0%{opacity:1;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{opacity:0}}@-webkit-keyframes shaked{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}@keyframes shaked{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-0.5px) rotate(-1.5deg);transform:translateY(-0.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(0.5px) rotate(-1.5deg);transform:translateY(0.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}28%{-webkit-transform:translateY(0.5px) rotate(1.5deg);transform:translateY(0.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}50%{-webkit-transform:translateY(0.5px) rotate(0.5deg);transform:translateY(0.5px) rotate(0.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(0.5px) rotate(2.5deg);transform:translateY(0.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-0.5deg);transform:translateY(1.5px) rotate(-0.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(0.5deg);transform:translateY(1.5px) rotate(0.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}76%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-0.5px) rotate(0.5deg);transform:translateY(-0.5px) rotate(0.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-0.5px) rotate(2.5deg);transform:translateY(-0.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-0.5deg);transform:translateY(2.5px) rotate(-0.5deg)}92%{-webkit-transform:translateY(0.5px) rotate(-0.5deg);transform:translateY(0.5px) rotate(-0.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(0.5deg);transform:translateY(2.5px) rotate(0.5deg)}96%{-webkit-transform:translateY(-0.5px) rotate(1.5deg);transform:translateY(-0.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-0.5deg);transform:translateY(-1.5px) rotate(-0.5deg)}0%,100%{-webkit-transform:translate(0px) rotate(0deg);transform:translate(0px) rotate(0deg)}}
diff --git a/assets/css/joe.global.scss b/assets/css/joe.global.scss
index acfd026..0752e2b 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,3126 +1,3145 @@
 .joe_dropdown {
-    position: relative;
-    &__link {
-        display: flex;
-        align-items: center;
-        &-icon {
-            transition: transform 0.35s;
-        }
-    }
-    &__menu {
-        position: absolute;
-        left: 50%;
-        visibility: hidden;
-        z-index: 999;
-        border-top: 3px solid var(--theme);
-        transform-origin: top;
-        background: var(--background);
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-        border-radius: 0 0 var(--radius-inner) var(--radius-inner);
-        padding: 10px 0;
-        opacity: 0;
-        transform: translateX(-50%) perspective(600px) rotateX(-45deg);
-        transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
-        &::before {
-            content: '';
-            position: absolute;
-            top: -10px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border-left: 7px solid transparent;
-            border-right: 7px solid transparent;
-            border-bottom: 7px solid var(--theme);
-        }
-    }
-    &.active {
-        .joe_dropdown__link-icon {
-            transform: rotate(-180deg);
-        }
-        .joe_dropdown__menu {
-            visibility: visible;
-            opacity: 1;
-            transform: translateX(-50%) perspective(600px) rotateX(0);
-        }
-    }
+	position: relative;
+	&__link {
+		display: flex;
+		align-items: center;
+		&-icon {
+			transition: transform 0.35s;
+		}
+	}
+	&__menu {
+		position: absolute;
+		left: 50%;
+		visibility: hidden;
+		z-index: 999;
+		border-top: 3px solid var(--theme);
+		transform-origin: top;
+		background: var(--background);
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+		border-radius: 0 0 var(--radius-inner) var(--radius-inner);
+		padding: 10px 0;
+		opacity: 0;
+		transform: translateX(-50%) perspective(600px) rotateX(-45deg);
+		transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
+		&::before {
+			content: '';
+			position: absolute;
+			top: -10px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 0;
+			height: 0;
+			border-left: 7px solid transparent;
+			border-right: 7px solid transparent;
+			border-bottom: 7px solid var(--theme);
+		}
+	}
+	&.active {
+		.joe_dropdown__link-icon {
+			transform: rotate(-180deg);
+		}
+		.joe_dropdown__menu {
+			visibility: visible;
+			opacity: 1;
+			transform: translateX(-50%) perspective(600px) rotateX(0);
+		}
+	}
 }
 
 .joe_header {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    background: var(--background);
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    &__above {
-        position: relative;
-        z-index: 999;
-        background: var(--background);
-        .joe_container {
-            align-items: center;
-        }
-        &-logo {
-            position: relative;
-            display: flex;
-            align-items: center;
-            height: 60px;
-            padding-right: 15px;
-            margin-right: 15px;
-            img {
-                max-width: 150px;
-                max-height: 50px;
-                object-fit: cover;
-            }
-            svg {
-                display: none;
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                width: 1px;
-                height: 20px;
-                background: var(--classC);
-                transform: translateY(-50%);
-            }
-        }
-        &-nav {
-            display: flex;
-            align-items: center;
-            .item {
-                position: relative;
-                height: 60px;
-                line-height: 60px;
-                font-size: 15px;
-                padding: 0 8px;
-                margin-right: 15px;
-                transition: color 0.35s;
-                white-space: nowrap;
-                color: var(--main);
-                &:last-child {
-                    margin-right: 0;
-                }
-                &::after {
-                    content: '';
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    height: 3px;
-                    transition: opacity 0.5s, transform 0.5s;
-                    border-radius: 6px 6px 0 0;
-                    opacity: 0;
-                    transform: scaleX(0.25);
-                    background: var(--theme);
-                }
-                &.active,
-                &:hover {
-                    color: var(--theme);
-                    &::after {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-                }
-            }
-            .joe_dropdown {
-                &__link {
-                    a {
-                        height: 60px;
-                        line-height: 60px;
-                        font-size: 15px;
-                        padding-left: 8px;
-                        padding-right: 3px;
-                        transition: color 0.35s;
-                        white-space: nowrap;
-                        color: var(--main);
-                    }
-                }
-                &__menu {
-                    width: 110px;
-                    text-align: center;
-                    a {
-                        display: block;
-                        line-height: 34px;
-                        height: 34px;
-                        transition: color 0.35s, background 0.35s;
-                        color: var(--minor);
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        padding: 0 15px;
-                        &:hover,
-                        &.active {
-                            color: var(--theme);
-                            background: var(--classD);
-                        }
-                    }
-                }
-            }
-        }
-        &-search {
-            position: relative;
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            .input {
-                background: var(--classC);
-                width: 170px;
-                height: 34px;
-                border: 1px solid transparent;
-                padding: 0 18px;
-                color: var(--routine);
-                transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
-                border-radius: 17px 0 0 17px;
-                &:focus {
-                    background: var(--background);
-                    border-color: var(--theme);
-                    padding-right: 28px;
-                    ~ .icon {
-                        transform: translate3d(0, -50%, 0) rotateY(180deg);
-                    }
-                }
-            }
-            .submit {
-                position: relative;
-                z-index: 1;
-                height: 34px;
-                border: none;
-                background: var(--theme);
-                color: #fff;
-                border-radius: 0 17px 17px 0;
-                padding: 0 10px;
-            }
-            .icon {
-                position: absolute;
-                top: 50%;
-                left: 142px;
-                width: 28px;
-                height: 38px;
-                background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
-                background-size: 100% 100%;
-                transition: transform 0.35s;
-                transform: translate3d(100%, -50%, 0) rotateY(180deg);
-            }
-            .result {
-                position: absolute;
-                z-index: 2;
-                top: 60px;
-                left: 0;
-                right: 0;
-                background: var(--background);
-                box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-                border-radius: var(--radius-inner);
-                visibility: hidden;
-                opacity: 0;
-                transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
-                transform: translate3d(0, 15px, 0);
-                &.active {
-                    transform: translate3d(0, 0, 0);
-                    opacity: 1;
-                    visibility: visible;
-                }
-                .item {
-                    height: 40px;
-                    line-height: 40px;
-                    border-bottom: 1px solid var(--classD);
-                    display: flex;
-                    align-items: center;
-                    overflow: hidden;
-                    padding: 0 10px;
-                    transition: background 0.35s;
-                    &:last-child {
-                        border-bottom: none;
-                    }
-                    &:nth-child(1) .sort {
-                        background: #fe2d46;
-                    }
-                    &:nth-child(2) .sort {
-                        background: #f60;
-                    }
-                    &:nth-child(3) .sort {
-                        background: #faa90e;
-                    }
-                    &:hover {
-                        background: var(--classD);
-                    }
-                    .sort {
-                        color: #fff;
-                        background: #7f7f8c;
-                        width: 18px;
-                        height: 18px;
-                        line-height: 18px;
-                        border-radius: 2px;
-                        text-align: center;
-                        margin-right: 8px;
-                        font-weight: 500;
-                    }
-                    .text {
-                        flex: 1;
-                        min-width: 0;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        color: var(--routine);
-                        font-size: 12px;
-                    }
-                    .views {
-                        color: var(--seat);
-                        font-size: 12px;
-                        margin-left: 5px;
-                    }
-                }
-            }
-        }
-        &-searchicon,
-        &-slideicon {
-            display: none;
-            width: 20px;
-            height: 20px;
-            fill: var(--routine);
-            cursor: pointer;
-        }
-        &-searchicon {
-            margin-left: auto;
-        }
-    }
-    &__below {
-        position: relative;
-        border-top: 1px solid var(--classC);
-        height: 45px;
-        &-class {
-            display: flex;
-            .item {
-                margin-right: 15px;
-                color: var(--minor);
-                height: 45px;
-                line-height: 45px;
-                transition: color 0.35s;
-                white-space: nowrap;
-                &:hover,
-                &.active {
-                    color: var(--theme);
-                }
-            }
-            .joe_dropdown {
-                margin-right: 15px;
-                &__link {
-                    .item {
-                        margin-right: 3px;
-                    }
-                }
-                &__menu {
-                    width: 110px;
-                    text-align: center;
-                    a {
-                        display: block;
-                        height: 34px;
-                        line-height: 34px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        color: var(--minor);
-                        transition: color 0.35s, background 0.35s;
-                        &:hover,
-                        &.active {
-                            color: var(--theme);
-                            background: var(--classD);
-                        }
-                    }
-                }
-            }
-        }
-        &-progress {
-            position: absolute;
-            z-index: 1;
-            left: 0;
-            bottom: -3px;
-            height: 3px;
-            border-radius: 1.5px;
-            background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
-            transition: width 0.35s;
-        }
-    }
-    &__searchout {
-        position: absolute;
-        top: 60px;
-        left: 0;
-        right: 0;
-        z-index: 890;
-        background: var(--background);
-        border-top: 1px solid var(--classC);
-        transform: translate3d(0, -100%, 0);
-        transition: transform 0.35s, visibility 0.35s;
-        visibility: hidden;
-        &.active {
-            visibility: visible;
-            transform: translate3d(0, 0, 0);
-        }
-        &-inner {
-            padding: 15px 0;
-            width: 100%;
-            .search {
-                width: 100%;
-                display: flex;
-                align-items: center;
-                input {
-                    flex: 1;
-                    height: 36px;
-                    padding: 0 10px;
-                    border: 1px solid var(--classB);
-                    border-right: none;
-                    border-radius: 2px 0 0 2px;
-                    color: var(--routine);
-                    background: var(--classD);
-                }
-                button {
-                    padding: 0 10px;
-                    height: 36px;
-                    border: none;
-                    background: var(--theme);
-                    color: #fff;
-                    border-radius: 0 2px 2px 0;
-                }
-            }
-            .title {
-                color: var(--routine);
-                padding: 15px 0 10px;
-                font-size: 16px;
-                display: flex;
-                align-items: center;
-                .icon {
-                    width: 22px;
-                    height: 22px;
-                    fill: var(--routine);
-                    margin-right: 5px;
-                }
-            }
-            .cloud {
-                display: flex;
-                flex-wrap: wrap;
-                margin: 0 -5px -5px;
-                .item {
-                    padding: 5px;
-                    a {
-                        display: block;
-                        padding: 0 10px;
-                        height: 24px;
-                        line-height: 24px;
-                        border-radius: 2px;
-                        font-size: 12px;
-                        color: #fff;
-                    }
-                }
-            }
-        }
-    }
-    &__slideout {
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: 80%;
-        z-index: 1020;
-        background: var(--classD);
-        transform: translate3d(-100%, 0, 0);
-        visibility: hidden;
-        transition: transform 0.35s, visibility 0.35s;
-        overflow-y: auto;
-        padding: 135px 15px 15px;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        &.active {
-            visibility: visible;
-            transform: translate3d(0, 0, 0);
-        }
-        &-image {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 150px;
-            object-fit: cover;
-            z-index: -1;
-        }
-        &-author {
-            display: flex;
-            margin-bottom: 15px;
-            background: var(--background);
-            border-radius: var(--radius-wrap);
-            padding: 15px;
-            box-shadow: var(--box-shadow);
-            .avatar {
-                width: 50px;
-                height: 50px;
-                margin-right: 10px;
-                border-radius: var(--radius-inner);
-            }
-            .info {
-                overflow: hidden;
-                line-height: 25px;
-                .link,
-                .motto {
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .link {
-                    display: block;
-                    font-size: 15px;
-                    font-weight: 500;
-                    color: var(--main);
-                }
-                .motto {
-                    font-size: 12px;
-                    color: var(--routine);
-                }
-            }
-        }
-        &-count {
-            background: var(--background);
-            border-radius: var(--radius-wrap);
-            padding: 10px 15px;
-            box-shadow: var(--box-shadow);
-            margin-bottom: 15px;
-            .item {
-                display: flex;
-                align-items: center;
-                color: var(--routine);
-                padding: 5px 0;
-                .icon {
-                    width: 15px;
-                    height: 15px;
-                    fill: var(--routine);
-                    margin-right: 5px;
-                }
-                strong {
-                    font-weight: 500;
-                    color: var(--theme);
-                }
-            }
-        }
-        &-menu {
-            background: var(--background);
-            padding: 10px 15px;
-            border-radius: var(--radius-wrap);
-            overflow: hidden;
-            box-shadow: var(--box-shadow);
-            .link {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 10px 0;
-                color: var(--main);
-                transition: color 0.15s;
-                a {
-                    transition: color 0.15s;
-                    color: var(--routine);
-                }
-                .icon {
-                    width: 13px;
-                    height: 13px;
-                    fill: var(--minor);
-                    transition: transform 0.15s, fill 0.15s;
-                }
-                &.in {
-                    color: var(--theme);
-                    a {
-                        color: var(--theme);
-                    }
-                    .icon {
-                        fill: var(--theme);
-                        transform: rotate(90deg);
-                    }
-                }
-            }
-            .current {
-                a {
-                    color: var(--theme);
-                    font-weight: 500;
-                    font-size: 15px;
-                }
-            }
-            .slides {
-                display: none;
-                border-left: 1px solid var(--classC);
-                padding-left: 15px;
-                .link {
-                    color: var(--routine);
-                }
-                .current {
-                    color: var(--theme);
-                    font-weight: 500;
-                    font-size: 15px;
-                }
-            }
-        }
-    }
-    &__mask {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.65);
-        backdrop-filter: blur(5px);
-        opacity: 0;
-        visibility: hidden;
-        transition: visibility 0.35s, opacity 0.35s;
-        z-index: 880;
-        &.active {
-            visibility: visible;
-            opacity: 1;
-        }
-        &.slideout {
-            z-index: 1010;
-        }
-    }
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	background: var(--background);
+	box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+	&__above {
+		position: relative;
+		z-index: 999;
+		background: var(--background);
+		.joe_container {
+			align-items: center;
+		}
+		&-logo {
+			position: relative;
+			display: flex;
+			align-items: center;
+			height: 60px;
+			padding-right: 15px;
+			margin-right: 15px;
+			img {
+				max-width: 150px;
+				max-height: 50px;
+				object-fit: cover;
+			}
+			svg {
+				display: none;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				right: 0;
+				width: 1px;
+				height: 20px;
+				background: var(--classC);
+				transform: translateY(-50%);
+			}
+		}
+		&-nav {
+			display: flex;
+			align-items: center;
+			.item {
+				position: relative;
+				height: 60px;
+				line-height: 60px;
+				font-size: 15px;
+				padding: 0 8px;
+				margin-right: 15px;
+				transition: color 0.35s;
+				white-space: nowrap;
+				color: var(--main);
+				&:last-child {
+					margin-right: 0;
+				}
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					height: 3px;
+					transition: opacity 0.5s, transform 0.5s;
+					border-radius: 6px 6px 0 0;
+					opacity: 0;
+					transform: scaleX(0.25);
+					background: var(--theme);
+				}
+				&.active,
+				&:hover {
+					color: var(--theme);
+					&::after {
+						opacity: 1;
+						transform: scaleX(1);
+					}
+				}
+			}
+			.joe_dropdown {
+				&__link {
+					a {
+						height: 60px;
+						line-height: 60px;
+						font-size: 15px;
+						padding-left: 8px;
+						padding-right: 3px;
+						transition: color 0.35s;
+						white-space: nowrap;
+						color: var(--main);
+					}
+				}
+				&__menu {
+					width: 110px;
+					text-align: center;
+					a {
+						display: block;
+						line-height: 34px;
+						height: 34px;
+						transition: color 0.35s, background 0.35s;
+						color: var(--minor);
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						padding: 0 15px;
+						&:hover,
+						&.active {
+							color: var(--theme);
+							background: var(--classD);
+						}
+					}
+				}
+			}
+		}
+		&-search {
+			position: relative;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			.input {
+				background: var(--classC);
+				width: 170px;
+				height: 34px;
+				border: 1px solid transparent;
+				padding: 0 18px;
+				color: var(--routine);
+				transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
+				border-radius: 17px 0 0 17px;
+				&:focus {
+					background: var(--background);
+					border-color: var(--theme);
+					padding-right: 28px;
+					~ .icon {
+						transform: translate3d(0, -50%, 0) rotateY(180deg);
+					}
+				}
+			}
+			.submit {
+				position: relative;
+				z-index: 1;
+				height: 34px;
+				border: none;
+				background: var(--theme);
+				color: #fff;
+				border-radius: 0 17px 17px 0;
+				padding: 0 10px;
+			}
+			.icon {
+				position: absolute;
+				top: 50%;
+				left: 142px;
+				width: 28px;
+				height: 38px;
+				background: url(https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/search.png);
+				background-size: 100% 100%;
+				transition: transform 0.35s;
+				transform: translate3d(100%, -50%, 0) rotateY(180deg);
+			}
+			.result {
+				position: absolute;
+				z-index: 2;
+				top: 60px;
+				left: 0;
+				right: 0;
+				background: var(--background);
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+				border-radius: var(--radius-inner);
+				visibility: hidden;
+				opacity: 0;
+				transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
+				transform: translate3d(0, 15px, 0);
+				&.active {
+					transform: translate3d(0, 0, 0);
+					opacity: 1;
+					visibility: visible;
+				}
+				.item {
+					height: 40px;
+					line-height: 40px;
+					border-bottom: 1px solid var(--classD);
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					padding: 0 10px;
+					transition: background 0.35s;
+					&:last-child {
+						border-bottom: none;
+					}
+					&:nth-child(1) .sort {
+						background: #fe2d46;
+					}
+					&:nth-child(2) .sort {
+						background: #f60;
+					}
+					&:nth-child(3) .sort {
+						background: #faa90e;
+					}
+					&:hover {
+						background: var(--classD);
+					}
+					.sort {
+						color: #fff;
+						background: #7f7f8c;
+						width: 18px;
+						height: 18px;
+						line-height: 18px;
+						border-radius: 2px;
+						text-align: center;
+						margin-right: 8px;
+						font-weight: 500;
+					}
+					.text {
+						flex: 1;
+						min-width: 0;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: var(--routine);
+						font-size: 12px;
+					}
+					.views {
+						color: var(--seat);
+						font-size: 12px;
+						margin-left: 5px;
+					}
+				}
+			}
+		}
+		&-searchicon,
+		&-slideicon {
+			display: none;
+			width: 20px;
+			height: 20px;
+			fill: var(--routine);
+			cursor: pointer;
+		}
+		&-searchicon {
+			margin-left: auto;
+		}
+	}
+	&__below {
+		position: relative;
+		border-top: 1px solid var(--classC);
+		height: 45px;
+		&-class {
+			display: flex;
+			.item {
+				margin-right: 15px;
+				color: var(--minor);
+				height: 45px;
+				line-height: 45px;
+				transition: color 0.35s;
+				white-space: nowrap;
+				&:hover,
+				&.active {
+					color: var(--theme);
+				}
+			}
+			.joe_dropdown {
+				margin-right: 15px;
+				&__link {
+					.item {
+						margin-right: 3px;
+					}
+				}
+				&__menu {
+					width: 110px;
+					text-align: center;
+					a {
+						display: block;
+						height: 34px;
+						line-height: 34px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						color: var(--minor);
+						transition: color 0.35s, background 0.35s;
+						&:hover,
+						&.active {
+							color: var(--theme);
+							background: var(--classD);
+						}
+					}
+				}
+			}
+		}
+		&-progress {
+			position: absolute;
+			z-index: 1;
+			left: 0;
+			bottom: -3px;
+			height: 3px;
+			border-radius: 1.5px;
+			background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
+			transition: width 0.35s;
+		}
+	}
+	&__searchout {
+		position: absolute;
+		top: 60px;
+		left: 0;
+		right: 0;
+		z-index: 890;
+		background: var(--background);
+		border-top: 1px solid var(--classC);
+		transform: translate3d(0, -100%, 0);
+		transition: transform 0.35s, visibility 0.35s;
+		visibility: hidden;
+		&.active {
+			visibility: visible;
+			transform: translate3d(0, 0, 0);
+		}
+		&-inner {
+			padding: 15px 0;
+			width: 100%;
+			.search {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				input {
+					flex: 1;
+					height: 36px;
+					padding: 0 10px;
+					border: 1px solid var(--classB);
+					border-right: none;
+					border-radius: 2px 0 0 2px;
+					color: var(--routine);
+					background: var(--classD);
+				}
+				button {
+					padding: 0 10px;
+					height: 36px;
+					border: none;
+					background: var(--theme);
+					color: #fff;
+					border-radius: 0 2px 2px 0;
+				}
+			}
+			.title {
+				color: var(--routine);
+				padding: 15px 0 10px;
+				font-size: 16px;
+				display: flex;
+				align-items: center;
+				.icon {
+					width: 22px;
+					height: 22px;
+					fill: var(--routine);
+					margin-right: 5px;
+				}
+			}
+			.cloud {
+				display: flex;
+				flex-wrap: wrap;
+				margin: 0 -5px -5px;
+				.item {
+					padding: 5px;
+					a {
+						display: block;
+						padding: 0 10px;
+						height: 24px;
+						line-height: 24px;
+						border-radius: 2px;
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+	&__slideout {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 80%;
+		z-index: 1020;
+		background: var(--classD);
+		transform: translate3d(-100%, 0, 0);
+		visibility: hidden;
+		transition: transform 0.35s, visibility 0.35s;
+		overflow-y: auto;
+		padding: 135px 15px 15px;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		&.active {
+			visibility: visible;
+			transform: translate3d(0, 0, 0);
+		}
+		&-image {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 150px;
+			object-fit: cover;
+			z-index: -1;
+		}
+		&-author {
+			display: flex;
+			margin-bottom: 15px;
+			background: var(--background);
+			border-radius: var(--radius-wrap);
+			padding: 15px;
+			box-shadow: var(--box-shadow);
+			.avatar {
+				width: 50px;
+				height: 50px;
+				margin-right: 10px;
+				border-radius: var(--radius-inner);
+			}
+			.info {
+				overflow: hidden;
+				line-height: 25px;
+				.link,
+				.motto {
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+				.link {
+					display: block;
+					font-size: 15px;
+					font-weight: 500;
+					color: var(--main);
+				}
+				.motto {
+					font-size: 12px;
+					color: var(--routine);
+				}
+			}
+		}
+		&-count {
+			background: var(--background);
+			border-radius: var(--radius-wrap);
+			padding: 10px 15px;
+			box-shadow: var(--box-shadow);
+			margin-bottom: 15px;
+			.item {
+				display: flex;
+				align-items: center;
+				color: var(--routine);
+				padding: 5px 0;
+				.icon {
+					width: 15px;
+					height: 15px;
+					fill: var(--routine);
+					margin-right: 5px;
+				}
+				strong {
+					font-weight: 500;
+					color: var(--theme);
+				}
+			}
+		}
+		&-menu {
+			background: var(--background);
+			padding: 10px 15px;
+			border-radius: var(--radius-wrap);
+			overflow: hidden;
+			box-shadow: var(--box-shadow);
+			.link {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 10px 0;
+				color: var(--main);
+				transition: color 0.15s;
+				a {
+					transition: color 0.15s;
+					color: var(--routine);
+				}
+				.icon {
+					width: 13px;
+					height: 13px;
+					fill: var(--minor);
+					transition: transform 0.15s, fill 0.15s;
+				}
+				&.in {
+					color: var(--theme);
+					a {
+						color: var(--theme);
+					}
+					.icon {
+						fill: var(--theme);
+						transform: rotate(90deg);
+					}
+				}
+			}
+			.current {
+				a {
+					color: var(--theme);
+					font-weight: 500;
+					font-size: 15px;
+				}
+			}
+			.slides {
+				display: none;
+				border-left: 1px solid var(--classC);
+				padding-left: 15px;
+				.link {
+					color: var(--routine);
+				}
+				.current {
+					color: var(--theme);
+					font-weight: 500;
+					font-size: 15px;
+				}
+			}
+		}
+	}
+	&__mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.65);
+		backdrop-filter: blur(5px);
+		opacity: 0;
+		visibility: hidden;
+		transition: visibility 0.35s, opacity 0.35s;
+		z-index: 880;
+		&.active {
+			visibility: visible;
+			opacity: 1;
+		}
+		&.slideout {
+			z-index: 1010;
+		}
+	}
 }
 
 .joe_aside {
-    padding: 15px 0;
-    margin-left: 15px;
-    &__item {
-        position: relative;
-        width: 250px;
-        margin-bottom: 15px;
-        border-radius: var(--radius-wrap);
-        box-shadow: var(--box-shadow);
-        overflow: hidden;
-        &:last-child {
-            position: sticky;
-            margin-bottom: 0;
-        }
-        &-title {
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid var(--classC);
-            font-size: 16px;
-            font-weight: 500;
-            height: 45px;
-            line-height: 45px;
-            padding: 0 15px;
-            color: var(--main);
-            .icon {
-                width: 18px;
-                height: 18px;
-                margin-right: 8px;
-                fill: var(--main);
-            }
-            .line {
-                width: 10px;
-                height: 1px;
-                background: #54b5db;
-                margin-left: 12px;
-            }
-        }
-        &-contain {
-            position: relative;
-            padding: 15px;
-        }
-        &.author {
-            background: var(--background);
-            padding: 45px 15px 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 90px;
-                left: 0;
-                width: 100%;
-                height: 30px;
-                z-index: 2;
-                background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
-            }
-            &::after {
-                display: none;
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 273px;
-                background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
-                background-size: cover;
-                z-index: 3;
-                pointer-events: none;
-            }
-            &:hover::after {
-                display: block;
-            }
-            .image {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 120px;
-                object-fit: cover;
-                z-index: 1;
-            }
-            .user {
-                position: relative;
-                z-index: 4;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                padding-bottom: 15px;
-                .avatar {
-                    width: 75px;
-                    height: 75px;
-                    border-radius: 50%;
-                    overflow: hidden;
-                    margin-bottom: 10px;
-                    object-fit: cover;
-                    transition: transform 0.75s;
-                    background: var(--background);
-                    padding: 5px;
-                    &:hover {
-                        transform: rotate(360deg);
-                    }
-                }
-                .link {
-                    color: var(--theme);
-                    margin-bottom: 10px;
-                    font-size: 16px;
-                    font-weight: 500;
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-                .motto {
-                    color: var(--main);
-                    text-align: center;
-                    word-break: break-all;
-                }
-            }
-            .count {
-                width: 100%;
-                padding-bottom: 15px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid var(--classC);
-                .item {
-                    min-width: 0;
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    color: var(--routine);
-                    font-size: 12px;
-                    &:first-child {
-                        border-right: 1px solid var(--classC);
-                    }
-                    .num {
-                        max-width: 70px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        font-weight: 500;
-                        font-size: 22px;
-                        color: var(--main);
-                        margin-bottom: 3px;
-                        text-shadow: var(--text_shadow);
-                    }
-                }
-            }
-            .list {
-                padding-top: 15px;
-                .item {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    line-height: 30px;
-                    .link {
-                        position: relative;
-                        color: var(--routine);
-                        max-width: 85%;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            bottom: 0;
-                            left: 0;
-                            width: 0;
-                            height: 1px;
-                            background: var(--theme);
-                            transition: all 0.35s;
-                        }
-                        &:hover {
-                            color: var(--theme);
-                            &::after {
-                                width: 100%;
-                            }
-                        }
-                    }
-                    .icon {
-                        fill: var(--routine);
-                    }
-                }
-            }
-        }
-        &.timelife {
-            background: var(--background);
-            .item {
-                margin-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                .title {
-                    font-size: 12px;
-                    color: var(--minor);
-                    margin-bottom: 5px;
-                    display: flex;
-                    align-items: center;
-                    .text {
-                        color: var(--theme);
-                        font-weight: 500;
-                        font-size: 14px;
-                        margin: 0 5px;
-                    }
-                }
-                .progress {
-                    display: flex;
-                    align-items: center;
-                    &-bar {
-                        height: 10px;
-                        border-radius: 5px;
-                        overflow: hidden;
-                        background: var(--classC);
-                        width: 0;
-                        min-width: 0;
-                        flex: 1;
-                        margin-right: 5px;
-                        &-inner {
-                            width: 0;
-                            height: 100%;
-                            border-radius: 5px;
-                            transition: width 0.35s;
-                            animation: progress 750ms linear infinite;
-                            &-0 {
-                                background: #bde6ff;
-                                background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-1 {
-                                background: #ffd980;
-                                background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-2 {
-                                background: #ffa9a9;
-                                background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                            &-3 {
-                                background: #67c23a;
-                                background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
-                                background-size: 30px 30px;
-                            }
-                        }
-                    }
-                    &-percentage {
-                        color: var(--minor);
-                    }
-                }
-            }
-        }
-        &.weather {
-            background: var(--background);
-            .joe_aside__item-contain {
-                min-height: 300px;
-            }
-        }
-        &.hot {
-            background: var(--background);
-            .empty {
-                text-align: center;
-                color: var(--routine);
-            }
-            .item {
-                margin-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                &:nth-child(1) .link .sort {
-                    background: #ff183e;
-                }
-                &:nth-child(2) .link .sort {
-                    background: #ff5c38;
-                }
-                &:nth-child(3) .link .sort {
-                    background: #ffb821;
-                }
-                .link {
-                    position: relative;
-                    display: block;
-                    border-radius: var(--radius-inner);
-                    overflow: hidden;
-                    &:hover .image {
-                        transform: scale(1.2);
-                    }
-                    .sort {
-                        position: absolute;
-                        top: 5px;
-                        right: -20px;
-                        background: #7f7f8c;
-                        color: #fff;
-                        width: 65px;
-                        text-align: center;
-                        font-size: 12px;
-                        transform: rotate(45deg);
-                        font-weight: 500;
-                        z-index: 1;
-                        font-style: normal;
-                    }
-                    .image {
-                        width: 100%;
-                        height: 130px;
-                        object-fit: cover;
-                        transition: transform 0.35s;
-                    }
-                    .describe {
-                        position: absolute;
-                        z-index: 1;
-                        left: 0;
-                        right: 0;
-                        bottom: 0;
-                        padding: 10px;
-                        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
-                        font-size: 12px;
-                        color: var(--seat);
-                        h6 {
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            color: #fff;
-                            line-height: 24px;
-                            font-size: 14px;
-                        }
-                    }
-                }
-            }
-        }
-        &.ranking {
-            background: var(--background);
-            .item {
-                display: flex;
-                align-items: center;
-                line-height: 32px;
-                overflow: hidden;
-                &:nth-child(1) .sort {
-                    color: #fe2d46;
-                }
-                &:nth-child(2) .sort {
-                    color: #f60;
-                }
-                &:nth-child(3) .sort {
-                    color: #faa90e;
-                }
-                .sort {
-                    color: var(--minor);
-                    font-weight: 700;
-                    font-size: 18px;
-                    width: 18px;
-                    min-width: 18px;
-                    max-width: 18px;
-                }
-                .link {
-                    position: relative;
-                    color: var(--routine);
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    &::after {
-                        position: absolute;
-                        content: '';
-                        bottom: 0;
-                        left: 0;
-                        width: 0;
-                        height: 1px;
-                        background: var(--theme);
-                        transition: width 0.5s;
-                    }
-                    &:hover {
-                        color: var(--theme);
-                        &::after {
-                            width: 100%;
-                        }
-                    }
-                }
-            }
-            .error {
-                text-align: center;
-                color: var(--routine);
-            }
-        }
-        &.newreply {
-            background: var(--background);
-            .empty {
-                text-align: center;
-                color: var(--routine);
-            }
-            .item {
-                margin-bottom: 15px;
-                border-bottom: 1px dashed var(--classC);
-                padding-bottom: 15px;
-                &:last-child {
-                    margin-bottom: 0;
-                    border-bottom-color: transparent;
-                    padding-bottom: 0;
-                }
-                .user {
-                    display: flex;
-                    margin-bottom: 12px;
-                    .avatar {
-                        width: 40px;
-                        height: 40px;
-                        min-width: 40px;
-                        min-height: 40px;
-                        margin-right: 12px;
-                        border-radius: 50%;
-                        border: 1px solid var(--classA);
-                        padding: 3px;
-                    }
-                    .info {
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-between;
-                        .author {
-                            color: var(--main);
-                            font-weight: 600;
-                            max-width: 150px;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        }
-                        .date {
-                            font-size: 12px;
-                            color: var(--minor);
-                        }
-                    }
-                }
-                .reply {
-                    position: relative;
-                    background: var(--classD);
-                    border-radius: 6px;
-                    padding: 5px 10px;
-                    &::before {
-                        content: '';
-                        width: 0;
-                        height: 0;
-                        border-bottom: 6px solid var(--classD);
-                        border-left: 6px solid transparent;
-                        border-right: 6px solid transparent;
-                        position: absolute;
-                        left: 15px;
-                        bottom: 100%;
-                    }
-                    .link {
-                        display: -webkit-box;
-                        -webkit-line-clamp: 2;
-                        /*! autoprefixer: off */
-                        -webkit-box-orient: vertical;
-                        /* autoprefixer: on */
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        word-break: break-all;
-                        color: var(--minor);
-                        font-size: 13px;
-                        font-weight: 500;
-                        line-height: 24px;
-                        transition: all 0.35s;
-                        max-height: 48px;
-                        &:hover {
-                            color: var(--theme);
-                        }
-                        .owo_image {
-                            height: 18px;
-                            vertical-align: -5px;
-                        }
-                    }
-                }
-            }
-        }
-    }
+	padding: 15px 0;
+	margin-left: 15px;
+	&__item {
+		position: relative;
+		width: 250px;
+		margin-bottom: 15px;
+		border-radius: var(--radius-wrap);
+		box-shadow: var(--box-shadow);
+		overflow: hidden;
+		&:last-child {
+			position: sticky;
+			margin-bottom: 0;
+		}
+		&-title {
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid var(--classC);
+			font-size: 16px;
+			font-weight: 500;
+			height: 45px;
+			line-height: 45px;
+			padding: 0 15px;
+			color: var(--main);
+			.icon {
+				width: 18px;
+				height: 18px;
+				margin-right: 8px;
+				fill: var(--main);
+			}
+			.line {
+				width: 10px;
+				height: 1px;
+				background: #54b5db;
+				margin-left: 12px;
+			}
+		}
+		&-contain {
+			position: relative;
+			padding: 15px;
+		}
+		&.author {
+			background: var(--background);
+			padding: 45px 15px 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 90px;
+				left: 0;
+				width: 100%;
+				height: 30px;
+				z-index: 2;
+				background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
+			}
+			&::after {
+				display: none;
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 273px;
+				background: url('https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/img/snow.gif') no-repeat;
+				background-size: cover;
+				z-index: 3;
+				pointer-events: none;
+			}
+			&:hover::after {
+				display: block;
+			}
+			.image {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 120px;
+				object-fit: cover;
+				z-index: 1;
+			}
+			.user {
+				position: relative;
+				z-index: 4;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding-bottom: 15px;
+				.avatar {
+					width: 75px;
+					height: 75px;
+					border-radius: 50%;
+					overflow: hidden;
+					margin-bottom: 10px;
+					object-fit: cover;
+					transition: transform 0.75s;
+					background: var(--background);
+					padding: 5px;
+					&:hover {
+						transform: rotate(360deg);
+					}
+				}
+				.link {
+					color: var(--theme);
+					margin-bottom: 10px;
+					font-size: 16px;
+					font-weight: 500;
+					&:hover {
+						text-decoration: underline;
+					}
+				}
+				.motto {
+					color: var(--main);
+					text-align: center;
+					word-break: break-all;
+				}
+			}
+			.count {
+				width: 100%;
+				padding-bottom: 15px;
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--classC);
+				.item {
+					min-width: 0;
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					color: var(--routine);
+					font-size: 12px;
+					&:first-child {
+						border-right: 1px solid var(--classC);
+					}
+					.num {
+						max-width: 70px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-weight: 500;
+						font-size: 22px;
+						color: var(--main);
+						margin-bottom: 3px;
+						text-shadow: var(--text_shadow);
+					}
+				}
+			}
+			.list {
+				padding-top: 15px;
+				.item {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					line-height: 30px;
+					.link {
+						position: relative;
+						color: var(--routine);
+						max-width: 85%;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						&::after {
+							content: '';
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 0;
+							height: 1px;
+							background: var(--theme);
+							transition: all 0.35s;
+						}
+						&:hover {
+							color: var(--theme);
+							&::after {
+								width: 100%;
+							}
+						}
+					}
+					.icon {
+						fill: var(--routine);
+					}
+				}
+			}
+		}
+		&.timelife {
+			background: var(--background);
+			.item {
+				margin-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				.title {
+					font-size: 12px;
+					color: var(--minor);
+					margin-bottom: 5px;
+					display: flex;
+					align-items: center;
+					.text {
+						color: var(--theme);
+						font-weight: 500;
+						font-size: 14px;
+						margin: 0 5px;
+					}
+				}
+				.progress {
+					display: flex;
+					align-items: center;
+					&-bar {
+						height: 10px;
+						border-radius: 5px;
+						overflow: hidden;
+						background: var(--classC);
+						width: 0;
+						min-width: 0;
+						flex: 1;
+						margin-right: 5px;
+						&-inner {
+							width: 0;
+							height: 100%;
+							border-radius: 5px;
+							transition: width 0.35s;
+							animation: progress 750ms linear infinite;
+							&-0 {
+								background: #bde6ff;
+								background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-1 {
+								background: #ffd980;
+								background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-2 {
+								background: #ffa9a9;
+								background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+							&-3 {
+								background: #67c23a;
+								background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
+								background-size: 30px 30px;
+							}
+						}
+					}
+					&-percentage {
+						color: var(--minor);
+					}
+				}
+			}
+		}
+		&.weather {
+			background: var(--background);
+			.joe_aside__item-contain {
+				min-height: 300px;
+			}
+		}
+		&.hot {
+			background: var(--background);
+			.empty {
+				text-align: center;
+				color: var(--routine);
+			}
+			.item {
+				margin-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				&:nth-child(1) .link .sort {
+					background: #ff183e;
+				}
+				&:nth-child(2) .link .sort {
+					background: #ff5c38;
+				}
+				&:nth-child(3) .link .sort {
+					background: #ffb821;
+				}
+				.link {
+					position: relative;
+					display: block;
+					border-radius: var(--radius-inner);
+					overflow: hidden;
+					&:hover .image {
+						transform: scale(1.2);
+					}
+					.sort {
+						position: absolute;
+						top: 5px;
+						right: -20px;
+						background: #7f7f8c;
+						color: #fff;
+						width: 65px;
+						text-align: center;
+						font-size: 12px;
+						transform: rotate(45deg);
+						font-weight: 500;
+						z-index: 1;
+						font-style: normal;
+					}
+					.image {
+						width: 100%;
+						height: 130px;
+						object-fit: cover;
+						transition: transform 0.35s;
+					}
+					.describe {
+						position: absolute;
+						z-index: 1;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						padding: 10px;
+						background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
+						font-size: 12px;
+						color: var(--seat);
+						h6 {
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							color: #fff;
+							line-height: 24px;
+							font-size: 14px;
+						}
+					}
+				}
+			}
+		}
+		&.ranking {
+			background: var(--background);
+			.item {
+				display: flex;
+				align-items: center;
+				line-height: 32px;
+				overflow: hidden;
+				&:nth-child(1) .sort {
+					color: #fe2d46;
+				}
+				&:nth-child(2) .sort {
+					color: #f60;
+				}
+				&:nth-child(3) .sort {
+					color: #faa90e;
+				}
+				.sort {
+					color: var(--minor);
+					font-weight: 700;
+					font-size: 18px;
+					width: 18px;
+					min-width: 18px;
+					max-width: 18px;
+				}
+				.link {
+					position: relative;
+					color: var(--routine);
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					&::after {
+						position: absolute;
+						content: '';
+						bottom: 0;
+						left: 0;
+						width: 0;
+						height: 1px;
+						background: var(--theme);
+						transition: width 0.5s;
+					}
+					&:hover {
+						color: var(--theme);
+						&::after {
+							width: 100%;
+						}
+					}
+				}
+			}
+			.error {
+				text-align: center;
+				color: var(--routine);
+			}
+		}
+		&.newreply {
+			background: var(--background);
+			.empty {
+				text-align: center;
+				color: var(--routine);
+			}
+			.item {
+				margin-bottom: 15px;
+				border-bottom: 1px dashed var(--classC);
+				padding-bottom: 15px;
+				&:last-child {
+					margin-bottom: 0;
+					border-bottom-color: transparent;
+					padding-bottom: 0;
+				}
+				.user {
+					display: flex;
+					margin-bottom: 12px;
+					.avatar {
+						width: 40px;
+						height: 40px;
+						min-width: 40px;
+						min-height: 40px;
+						margin-right: 12px;
+						border-radius: 50%;
+						border: 1px solid var(--classA);
+						padding: 3px;
+					}
+					.info {
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						.author {
+							color: var(--main);
+							font-weight: 600;
+							max-width: 150px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+						.date {
+							font-size: 12px;
+							color: var(--minor);
+						}
+					}
+				}
+				.reply {
+					position: relative;
+					background: var(--classD);
+					border-radius: 6px;
+					padding: 5px 10px;
+					&::before {
+						content: '';
+						width: 0;
+						height: 0;
+						border-bottom: 6px solid var(--classD);
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						position: absolute;
+						left: 15px;
+						bottom: 100%;
+					}
+					.link {
+						display: -webkit-box;
+						-webkit-line-clamp: 2;
+						/*! autoprefixer: off */
+						-webkit-box-orient: vertical;
+						/* autoprefixer: on */
+						overflow: hidden;
+						text-overflow: ellipsis;
+						word-break: break-all;
+						color: var(--minor);
+						font-size: 13px;
+						font-weight: 500;
+						line-height: 24px;
+						transition: all 0.35s;
+						max-height: 48px;
+						&:hover {
+							color: var(--theme);
+						}
+						.owo_image {
+							height: 18px;
+							vertical-align: -5px;
+						}
+					}
+				}
+			}
+		}
+		&.advert {
+			display: block;
+			img {
+				width: 100%;
+				object-fit: cover;
+			}
+			.icon {
+				position: absolute;
+				z-index: 1;
+				top: 10px;
+				right: 10px;
+				font-size: 12px;
+				background: rgba(0, 0, 0, 0.25);
+				padding: 2px 5px;
+				border-radius: 2px;
+				color: #ebebeb;
+				pointer-events: none;
+			}
+		}
+	}
 }
 
 .joe_list {
-    &__item {
-        position: relative;
-        width: 100%;
-        border-bottom: 1px solid var(--classC);
-        padding: 15px 0;
-        &:last-child {
-            border-bottom: none;
-        }
-        .information {
-            .title {
-                margin-bottom: 10px;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                /*! autoprefixer: off */
-                -webkit-box-orient: vertical;
-                /* autoprefixer: on */
-                overflow: hidden;
-                text-overflow: ellipsis;
-                word-break: break-all;
-                color: var(--main);
-                font-size: 18px;
-                line-height: 24px;
-                max-height: 48px;
-                transition: color 0.35s;
-                &:hover {
-                    color: var(--theme);
-                }
-                .badge {
-                    height: 20px;
-                    line-height: 20px;
-                    background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
-                    color: #fff;
-                    font-size: 12px;
-                    margin-right: 5px;
-                    border-radius: 2px;
-                    padding: 0 8px;
-                    white-space: nowrap;
-                    vertical-align: 2px;
-                }
-            }
-            .abstract {
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                /*! autoprefixer: off */
-                -webkit-box-orient: vertical;
-                /* autoprefixer: on */
-                overflow: hidden;
-                text-overflow: ellipsis;
-                color: var(--minor);
-                word-break: break-all;
-                line-height: 22px;
-                max-height: 44px;
-                opacity: 0.85;
-            }
-        }
-        .line {
-            position: absolute;
-            z-index: 1;
-            top: 15px;
-            left: -15px;
-            width: 4px;
-            height: 25px;
-            border-radius: 2px;
-            background: var(--theme);
-            transform: scaleY(0);
-            transition: transform 0.35s;
-        }
-        .meta {
-            display: flex;
-            align-items: center;
-            margin-top: auto;
-            color: var(--minor);
-            font-size: 13px;
-            .items {
-                display: flex;
-                align-items: center;
-                li {
-                    &::after {
-                        content: '/';
-                        color: var(--seat);
-                        padding: 0 5px;
-                    }
-                    &:last-child::after {
-                        display: none;
-                    }
-                }
-            }
-            .last {
-                margin-left: auto;
-                display: flex;
-                align-items: center;
-                .icon {
-                    margin-right: 3px;
-                }
-                .link {
-                    color: var(--minor);
-                    &:hover {
-                        color: var(--theme);
-                    }
-                }
-            }
-        }
-        &:hover .line {
-            transform: scaleY(1);
-        }
-        &.default {
-            display: flex;
-            position: relative;
-            &:hover {
-                .thumbnail {
-                    img {
-                        opacity: 0.8;
-                    }
-                    time {
-                        transform: translate3d(0, 0, 0);
-                    }
-                }
-            }
-            .thumbnail {
-                flex-shrink: 0;
-                position: relative;
-                width: 210px;
-                height: 140px;
-                margin-right: 15px;
-                overflow: hidden;
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                    border-radius: var(--radius-inner);
-                    transition: opacity 0.35s;
-                }
-                time {
-                    position: absolute;
-                    z-index: 1;
-                    top: 5px;
-                    right: 5px;
-                    background: var(--theme);
-                    height: 20px;
-                    line-height: 20px;
-                    padding: 0 8px;
-                    color: #fff;
-                    font-size: 12px;
-                    border-radius: 10px;
-                    transition: transform 0.35s;
-                    transform: translate3d(120%, 0, 0);
-                }
-                svg {
-                    position: absolute;
-                    z-index: 1;
-                    top: 5px;
-                    left: 5px;
-                    width: 20px;
-                    height: 20px;
-                    fill: #fff;
-                }
-            }
-            .information {
-                display: flex;
-                flex-direction: column;
-                flex: 1;
-                min-width: 0;
-            }
-        }
-        &.single {
-            &:hover {
-                .thumbnail {
-                    img {
-                        opacity: 0.8;
-                    }
-                    time {
-                        transform: translate3d(0, 0, 0);
-                    }
-                }
-            }
-            .information {
-                margin-bottom: 15px;
-            }
-            .thumbnail {
-                display: block;
-                position: relative;
-                width: 100%;
-                height: 280px;
-                overflow: hidden;
-                margin-bottom: 15px;
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                    border-radius: var(--radius-inner);
-                    transition: opacity 0.35s;
-                }
-                time {
-                    position: absolute;
-                    z-index: 1;
-                    top: 10px;
-                    right: 10px;
-                    background: var(--theme);
-                    height: 20px;
-                    line-height: 20px;
-                    padding: 0 8px;
-                    color: #fff;
-                    font-size: 12px;
-                    border-radius: 10px;
-                    transition: transform 0.35s;
-                    transform: translate3d(120%, 0, 0);
-                }
-                svg {
-                    position: absolute;
-                    z-index: 1;
-                    top: 10px;
-                    left: 10px;
-                    width: 20px;
-                    height: 20px;
-                    fill: #fff;
-                }
-            }
-        }
-        &.multiple {
-            .information {
-                margin-bottom: 15px;
-            }
-            .thumbnail {
-                display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                grid-template-rows: 180px;
-                gap: 15px;
-                margin-bottom: 15px;
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                    transition: transform 0.35s, opacity 0.35s;
-                    border-radius: var(--radius-inner);
-                    &:hover {
-                        transform: scale(1.025);
-                        opacity: 0.85;
-                    }
-                }
-            }
-        }
-        &.none {
-            .information {
-                display: flex;
-                flex-direction: column;
-                height: 140px;
-            }
-        }
-    }
-    &__loading {
-        .item {
-            display: flex;
-            position: relative;
-            width: 100%;
-            padding: 15px 0;
-            border-bottom: 1px solid var(--classC);
-            &:last-child {
-                border-bottom: none;
-            }
-            .thumbnail {
-                flex-shrink: 0;
-                position: relative;
-                width: 210px;
-                height: 140px;
-                margin-right: 15px;
-                background: var(--classD);
-                animation: list_thumbnail_loading 0.5s infinite alternate;
-                border-radius: var(--radius-inner);
-            }
-            .information {
-                flex: 1;
-                min-width: 0;
-                .title {
-                    height: 24px;
-                    border-radius: var(--radius-inner);
-                    background: var(--classD);
-                    animation: list_title_loading 0.75s infinite alternate;
-                    margin-bottom: 15px;
-                }
-                .abstract {
-                    p {
-                        height: 18px;
-                        border-radius: var(--radius-inner);
-                        background: var(--classD);
-                        margin-bottom: 5px;
-                        animation: list_abstract_loading 0.8s infinite alternate;
-                    }
-                }
-            }
-        }
-    }
+	&__item {
+		position: relative;
+		width: 100%;
+		border-bottom: 1px solid var(--classC);
+		padding: 15px 0;
+		&:last-child {
+			border-bottom: none;
+		}
+		.information {
+			.title {
+				margin-bottom: 10px;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				/*! autoprefixer: off */
+				-webkit-box-orient: vertical;
+				/* autoprefixer: on */
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+				color: var(--main);
+				font-size: 18px;
+				line-height: 24px;
+				max-height: 48px;
+				transition: color 0.35s;
+				&:hover {
+					color: var(--theme);
+				}
+				.badge {
+					height: 20px;
+					line-height: 20px;
+					background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
+					color: #fff;
+					font-size: 12px;
+					margin-right: 5px;
+					border-radius: 2px;
+					padding: 0 8px;
+					white-space: nowrap;
+					vertical-align: 2px;
+				}
+			}
+			.abstract {
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				/*! autoprefixer: off */
+				-webkit-box-orient: vertical;
+				/* autoprefixer: on */
+				overflow: hidden;
+				text-overflow: ellipsis;
+				color: var(--minor);
+				word-break: break-all;
+				line-height: 22px;
+				max-height: 44px;
+				opacity: 0.85;
+			}
+		}
+		.line {
+			position: absolute;
+			z-index: 1;
+			top: 15px;
+			left: -15px;
+			width: 4px;
+			height: 25px;
+			border-radius: 2px;
+			background: var(--theme);
+			transform: scaleY(0);
+			transition: transform 0.35s;
+		}
+		.meta {
+			display: flex;
+			align-items: center;
+			margin-top: auto;
+			color: var(--minor);
+			font-size: 13px;
+			.items {
+				display: flex;
+				align-items: center;
+				li {
+					&::after {
+						content: '/';
+						color: var(--seat);
+						padding: 0 5px;
+					}
+					&:last-child::after {
+						display: none;
+					}
+				}
+			}
+			.last {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				.icon {
+					margin-right: 3px;
+				}
+				.link {
+					color: var(--minor);
+					&:hover {
+						color: var(--theme);
+					}
+				}
+			}
+		}
+		&:hover .line {
+			transform: scaleY(1);
+		}
+		&.default {
+			display: flex;
+			position: relative;
+			&:hover {
+				.thumbnail {
+					img {
+						opacity: 0.8;
+					}
+					time {
+						transform: translate3d(0, 0, 0);
+					}
+				}
+			}
+			.thumbnail {
+				flex-shrink: 0;
+				position: relative;
+				width: 210px;
+				height: 140px;
+				margin-right: 15px;
+				overflow: hidden;
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					border-radius: var(--radius-inner);
+					transition: opacity 0.35s;
+				}
+				time {
+					position: absolute;
+					z-index: 1;
+					top: 5px;
+					right: 5px;
+					background: var(--theme);
+					height: 20px;
+					line-height: 20px;
+					padding: 0 8px;
+					color: #fff;
+					font-size: 12px;
+					border-radius: 10px;
+					transition: transform 0.35s;
+					transform: translate3d(120%, 0, 0);
+				}
+				svg {
+					position: absolute;
+					z-index: 1;
+					top: 5px;
+					left: 5px;
+					width: 20px;
+					height: 20px;
+					fill: #fff;
+				}
+			}
+			.information {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				min-width: 0;
+			}
+		}
+		&.single {
+			&:hover {
+				.thumbnail {
+					img {
+						opacity: 0.8;
+					}
+					time {
+						transform: translate3d(0, 0, 0);
+					}
+				}
+			}
+			.information {
+				margin-bottom: 15px;
+			}
+			.thumbnail {
+				display: block;
+				position: relative;
+				width: 100%;
+				height: 280px;
+				overflow: hidden;
+				margin-bottom: 15px;
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					border-radius: var(--radius-inner);
+					transition: opacity 0.35s;
+				}
+				time {
+					position: absolute;
+					z-index: 1;
+					top: 10px;
+					right: 10px;
+					background: var(--theme);
+					height: 20px;
+					line-height: 20px;
+					padding: 0 8px;
+					color: #fff;
+					font-size: 12px;
+					border-radius: 10px;
+					transition: transform 0.35s;
+					transform: translate3d(120%, 0, 0);
+				}
+				svg {
+					position: absolute;
+					z-index: 1;
+					top: 10px;
+					left: 10px;
+					width: 20px;
+					height: 20px;
+					fill: #fff;
+				}
+			}
+		}
+		&.multiple {
+			.information {
+				margin-bottom: 15px;
+			}
+			.thumbnail {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-rows: 180px;
+				gap: 15px;
+				margin-bottom: 15px;
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					transition: transform 0.35s, opacity 0.35s;
+					border-radius: var(--radius-inner);
+					&:hover {
+						transform: scale(1.025);
+						opacity: 0.85;
+					}
+				}
+			}
+		}
+		&.none {
+			.information {
+				display: flex;
+				flex-direction: column;
+				height: 140px;
+			}
+		}
+	}
+	&__loading {
+		.item {
+			display: flex;
+			position: relative;
+			width: 100%;
+			padding: 15px 0;
+			border-bottom: 1px solid var(--classC);
+			&:last-child {
+				border-bottom: none;
+			}
+			.thumbnail {
+				flex-shrink: 0;
+				position: relative;
+				width: 210px;
+				height: 140px;
+				margin-right: 15px;
+				background: var(--classD);
+				animation: list_thumbnail_loading 0.5s infinite alternate;
+				border-radius: var(--radius-inner);
+			}
+			.information {
+				flex: 1;
+				min-width: 0;
+				.title {
+					height: 24px;
+					border-radius: var(--radius-inner);
+					background: var(--classD);
+					animation: list_title_loading 0.75s infinite alternate;
+					margin-bottom: 15px;
+				}
+				.abstract {
+					p {
+						height: 18px;
+						border-radius: var(--radius-inner);
+						background: var(--classD);
+						margin-bottom: 5px;
+						animation: list_abstract_loading 0.8s infinite alternate;
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_load {
-    margin: 15px auto 0;
-    width: 120px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    border-radius: 16px;
-    cursor: pointer;
-    user-select: none;
-    background: var(--background);
-    color: var(--routine);
-    transition: transform 0.25s;
-    box-shadow: var(--box-shadow);
-    &:active {
-        transform: scale(0.75);
-    }
+	margin: 15px auto 0;
+	width: 120px;
+	height: 32px;
+	line-height: 32px;
+	text-align: center;
+	border-radius: 16px;
+	cursor: pointer;
+	user-select: none;
+	background: var(--background);
+	color: var(--routine);
+	transition: transform 0.25s;
+	box-shadow: var(--box-shadow);
+	&:active {
+		transform: scale(0.75);
+	}
 }
 
 .joe_detail {
-    background: var(--background);
-    border-radius: var(--radius-wrap);
-    padding: 15px;
-    box-shadow: var(--box-shadow);
-    margin-bottom: 15px;
-    &__category {
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        .item {
-            color: #fff;
-            font-size: 12px;
-            padding: 3px 8px;
-            margin-right: 5px;
-            border-radius: 2px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: 120px;
-            transition: transform 0.35s, opacity 0.35s;
-            &:hover {
-                opacity: 0.85;
-                transform: translate3d(0, -3px, 0);
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-            &-0 {
-                background: #0396ff;
-            }
-            &-1 {
-                background: #ea5455;
-            }
-            &-2 {
-                background: #7367f0;
-            }
-            &-3 {
-                background: #28c76f;
-            }
-            &-4 {
-                background: #9f44d3;
-            }
-        }
-        .edit {
-            color: var(--minor);
-            margin-left: auto;
-            &:hover {
-                color: var(--theme);
-            }
-        }
-    }
-    &__title {
-        font-size: 24px;
-        color: var(--main);
-        text-shadow: var(--text-shadow);
-        text-align: center;
-        margin-bottom: 15px;
-        word-break: break-all;
-    }
-    &__count {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding-bottom: 15px;
-        border-bottom: 1px solid var(--classC);
-        &::after {
-            content: '';
-            position: absolute;
-            bottom: -1.5px;
-            left: 0;
-            width: 80px;
-            height: 3px;
-            border-radius: 1.5px;
-            background: var(--theme);
-        }
-        &-information {
-            display: flex;
-            align-items: center;
-            .avatar {
-                width: 35px;
-                height: 35px;
-                border-radius: 50%;
-                margin-right: 10px;
-                border: 1px solid var(--classA);
-                padding: 3px;
-                object-fit: cover;
-            }
-            .meta {
-                display: flex;
-                flex-direction: column;
-                height: 35px;
-                justify-content: space-between;
-                font-size: 12px;
-                .author {
-                    .link {
-                        font-weight: 500;
-                        color: var(--theme);
-                        &:hover {
-                            text-decoration: underline;
-                        }
-                    }
-                }
-                .item {
-                    display: flex;
-                    align-items: center;
-                    color: var(--minor);
-                    line-height: 16px;
-                    .line {
-                        color: var(--seat);
-                        margin: 0 7px;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-        &-created {
-            font-size: 32px;
-            line-height: 42px;
-            color: var(--routine);
-            user-select: none;
-            text-shadow: var(--text-shadow);
-            font-family: consolas;
-        }
-    }
-    &__article {
-        padding-top: 15px;
-        font-size: 15px;
-        word-break: break-all;
-        color: var(--routine);
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            color: var(--main);
-            font-size: 18px;
-            line-height: 24px;
-            margin-bottom: 18px;
-            position: relative;
-        }
-        h1 {
-            padding: 0 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 8.5px;
-                left: 0;
-                height: 7px;
-                width: 7px;
-                border-radius: 50%;
-                background: var(--theme);
-            }
-        }
-        h2 {
-            padding: 0 15px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 10%;
-                bottom: 10%;
-                left: 0;
-                width: 4px;
-                border-radius: 2px;
-                background: var(--theme);
-            }
-        }
-        h3 {
-            padding: 0 15px 0 20px;
-            &::before {
-                content: '#';
-                color: var(--theme);
-                font-weight: 700;
-                position: absolute;
-                top: 0;
-                left: 0;
-                line-height: 24px;
-            }
-        }
-        h4 {
-            &::before {
-                content: '「';
-                color: var(--theme);
-                font-weight: 600;
-                margin-right: 5px;
-            }
-            &::after {
-                content: '」';
-                color: var(--theme);
-                font-weight: 600;
-                margin-left: 5px;
-            }
-        }
-        h5 {
-            padding: 0 15px 0 28px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 2px;
-                left: 0;
-                width: 20px;
-                height: 20px;
-                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
-                background-size: 100% 100%;
-            }
-        }
-        h6 {
-            padding: 0 15px 0 28px;
-            &::before {
-                content: '';
-                position: absolute;
-                top: 2px;
-                left: 0;
-                width: 20px;
-                height: 20px;
-                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
-                background-size: 100% 100%;
-            }
-        }
-        hr {
-            border: none;
-            height: 1px;
-            background-color: var(--classB);
-            margin-bottom: 18px;
-        }
-        p {
-            line-height: 26px;
-            margin-bottom: 18px;
-        }
-        blockquote {
-            line-height: 26px;
-            margin-bottom: 18px;
-            background: #ecf8ff;
-            border-left: 5px solid #50bfff;
-            color: #50bfff;
-            padding: 8px 15px;
-            border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
-            p {
-                margin: 0;
-            }
-        }
-        a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
-            display: inline-block;
-            line-height: 26px;
-            color: var(--theme);
-            position: relative;
-            &:hover::after {
-                opacity: 1;
-                transform: scaleX(1);
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                width: 100%;
-                height: 1px;
-                bottom: -1px;
-                left: 0;
-                background: var(--theme);
-                transform: scaleX(0.25);
-                opacity: 0;
-                transition: transform 0.35s, opacity 0.35s;
-            }
-        }
-        code {
-            display: inline-block;
-            min-height: 26px;
-            line-height: 26px;
-            border-radius: var(--radius-inner);
-            font-size: 12px;
-            background: #fdf6ec;
-            padding: 0 8px;
-            color: #e6a23c;
-            vertical-align: top;
-        }
-        pre code {
-            display: unset;
-            vertical-align: unset;
-            min-height: unset;
-            line-height: unset;
-            border-radius: unset;
-            font-size: unset;
-            background: unset;
-            padding: unset;
-            color: unset;
-        }
-        pre[class*='language-'] {
-            position: relative;
-            margin: 0 0 18px;
-            padding: 30px 0 0;
-            font-size: 14px;
-            border-radius: var(--radius-inner);
-            overflow: hidden;
-            code[class*='language-'] {
-                display: block;
-                max-height: 500px;
-                overflow-y: auto;
-                white-space: pre-wrap;
-                word-break: break-all;
-                word-wrap: break-word;
-                padding: 0 15px 12px;
-            }
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 30px;
-                background: #2d2d2d;
-                border-radius: var(--radius-inner) var(--radius-inner) 0 0;
-            }
-            &::before {
-                content: '';
-                position: absolute;
-                top: 9px;
-                left: 15px;
-                width: 12px;
-                height: 12px;
-                border-radius: 50%;
-                background: #fc625d;
-                box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
-                z-index: 1;
-            }
-            .copy {
-                position: absolute;
-                top: 9px;
-                right: 15px;
-                z-index: 5;
-                color: #909399;
-                transition: color 0.35s;
-                cursor: pointer;
-                user-select: none;
-                &:hover {
-                    color: #c0c4cc;
-                }
-            }
-        }
-        img:not(.owo_image) {
-            display: block;
-            max-width: 100%;
-            border-radius: var(--radius-inner);
-            transition: transform 0.35s, box-shadow 0.35s;
-            cursor: zoom-in;
-            margin: 0 auto;
-            &:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
-            }
-        }
-        .owo_image {
-            max-height: 26px;
-            vertical-align: top;
-        }
-        ol,
-        ul {
-            margin-bottom: 18px;
-            padding-left: 36px;
-            li {
-                line-height: 26px;
-            }
-        }
-        ol li {
-            list-style: decimal;
-        }
-        ul li {
-            list-style: disc;
-        }
-        table {
-            width: 100%;
-            max-width: 100%;
-            table-layout: fixed;
-            color: var(--minor);
-            margin-bottom: 18px;
-            font-size: 13px;
-            border-top: 1px solid var(--classC);
-            border-left: 1px solid var(--classC);
-            td,
-            th {
-                padding: 8px;
-                border-bottom: 1px solid var(--classC);
-                border-right: 1px solid var(--classC);
-            }
-            thead {
-                th {
-                    font-weight: 500;
-                    background: var(--classC);
-                }
-            }
-            tbody {
-                tr {
-                    transition: background 0.35s;
-                    &:hover {
-                        background: var(--classD);
-                    }
-                }
-            }
-        }
-        span.block {
-            display: block;
-        }
-        &-hide {
-            background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
-            padding: 15px 0;
-            text-align: center;
-            position: relative;
-            user-select: none;
-            line-height: normal;
-            i {
-                position: relative;
-                font-style: normal;
-                cursor: pointer;
-                color: var(--theme);
-            }
-        }
-        &-player {
-            width: 100%;
-            height: 500px;
-        }
-        &-protected {
-            display: flex;
-            justify-content: center;
-            background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
-            padding: 20px 0;
-            margin-bottom: 18px;
-            .contain {
-                position: relative;
-                box-shadow: var(--box-shadow);
-                border-radius: 20px;
-                overflow: hidden;
-                .icon {
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 15px;
-                }
-                .password {
-                    width: 250px;
-                    height: 40px;
-                    border: none;
-                    color: var(--routine);
-                    padding-left: 50px;
-                    background: var(--background);
-                }
-                .submit {
-                    position: absolute;
-                    top: 50%;
-                    right: 15px;
-                    transform: translateY(-50%);
-                    color: var(--main);
-                    border: none;
-                    background: none;
-                }
-            }
-        }
-        &-checkbox {
-            -webkit-appearance: none;
-            position: relative;
-            border-radius: 2px;
-            width: 15px;
-            height: 15px;
-            border: 2px solid var(--theme);
-            vertical-align: -2px;
-            &:disabled {
-                cursor: not-allowed;
-            }
-            &:checked {
-                border: none;
-                background: var(--theme);
-                &::after {
-                    content: '';
-                    width: 3px;
-                    height: 7px;
-                    position: absolute;
-                    top: 2px;
-                    left: 5px;
-                    border: 2px solid #fff;
-                    border-top: 0;
-                    border-left: 0;
-                    transform: rotate(45deg);
-                }
-            }
-        }
-        &-card {
-            margin: 0 auto;
-            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-            border-radius: var(--radius-inner);
-            border: 1px solid var(--classC);
-            background: var(--background);
-            .title {
-                padding: 8px 10px;
-                border-bottom: 1px solid var(--classC);
-                color: var(--main);
-                user-select: none;
-            }
-            .content {
-                padding: 10px;
-                color: var(--routine);
-            }
-        }
-        &-message {
-            position: relative;
-            border-left-width: 4px;
-            border-left-style: solid;
-            padding: 8px 15px;
-            border-radius: 0 4px 4px 0;
-            &:hover {
-                .icon {
-                    transform: rotate(360deg);
-                }
-            }
-            .icon {
-                position: absolute;
-                top: -9px;
-                left: -11px;
-                width: 18px;
-                height: 18px;
-                border-radius: 50%;
-                transition: transform 0.85s;
-                &::before {
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 10px;
-                    height: 10px;
-                    fill: #fff;
-                    background-repeat: no-repeat;
-                    background-size: 100% 100%;
-                }
-            }
-            &.success {
-                border-left-color: #2bde3f;
-                background: #2bde3f20;
-                color: #2bde3f;
-                .icon {
-                    background: #2bde3f;
-                    &::before {
-                        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
-                    }
-                }
-            }
-            &.info {
-                border-left-color: #1d72f3;
-                background: #1d72f320;
-                color: #1d72f3;
-                .icon {
-                    background: #1d72f3;
-                    &::before {
-                        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
-                    }
-                }
-            }
-            &.warning {
-                border-left-color: #ffc007;
-                background: #ffc00720;
-                color: #ffc007;
-                .icon {
-                    background: #ffc007;
-                    &::before {
-                        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
-                    }
-                }
-            }
-            &.error {
-                border-left-color: #f56c6c;
-                background: #f56c6c20;
-                color: #f56c6c;
-                .icon {
-                    background: #f56c6c;
-                    &::before {
-                        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
-                    }
-                }
-            }
-        }
-        &-mtitle {
-            display: flex;
-            justify-content: center;
-            .text {
-                position: relative;
-                color: var(--minor);
-                padding: 0 15px;
-                transition: padding 0.35s;
-                &:hover {
-                    padding: 0;
-                }
-                &::before,
-                &::after {
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    width: 20px;
-                    height: 1px;
-                    background: var(--theme);
-                }
-                &::before {
-                    left: -35px;
-                }
-                &::after {
-                    right: -35px;
-                }
-            }
-        }
-        &-anote {
-            position: relative;
-            display: inline-block;
-            color: #fff;
-            height: 35px;
-            line-height: 35px;
-            transform: translateZ(0);
-            transition: transform 0.35s;
-            &:hover {
-                transform: translateY(-3px);
-            }
-            .icon {
-                display: inline-block;
-                vertical-align: top;
-                width: 35px;
-                height: 35px;
-                text-align: center;
-                background: rgba(0, 0, 0, 0.2);
-                .fa {
-                    color: #fff;
-                }
-            }
-            .content {
-                display: inline-block;
-                vertical-align: top;
-                padding: 0 12px;
-                max-width: 200px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            &.secondary {
-                background: #34495e;
-            }
-            &.success {
-                background: #27ae60;
-            }
-            &.warning {
-                background: #f39c12;
-            }
-            &.error {
-                background: #e74c3c;
-            }
-            &.info {
-                background: #3498db;
-            }
-        }
-        &-abtn {
-            display: inline-block;
-            color: #fff;
-            height: 35px;
-            line-height: 35px;
-            padding: 0 15px;
-            transform-origin: 100% 0;
-            transform: translateZ(0);
-            &:hover {
-                animation-name: wobble-bottom;
-                animation-duration: 1s;
-                animation-timing-function: ease-in-out;
-                animation-iteration-count: 1;
-            }
-            .icon {
-                display: inline-block;
-                vertical-align: top;
-                text-align: center;
-                .fa {
-                    color: #fff;
-                }
-                [class^='fa-'] {
-                    margin-right: 8px;
-                }
-            }
-            .content {
-                display: inline-block;
-                vertical-align: top;
-                max-width: 200px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-        &-copy {
-            cursor: pointer;
-            user-select: none;
-        }
-        &-video {
-            margin-bottom: 18px;
-            .play,
-            .episodes {
-                position: relative;
-                background: var(--classD);
-                padding: 60px 15px 15px;
-                .title {
-                    position: absolute;
-                    top: 15px;
-                    left: -10px;
-                    background: var(--theme);
-                    color: #fff;
-                    font-weight: 500;
-                    box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
-                    height: 30px;
-                    line-height: 30px;
-                    padding: 0 12px;
-                    border-radius: 2px 2px 2px 0;
-                    user-select: none;
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        bottom: -10px;
-                        left: -10px;
-                        border-style: solid;
-                        border-width: 10px;
-                        border-color: var(--theme) transparent transparent;
-                        transform: rotate(90deg);
-                    }
-                }
-                .box {
-                    border-top: 1px solid var(--classB);
-                    padding-top: 15px;
-                }
-            }
-            .play {
-                margin-bottom: 15px;
-                .box {
-                    iframe {
-                        background: #000;
-                        width: 100%;
-                        height: 520px;
-                    }
-                }
-            }
-            .episodes {
-                .box {
-                    display: grid;
-                    grid-template-columns: repeat(6, 1fr);
-                    gap: 15px;
-                    .item {
-                        height: 30px;
-                        line-height: 30px;
-                        border-radius: 15px;
-                        background: var(--background);
-                        color: var(--routine);
-                        cursor: pointer;
-                        text-align: center;
-                        font-size: 12px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;
-                        padding: 0 10px;
-                        &.active {
-                            transform: translateY(-2px);
-                            color: #fff;
-                            background: var(--theme);
-                            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
-                        }
-                        &:hover {
-                            transform: translateY(-2px);
-                            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
-                        }
-                    }
-                }
-            }
-        }
-        &-mp3 {
-            .plyr {
-                max-width: 450px;
-                margin: 0 auto;
-            }
-            .plyr--audio {
-                box-shadow: var(--box-shadow);
-                background: var(--classD);
-                border-radius: 26px;
-                padding: 0 5px;
-                --plyr-audio-control-color: var(--routine);
-                .plyr__controls {
-                    background: var(--classD);
-                }
-            }
-        }
-    }
-    &__agree {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 15px;
-        .agree {
-            text-align: center;
-            font-size: 12px;
-            color: var(--minor);
-            user-select: none;
-            .icon {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 42px;
-                height: 42px;
-                border-radius: 50%;
-                background: #f56c6c;
-                cursor: pointer;
-                margin-bottom: 8px;
-                &.active {
-                    animation: box_shadow 1s;
-                    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
-                }
-                svg {
-                    position: absolute;
-                    width: 28px;
-                    height: 28px;
-                    transform: scale(0);
-                    opacity: 0;
-                    transition: transform 0.85s, opacity 0.85s;
-                    &.active {
-                        transform: scale(1);
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-    &__copyright {
-        padding-top: 15px;
-        border-top: 1px solid var(--classC);
-        .content {
-            background: var(--classD);
-            padding: 15px;
-            border-radius: var(--radius-inner);
-            .item {
-                color: var(--minor);
-                margin-bottom: 5px;
-                word-break: break-all;
-                line-height: 22px;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                .icon {
-                    width: 18px;
-                    height: 18px;
-                    margin-right: 3px;
-                    vertical-align: -4px;
-                }
-                .link {
-                    color: var(--minor);
-                    &:hover {
-                        color: var(--theme);
-                    }
-                }
-            }
-        }
-    }
-    &__friends {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 15px;
-        margin-bottom: 15px;
-        &-item {
-            .contain {
-                display: block;
-                border-radius: var(--radius-inner);
-                overflow: hidden;
-                padding: 15px;
-                color: #fff;
-                word-break: break-all;
-                transition: transform 0.35s, box-shadow 0.35s;
-                &:hover {
-                    transform: translateY(-5px) scale(1.025);
-                    box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
-                }
-                .title {
-                    position: relative;
-                    &::after {
-                        content: '';
-                        position: absolute;
-                        bottom: -5px;
-                        left: 0;
-                        width: 100%;
-                        height: 1px;
-                        background: #fff;
-                    }
-                }
-                .content {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-top: 15px;
-                    .desc {
-                        margin-right: 10px;
-                    }
-                    .avatar {
-                        width: 40px;
-                        height: 40px;
-                        min-width: 40px;
-                        min-height: 40px;
-                        border-radius: 50%;
-                        object-fit: cover;
-                    }
-                }
-            }
-        }
-    }
+	background: var(--background);
+	border-radius: var(--radius-wrap);
+	padding: 15px;
+	box-shadow: var(--box-shadow);
+	margin-bottom: 15px;
+	&__category {
+		display: flex;
+		align-items: center;
+		margin-bottom: 15px;
+		.item {
+			color: #fff;
+			font-size: 12px;
+			padding: 3px 8px;
+			margin-right: 5px;
+			border-radius: 2px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 120px;
+			transition: transform 0.35s, opacity 0.35s;
+			&:hover {
+				opacity: 0.85;
+				transform: translate3d(0, -3px, 0);
+			}
+			&:last-child {
+				margin-right: 0;
+			}
+			&-0 {
+				background: #0396ff;
+			}
+			&-1 {
+				background: #ea5455;
+			}
+			&-2 {
+				background: #7367f0;
+			}
+			&-3 {
+				background: #28c76f;
+			}
+			&-4 {
+				background: #9f44d3;
+			}
+		}
+		.edit {
+			color: var(--minor);
+			margin-left: auto;
+			&:hover {
+				color: var(--theme);
+			}
+		}
+	}
+	&__title {
+		font-size: 24px;
+		color: var(--main);
+		text-shadow: var(--text-shadow);
+		text-align: center;
+		margin-bottom: 15px;
+		word-break: break-all;
+	}
+	&__count {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 15px;
+		border-bottom: 1px solid var(--classC);
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: -1.5px;
+			left: 0;
+			width: 80px;
+			height: 3px;
+			border-radius: 1.5px;
+			background: var(--theme);
+		}
+		&-information {
+			display: flex;
+			align-items: center;
+			.avatar {
+				width: 35px;
+				height: 35px;
+				border-radius: 50%;
+				margin-right: 10px;
+				border: 1px solid var(--classA);
+				padding: 3px;
+				object-fit: cover;
+			}
+			.meta {
+				display: flex;
+				flex-direction: column;
+				height: 35px;
+				justify-content: space-between;
+				font-size: 12px;
+				.author {
+					.link {
+						font-weight: 500;
+						color: var(--theme);
+						&:hover {
+							text-decoration: underline;
+						}
+					}
+				}
+				.item {
+					display: flex;
+					align-items: center;
+					color: var(--minor);
+					line-height: 16px;
+					.line {
+						color: var(--seat);
+						margin: 0 7px;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+		&-created {
+			font-size: 32px;
+			line-height: 42px;
+			color: var(--routine);
+			user-select: none;
+			text-shadow: var(--text-shadow);
+			font-family: consolas;
+		}
+	}
+	&__article {
+		padding-top: 15px;
+		font-size: 15px;
+		word-break: break-all;
+		color: var(--routine);
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: var(--main);
+			font-size: 18px;
+			line-height: 24px;
+			margin-bottom: 18px;
+			position: relative;
+		}
+		h1 {
+			padding: 0 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 8.5px;
+				left: 0;
+				height: 7px;
+				width: 7px;
+				border-radius: 50%;
+				background: var(--theme);
+			}
+		}
+		h2 {
+			padding: 0 15px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 10%;
+				bottom: 10%;
+				left: 0;
+				width: 4px;
+				border-radius: 2px;
+				background: var(--theme);
+			}
+		}
+		h3 {
+			padding: 0 15px 0 20px;
+			&::before {
+				content: '#';
+				color: var(--theme);
+				font-weight: 700;
+				position: absolute;
+				top: 0;
+				left: 0;
+				line-height: 24px;
+			}
+		}
+		h4 {
+			&::before {
+				content: '「';
+				color: var(--theme);
+				font-weight: 600;
+				margin-right: 5px;
+			}
+			&::after {
+				content: '」';
+				color: var(--theme);
+				font-weight: 600;
+				margin-left: 5px;
+			}
+		}
+		h5 {
+			padding: 0 15px 0 28px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 0;
+				width: 20px;
+				height: 20px;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
+				background-size: 100% 100%;
+			}
+		}
+		h6 {
+			padding: 0 15px 0 28px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 2px;
+				left: 0;
+				width: 20px;
+				height: 20px;
+				background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
+				background-size: 100% 100%;
+			}
+		}
+		hr {
+			border: none;
+			height: 1px;
+			background-color: var(--classB);
+			margin-bottom: 18px;
+		}
+		p {
+			line-height: 26px;
+			margin-bottom: 18px;
+		}
+		blockquote {
+			line-height: 26px;
+			margin-bottom: 18px;
+			background: #ecf8ff;
+			border-left: 5px solid #50bfff;
+			color: #50bfff;
+			padding: 8px 15px;
+			border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
+			p {
+				margin: 0;
+			}
+		}
+		a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
+			display: inline-block;
+			line-height: 26px;
+			color: var(--theme);
+			position: relative;
+			&:hover::after {
+				opacity: 1;
+				transform: scaleX(1);
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				width: 100%;
+				height: 1px;
+				bottom: -1px;
+				left: 0;
+				background: var(--theme);
+				transform: scaleX(0.25);
+				opacity: 0;
+				transition: transform 0.35s, opacity 0.35s;
+			}
+		}
+		code {
+			display: inline-block;
+			min-height: 26px;
+			line-height: 26px;
+			border-radius: var(--radius-inner);
+			font-size: 12px;
+			background: #fdf6ec;
+			padding: 0 8px;
+			color: #e6a23c;
+			vertical-align: top;
+		}
+		pre code {
+			display: unset;
+			vertical-align: unset;
+			min-height: unset;
+			line-height: unset;
+			border-radius: unset;
+			font-size: unset;
+			background: unset;
+			padding: unset;
+			color: unset;
+		}
+		pre[class*='language-'] {
+			position: relative;
+			margin: 0 0 18px;
+			padding: 30px 0 0;
+			font-size: 14px;
+			border-radius: var(--radius-inner);
+			overflow: hidden;
+			code[class*='language-'] {
+				display: block;
+				max-height: 500px;
+				overflow-y: auto;
+				white-space: pre-wrap;
+				word-break: break-all;
+				word-wrap: break-word;
+				padding: 0 15px 12px;
+			}
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 30px;
+				background: #2d2d2d;
+				border-radius: var(--radius-inner) var(--radius-inner) 0 0;
+			}
+			&::before {
+				content: '';
+				position: absolute;
+				top: 9px;
+				left: 15px;
+				width: 12px;
+				height: 12px;
+				border-radius: 50%;
+				background: #fc625d;
+				box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+				z-index: 1;
+			}
+			.copy {
+				position: absolute;
+				top: 9px;
+				right: 15px;
+				z-index: 5;
+				color: #909399;
+				transition: color 0.35s;
+				cursor: pointer;
+				user-select: none;
+				&:hover {
+					color: #c0c4cc;
+				}
+			}
+		}
+		img:not(.owo_image) {
+			display: block;
+			max-width: 100%;
+			border-radius: var(--radius-inner);
+			transition: transform 0.35s, box-shadow 0.35s;
+			cursor: zoom-in;
+			margin: 0 auto;
+			&:hover {
+				transform: translateY(-5px);
+				box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+			}
+		}
+		.owo_image {
+			max-height: 26px;
+			vertical-align: top;
+		}
+		ol,
+		ul {
+			margin-bottom: 18px;
+			padding-left: 36px;
+			li {
+				line-height: 26px;
+			}
+		}
+		ol li {
+			list-style: decimal;
+		}
+		ul li {
+			list-style: disc;
+		}
+		table {
+			width: 100%;
+			max-width: 100%;
+			table-layout: fixed;
+			color: var(--minor);
+			margin-bottom: 18px;
+			font-size: 13px;
+			border-top: 1px solid var(--classC);
+			border-left: 1px solid var(--classC);
+			td,
+			th {
+				padding: 8px;
+				border-bottom: 1px solid var(--classC);
+				border-right: 1px solid var(--classC);
+			}
+			thead {
+				th {
+					font-weight: 500;
+					background: var(--classC);
+				}
+			}
+			tbody {
+				tr {
+					transition: background 0.35s;
+					&:hover {
+						background: var(--classD);
+					}
+				}
+			}
+		}
+		span.block {
+			display: block;
+		}
+		&-hide {
+			background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
+			padding: 15px 0;
+			text-align: center;
+			position: relative;
+			user-select: none;
+			line-height: normal;
+			i {
+				position: relative;
+				font-style: normal;
+				cursor: pointer;
+				color: var(--theme);
+			}
+		}
+		&-player {
+			width: 100%;
+			height: 500px;
+		}
+		&-protected {
+			display: flex;
+			justify-content: center;
+			background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
+			padding: 20px 0;
+			margin-bottom: 18px;
+			.contain {
+				position: relative;
+				box-shadow: var(--box-shadow);
+				border-radius: 20px;
+				overflow: hidden;
+				.icon {
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+					left: 15px;
+				}
+				.password {
+					width: 250px;
+					height: 40px;
+					border: none;
+					color: var(--routine);
+					padding-left: 50px;
+					background: var(--background);
+				}
+				.submit {
+					position: absolute;
+					top: 50%;
+					right: 15px;
+					transform: translateY(-50%);
+					color: var(--main);
+					border: none;
+					background: none;
+				}
+			}
+		}
+		&-checkbox {
+			-webkit-appearance: none;
+			position: relative;
+			border-radius: 2px;
+			width: 15px;
+			height: 15px;
+			border: 2px solid var(--theme);
+			vertical-align: -2px;
+			&:disabled {
+				cursor: not-allowed;
+			}
+			&:checked {
+				border: none;
+				background: var(--theme);
+				&::after {
+					content: '';
+					width: 3px;
+					height: 7px;
+					position: absolute;
+					top: 2px;
+					left: 5px;
+					border: 2px solid #fff;
+					border-top: 0;
+					border-left: 0;
+					transform: rotate(45deg);
+				}
+			}
+		}
+		&-card {
+			margin: 0 auto;
+			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+			border-radius: var(--radius-inner);
+			border: 1px solid var(--classC);
+			background: var(--background);
+			.title {
+				padding: 8px 10px;
+				border-bottom: 1px solid var(--classC);
+				color: var(--main);
+				user-select: none;
+			}
+			.content {
+				padding: 10px;
+				color: var(--routine);
+			}
+		}
+		&-message {
+			position: relative;
+			border-left-width: 4px;
+			border-left-style: solid;
+			padding: 8px 15px;
+			border-radius: 0 4px 4px 0;
+			&:hover {
+				.icon {
+					transform: rotate(360deg);
+				}
+			}
+			.icon {
+				position: absolute;
+				top: -9px;
+				left: -11px;
+				width: 18px;
+				height: 18px;
+				border-radius: 50%;
+				transition: transform 0.85s;
+				&::before {
+					content: '';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 10px;
+					height: 10px;
+					fill: #fff;
+					background-repeat: no-repeat;
+					background-size: 100% 100%;
+				}
+			}
+			&.success {
+				border-left-color: #2bde3f;
+				background: #2bde3f20;
+				color: #2bde3f;
+				.icon {
+					background: #2bde3f;
+					&::before {
+						background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
+					}
+				}
+			}
+			&.info {
+				border-left-color: #1d72f3;
+				background: #1d72f320;
+				color: #1d72f3;
+				.icon {
+					background: #1d72f3;
+					&::before {
+						background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
+					}
+				}
+			}
+			&.warning {
+				border-left-color: #ffc007;
+				background: #ffc00720;
+				color: #ffc007;
+				.icon {
+					background: #ffc007;
+					&::before {
+						background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
+					}
+				}
+			}
+			&.error {
+				border-left-color: #f56c6c;
+				background: #f56c6c20;
+				color: #f56c6c;
+				.icon {
+					background: #f56c6c;
+					&::before {
+						background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
+					}
+				}
+			}
+		}
+		&-mtitle {
+			display: flex;
+			justify-content: center;
+			.text {
+				position: relative;
+				color: var(--minor);
+				padding: 0 15px;
+				transition: padding 0.35s;
+				&:hover {
+					padding: 0;
+				}
+				&::before,
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					width: 20px;
+					height: 1px;
+					background: var(--theme);
+				}
+				&::before {
+					left: -35px;
+				}
+				&::after {
+					right: -35px;
+				}
+			}
+		}
+		&-anote {
+			position: relative;
+			display: inline-block;
+			color: #fff;
+			height: 35px;
+			line-height: 35px;
+			transform: translateZ(0);
+			transition: transform 0.35s;
+			&:hover {
+				transform: translateY(-3px);
+			}
+			.icon {
+				display: inline-block;
+				vertical-align: top;
+				width: 35px;
+				height: 35px;
+				text-align: center;
+				background: rgba(0, 0, 0, 0.2);
+				.fa {
+					color: #fff;
+				}
+			}
+			.content {
+				display: inline-block;
+				vertical-align: top;
+				padding: 0 12px;
+				max-width: 200px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			&.secondary {
+				background: #34495e;
+			}
+			&.success {
+				background: #27ae60;
+			}
+			&.warning {
+				background: #f39c12;
+			}
+			&.error {
+				background: #e74c3c;
+			}
+			&.info {
+				background: #3498db;
+			}
+		}
+		&-abtn {
+			display: inline-block;
+			color: #fff;
+			height: 35px;
+			line-height: 35px;
+			padding: 0 15px;
+			transform-origin: 100% 0;
+			transform: translateZ(0);
+			&:hover {
+				animation-name: wobble-bottom;
+				animation-duration: 1s;
+				animation-timing-function: ease-in-out;
+				animation-iteration-count: 1;
+			}
+			.icon {
+				display: inline-block;
+				vertical-align: top;
+				text-align: center;
+				.fa {
+					color: #fff;
+				}
+				[class^='fa-'] {
+					margin-right: 8px;
+				}
+			}
+			.content {
+				display: inline-block;
+				vertical-align: top;
+				max-width: 200px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+		&-copy {
+			cursor: pointer;
+			user-select: none;
+		}
+		&-video {
+			margin-bottom: 18px;
+			.play,
+			.episodes {
+				position: relative;
+				background: var(--classD);
+				padding: 60px 15px 15px;
+				.title {
+					position: absolute;
+					top: 15px;
+					left: -10px;
+					background: var(--theme);
+					color: #fff;
+					font-weight: 500;
+					box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
+					height: 30px;
+					line-height: 30px;
+					padding: 0 12px;
+					border-radius: 2px 2px 2px 0;
+					user-select: none;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: -10px;
+						left: -10px;
+						border-style: solid;
+						border-width: 10px;
+						border-color: var(--theme) transparent transparent;
+						transform: rotate(90deg);
+					}
+				}
+				.box {
+					border-top: 1px solid var(--classB);
+					padding-top: 15px;
+				}
+			}
+			.play {
+				margin-bottom: 15px;
+				.box {
+					iframe {
+						background: #000;
+						width: 100%;
+						height: 520px;
+					}
+				}
+			}
+			.episodes {
+				.box {
+					display: grid;
+					grid-template-columns: repeat(6, 1fr);
+					gap: 15px;
+					.item {
+						height: 30px;
+						line-height: 30px;
+						border-radius: 15px;
+						background: var(--background);
+						color: var(--routine);
+						cursor: pointer;
+						text-align: center;
+						font-size: 12px;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;
+						padding: 0 10px;
+						&.active {
+							transform: translateY(-2px);
+							color: #fff;
+							background: var(--theme);
+							box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+						}
+						&:hover {
+							transform: translateY(-2px);
+							box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+						}
+					}
+				}
+			}
+		}
+		&-mp3 {
+			.plyr {
+				max-width: 450px;
+				margin: 0 auto;
+			}
+			.plyr--audio {
+				box-shadow: var(--box-shadow);
+				background: var(--classD);
+				border-radius: 26px;
+				padding: 0 5px;
+				--plyr-audio-control-color: var(--routine);
+				.plyr__controls {
+					background: var(--classD);
+				}
+			}
+		}
+	}
+	&__agree {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 15px;
+		.agree {
+			text-align: center;
+			font-size: 12px;
+			color: var(--minor);
+			user-select: none;
+			.icon {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 42px;
+				height: 42px;
+				border-radius: 50%;
+				background: #f56c6c;
+				cursor: pointer;
+				margin-bottom: 8px;
+				&.active {
+					animation: box_shadow 1s;
+					box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+				}
+				svg {
+					position: absolute;
+					width: 28px;
+					height: 28px;
+					transform: scale(0);
+					opacity: 0;
+					transition: transform 0.85s, opacity 0.85s;
+					&.active {
+						transform: scale(1);
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+	&__copyright {
+		padding-top: 15px;
+		border-top: 1px solid var(--classC);
+		.content {
+			background: var(--classD);
+			padding: 15px;
+			border-radius: var(--radius-inner);
+			.item {
+				color: var(--minor);
+				margin-bottom: 5px;
+				word-break: break-all;
+				line-height: 22px;
+				&:last-child {
+					margin-bottom: 0;
+				}
+				.icon {
+					width: 18px;
+					height: 18px;
+					margin-right: 3px;
+					vertical-align: -4px;
+				}
+				.link {
+					color: var(--minor);
+					&:hover {
+						color: var(--theme);
+					}
+				}
+			}
+		}
+	}
+	&__friends {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 15px;
+		margin-bottom: 15px;
+		&-item {
+			.contain {
+				display: block;
+				border-radius: var(--radius-inner);
+				overflow: hidden;
+				padding: 15px;
+				color: #fff;
+				word-break: break-all;
+				transition: transform 0.35s, box-shadow 0.35s;
+				&:hover {
+					transform: translateY(-5px) scale(1.025);
+					box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
+				}
+				.title {
+					position: relative;
+					&::after {
+						content: '';
+						position: absolute;
+						bottom: -5px;
+						left: 0;
+						width: 100%;
+						height: 1px;
+						background: #fff;
+					}
+				}
+				.content {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 15px;
+					.desc {
+						margin-right: 10px;
+					}
+					.avatar {
+						width: 40px;
+						height: 40px;
+						min-width: 40px;
+						min-height: 40px;
+						border-radius: 50%;
+						object-fit: cover;
+					}
+				}
+			}
+		}
+	}
 }
 
 .joe_footer {
-    border-top: 1px solid var(--classB);
-    color: var(--minor);
-    .joe_container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 65px;
-        .run {
-            margin: 0 auto 0 10px;
-        }
-        a {
-            color: var(--minor);
-            transition: all 0.35s;
-            &:hover {
-                color: var(--theme);
-            }
-        }
-    }
+	border-top: 1px solid var(--classB);
+	color: var(--minor);
+	.joe_container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: 65px;
+		.run {
+			margin: 0 auto 0 10px;
+		}
+		a {
+			color: var(--minor);
+			transition: all 0.35s;
+			&:hover {
+				color: var(--theme);
+			}
+		}
+	}
 }
 
 .joe_pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-top: 15px;
-    li {
-        margin-left: 5px;
-        &.active a {
-            background: var(--theme);
-            color: #fff;
-            font-weight: 500;
-        }
-        a {
-            display: flex;
-            align-items: center;
-            height: 32px;
-            color: var(--main);
-            padding: 0 15px;
-            background: var(--background);
-            border-radius: 2px;
-            transition: background 0.35s, color 0.35s;
-            user-select: none;
-            &:hover {
-                background: var(--theme);
-                color: #fff;
-                .icon {
-                    fill: #fff;
-                }
-            }
-            .icon {
-                width: 12px;
-                height: 12px;
-                fill: var(--routine);
-                transition: fill 0.35s;
-                &-next {
-                    transform: rotate(180deg);
-                }
-            }
-        }
-    }
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding-top: 15px;
+	li {
+		margin-left: 5px;
+		&.active a {
+			background: var(--theme);
+			color: #fff;
+			font-weight: 500;
+		}
+		a {
+			display: flex;
+			align-items: center;
+			height: 32px;
+			color: var(--main);
+			padding: 0 15px;
+			background: var(--background);
+			border-radius: 2px;
+			transition: background 0.35s, color 0.35s;
+			user-select: none;
+			&:hover {
+				background: var(--theme);
+				color: #fff;
+				.icon {
+					fill: #fff;
+				}
+			}
+			.icon {
+				width: 12px;
+				height: 12px;
+				fill: var(--routine);
+				transition: fill 0.35s;
+				&-next {
+					transform: rotate(180deg);
+				}
+			}
+		}
+	}
 }
 
 .joe_action {
-    position: fixed;
-    bottom: 90px;
-    right: 30px;
-    z-index: 333;
-    &_item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        background: var(--background);
-        border-radius: 50%;
-        cursor: pointer;
-        margin-top: 15px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
-        svg {
-            position: absolute;
-            width: 25px;
-            height: 25px;
-            fill: var(--theme);
-        }
-        &.scroll {
-            visibility: hidden;
-            transform: scale(0);
-            transition: visibility 0.35s, transform 0.35s;
-            &.active {
-                visibility: visible;
-                transform: scale(1);
-            }
-        }
-        &.mode {
-            svg {
-                transform: scale(0);
-                opacity: 0;
-                transition: transform 0.85s, opacity 0.85s;
-                &.active {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-            }
-        }
-    }
+	position: fixed;
+	bottom: 90px;
+	right: 30px;
+	z-index: 333;
+	&_item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		background: var(--background);
+		border-radius: 50%;
+		cursor: pointer;
+		margin-top: 15px;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
+		svg {
+			position: absolute;
+			width: 25px;
+			height: 25px;
+			fill: var(--theme);
+		}
+		&.scroll {
+			visibility: hidden;
+			transform: scale(0);
+			transition: visibility 0.35s, transform 0.35s;
+			&.active {
+				visibility: visible;
+				transform: scale(1);
+			}
+		}
+		&.mode {
+			svg {
+				transform: scale(0);
+				opacity: 0;
+				transition: transform 0.85s, opacity 0.85s;
+				&.active {
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+	}
 }
 
 .joe_comment {
-    background: var(--background);
-    border-radius: var(--radius-wrap);
-    box-shadow: var(--box-shadow);
-    padding: 15px;
-    &__title {
-        font-weight: 500;
-        text-align: center;
-        font-size: 24px;
-        color: var(--main);
-        text-shadow: var(--text-shadow);
-        border-bottom: 1px solid var(--classC);
-        margin-bottom: 15px;
-        padding-bottom: 15px;
-    }
-    &__close {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--routine);
-        &-icon {
-            fill: var(--routine);
-            margin-right: 5px;
-        }
-    }
-    &__respond {
-        &-type {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            .item {
-                background: var(--classD);
-                padding: 0 15px;
-                height: 32px;
-                color: var(--main);
-                border: none;
-                transition: color 0.35s, background 0.35s;
-                &:first-child {
-                    border-top-left-radius: var(--radius-inner);
-                }
-                &:last-child {
-                    border-top-right-radius: var(--radius-inner);
-                }
-                &.active {
-                    color: #fff;
-                    background: var(--theme);
-                }
-            }
-        }
-        &-form {
-            border-radius: 6px 0 6px 6px;
-            background: var(--classD);
-            .head {
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid var(--classA);
-                .list {
-                    flex: 1;
-                    input {
-                        width: 100%;
-                        border: none;
-                        background: transparent;
-                        padding: 0 15px;
-                        height: 40px;
-                        color: var(--routine);
-                    }
-                    &:nth-child(2) {
-                        position: relative;
-                        &::after,
-                        &::before {
-                            content: '';
-                            position: absolute;
-                            top: 50%;
-                            transform: translateY(-50%);
-                            width: 1px;
-                            height: 15px;
-                            background: var(--classA);
-                        }
-                        &::before {
-                            left: 0;
-                        }
-                        &::after {
-                            right: 0;
-                        }
-                    }
-                }
-            }
-            .body {
-                padding: 15px;
-                .text {
-                    width: 100%;
-                    height: 200px;
-                    border: none;
-                    resize: none;
-                    vertical-align: middle;
-                    color: var(--routine);
-                    background: transparent;
-                }
-                .draw {
-                    position: relative;
-                    width: 100%;
-                    .line {
-                        display: flex;
-                        align-items: center;
-                        position: absolute;
-                        top: 10px;
-                        left: 10px;
-                        user-select: none;
-                        li {
-                            cursor: pointer;
-                            margin-right: 10px;
-                            color: var(--main);
-                            transition: color 0.35s;
-                            &.active {
-                                color: var(--theme);
-                            }
-                        }
-                    }
-                    .color {
-                        display: flex;
-                        align-items: center;
-                        position: absolute;
-                        bottom: 10px;
-                        left: 10px;
-                        li {
-                            width: 20px;
-                            height: 20px;
-                            border-radius: 50%;
-                            margin: 0 5px;
-                            cursor: pointer;
-                            transition: box-shadow 0.35s;
-                            &.active {
-                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
-                            }
-                            &:nth-child(1) {
-                                background: #303133;
-                            }
-                            &:nth-child(2) {
-                                background: #67c23a;
-                            }
-                            &:nth-child(3) {
-                                background: #e6a23c;
-                            }
-                            &:nth-child(4) {
-                                background: #f56c6c;
-                            }
-                        }
-                    }
-                    .icon {
-                        position: absolute;
-                        right: 10px;
-                        cursor: pointer;
-                        fill: var(--minor);
-                        user-select: none;
-                        &-undo {
-                            top: 10px;
-                        }
-                        &-animate {
-                            bottom: 10px;
-                        }
-                    }
-                    canvas {
-                        background: var(--background);
-                        border-radius: var(--radius-inner);
-                    }
-                }
-            }
-            .foot {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 0 15px 15px;
-                .owo {
-                    min-height: 32px;
-                    padding-top: 3px;
-                    .seat {
-                        text-align: center;
-                        color: var(--routine);
-                        height: 26px;
-                        line-height: 26px;
-                        background: var(--background);
-                        opacity: 0.85;
-                        border-radius: 13px;
-                        width: 70px;
-                    }
-                }
-                .submit {
-                    position: absolute;
-                    top: 0;
-                    right: 15px;
-                    white-space: nowrap;
-                    .cancle {
-                        display: none;
-                        color: var(--main);
-                        cursor: pointer;
-                        margin-right: 10px;
-                        transition: color 0.35s;
-                        &:hover {
-                            color: var(--theme);
-                        }
-                    }
-                    button {
-                        border-radius: 3px;
-                        height: 32px;
-                        padding: 0 15px;
-                        border: none;
-                        background: var(--theme);
-                        color: #fff;
-                        font-size: 14px;
-                        &:hover {
-                            animation: 5s ease-in-out 0s infinite normal none running shaked;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .comment-list {
-        padding-top: 15px;
-        &__item {
-            &-contain {
-                .term {
-                    display: flex;
-                    margin-bottom: 15px;
-                    .avatar {
-                        width: 48px;
-                        height: 48px;
-                        border-radius: 50%;
-                        margin-right: 15px;
-                        padding: 3px;
-                        border: 1px solid var(--classD);
-                        object-fit: cover;
-                    }
-                    .content {
-                        min-width: 0;
-                        flex: 1;
-                        border-bottom: 1px solid var(--classC);
-                        padding-bottom: 15px;
-                        .user {
-                            display: flex;
-                            align-items: center;
-                            margin-bottom: 8px;
-                            line-height: 20px;
-                            color: var(--main);
-                            .author {
-                                margin-right: 10px;
-                                a {
-                                    color: #409eff;
-                                }
-                            }
-                            .owner {
-                                background: var(--theme);
-                                color: #fff;
-                                padding: 0 5px;
-                                border-radius: 2px;
-                                font-style: normal;
-                            }
-                            .agent {
-                                margin-left: auto;
-                                font-size: 12px;
-                                color: var(--minor);
-                            }
-                            .waiting {
-                                color: #e6a23c;
-                                font-style: normal;
-                            }
-                        }
-                        .substance {
-                            width: 100%;
-                            background: var(--classD);
-                            padding: 12px 15px;
-                            border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
-                            color: var(--main);
-                            margin-bottom: 8px;
-                            word-break: break-all;
-                            line-height: 24px;
-                            .parent {
-                                color: #388bff;
-                                margin-bottom: 5px;
-                                user-select: none;
-                                font-weight: 500;
-                            }
-                            .owo_image {
-                                height: 22px;
-                            }
-                            .draw_image {
-                                max-width: 100%;
-                            }
-                        }
-                        .handle {
-                            display: flex;
-                            align-items: center;
-                            color: var(--minor);
-                            .date {
-                                margin-right: 10px;
-                            }
-                            .reply {
-                                display: flex;
-                                align-items: center;
-                                color: var(--main);
-                                font-size: 13px;
-                                cursor: pointer;
-                                transition: color 0.35s;
-                                .icon {
-                                    margin-right: 5px;
-                                }
-                                &:hover {
-                                    color: var(--theme);
-                                    .icon {
-                                        fill: var(--theme);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            &-children {
-                padding-left: 63px;
-                .comment-list__item-children {
-                    padding-left: 0;
-                }
-            }
-            .joe_comment__respond {
-                margin-left: 63px;
-                margin-bottom: 15px;
-                animation: showComment 0.5s;
-            }
-        }
-        .comment-list {
-            padding-top: 0;
-        }
-    }
-    .joe_pagination {
-        padding-top: 0;
-    }
+	background: var(--background);
+	border-radius: var(--radius-wrap);
+	box-shadow: var(--box-shadow);
+	padding: 15px;
+	&__title {
+		font-weight: 500;
+		text-align: center;
+		font-size: 24px;
+		color: var(--main);
+		text-shadow: var(--text-shadow);
+		border-bottom: 1px solid var(--classC);
+		margin-bottom: 15px;
+		padding-bottom: 15px;
+	}
+	&__close {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--routine);
+		&-icon {
+			fill: var(--routine);
+			margin-right: 5px;
+		}
+	}
+	&__respond {
+		&-type {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			.item {
+				background: var(--classD);
+				padding: 0 15px;
+				height: 32px;
+				color: var(--main);
+				border: none;
+				transition: color 0.35s, background 0.35s;
+				&:first-child {
+					border-top-left-radius: var(--radius-inner);
+				}
+				&:last-child {
+					border-top-right-radius: var(--radius-inner);
+				}
+				&.active {
+					color: #fff;
+					background: var(--theme);
+				}
+			}
+		}
+		&-form {
+			border-radius: 6px 0 6px 6px;
+			background: var(--classD);
+			.head {
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--classA);
+				.list {
+					flex: 1;
+					input {
+						width: 100%;
+						border: none;
+						background: transparent;
+						padding: 0 15px;
+						height: 40px;
+						color: var(--routine);
+					}
+					&:nth-child(2) {
+						position: relative;
+						&::after,
+						&::before {
+							content: '';
+							position: absolute;
+							top: 50%;
+							transform: translateY(-50%);
+							width: 1px;
+							height: 15px;
+							background: var(--classA);
+						}
+						&::before {
+							left: 0;
+						}
+						&::after {
+							right: 0;
+						}
+					}
+				}
+			}
+			.body {
+				padding: 15px;
+				.text {
+					width: 100%;
+					height: 200px;
+					border: none;
+					resize: none;
+					vertical-align: middle;
+					color: var(--routine);
+					background: transparent;
+				}
+				.draw {
+					position: relative;
+					width: 100%;
+					.line {
+						display: flex;
+						align-items: center;
+						position: absolute;
+						top: 10px;
+						left: 10px;
+						user-select: none;
+						li {
+							cursor: pointer;
+							margin-right: 10px;
+							color: var(--main);
+							transition: color 0.35s;
+							&.active {
+								color: var(--theme);
+							}
+						}
+					}
+					.color {
+						display: flex;
+						align-items: center;
+						position: absolute;
+						bottom: 10px;
+						left: 10px;
+						li {
+							width: 20px;
+							height: 20px;
+							border-radius: 50%;
+							margin: 0 5px;
+							cursor: pointer;
+							transition: box-shadow 0.35s;
+							&.active {
+								box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
+							}
+							&:nth-child(1) {
+								background: #303133;
+							}
+							&:nth-child(2) {
+								background: #67c23a;
+							}
+							&:nth-child(3) {
+								background: #e6a23c;
+							}
+							&:nth-child(4) {
+								background: #f56c6c;
+							}
+						}
+					}
+					.icon {
+						position: absolute;
+						right: 10px;
+						cursor: pointer;
+						fill: var(--minor);
+						user-select: none;
+						&-undo {
+							top: 10px;
+						}
+						&-animate {
+							bottom: 10px;
+						}
+					}
+					canvas {
+						background: var(--background);
+						border-radius: var(--radius-inner);
+					}
+				}
+			}
+			.foot {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 15px 15px;
+				.owo {
+					min-height: 32px;
+					padding-top: 3px;
+					.seat {
+						text-align: center;
+						color: var(--routine);
+						height: 26px;
+						line-height: 26px;
+						background: var(--background);
+						opacity: 0.85;
+						border-radius: 13px;
+						width: 70px;
+					}
+				}
+				.submit {
+					position: absolute;
+					top: 0;
+					right: 15px;
+					white-space: nowrap;
+					.cancle {
+						display: none;
+						color: var(--main);
+						cursor: pointer;
+						margin-right: 10px;
+						transition: color 0.35s;
+						&:hover {
+							color: var(--theme);
+						}
+					}
+					button {
+						border-radius: 3px;
+						height: 32px;
+						padding: 0 15px;
+						border: none;
+						background: var(--theme);
+						color: #fff;
+						font-size: 14px;
+						&:hover {
+							animation: 5s ease-in-out 0s infinite normal none running shaked;
+						}
+					}
+				}
+			}
+		}
+	}
+	.comment-list {
+		padding-top: 15px;
+		&__item {
+			&-contain {
+				.term {
+					display: flex;
+					margin-bottom: 15px;
+					.avatar {
+						width: 48px;
+						height: 48px;
+						border-radius: 50%;
+						margin-right: 15px;
+						padding: 3px;
+						border: 1px solid var(--classD);
+						object-fit: cover;
+					}
+					.content {
+						min-width: 0;
+						flex: 1;
+						border-bottom: 1px solid var(--classC);
+						padding-bottom: 15px;
+						.user {
+							display: flex;
+							align-items: center;
+							margin-bottom: 8px;
+							line-height: 20px;
+							color: var(--main);
+							.author {
+								margin-right: 10px;
+								a {
+									color: #409eff;
+								}
+							}
+							.owner {
+								background: var(--theme);
+								color: #fff;
+								padding: 0 5px;
+								border-radius: 2px;
+								font-style: normal;
+							}
+							.agent {
+								margin-left: auto;
+								font-size: 12px;
+								color: var(--minor);
+							}
+							.waiting {
+								color: #e6a23c;
+								font-style: normal;
+							}
+						}
+						.substance {
+							width: 100%;
+							background: var(--classD);
+							padding: 12px 15px;
+							border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
+							color: var(--main);
+							margin-bottom: 8px;
+							word-break: break-all;
+							line-height: 24px;
+							.parent {
+								color: #388bff;
+								margin-bottom: 5px;
+								user-select: none;
+								font-weight: 500;
+							}
+							.owo_image {
+								height: 22px;
+							}
+							.draw_image {
+								max-width: 100%;
+							}
+						}
+						.handle {
+							display: flex;
+							align-items: center;
+							color: var(--minor);
+							.date {
+								margin-right: 10px;
+							}
+							.reply {
+								display: flex;
+								align-items: center;
+								color: var(--main);
+								font-size: 13px;
+								cursor: pointer;
+								transition: color 0.35s;
+								.icon {
+									margin-right: 5px;
+								}
+								&:hover {
+									color: var(--theme);
+									.icon {
+										fill: var(--theme);
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			&-children {
+				padding-left: 63px;
+				.comment-list__item-children {
+					padding-left: 0;
+				}
+			}
+			.joe_comment__respond {
+				margin-left: 63px;
+				margin-bottom: 15px;
+				animation: showComment 0.5s;
+			}
+		}
+		.comment-list {
+			padding-top: 0;
+		}
+	}
+	.joe_pagination {
+		padding-top: 0;
+	}
 }
 
 .joe_run {
-    &__day,
-    &__hour,
-    &__minute,
-    &__second {
-        font-weight: 500;
-        color: var(--theme);
-    }
+	&__day,
+	&__hour,
+	&__minute,
+	&__second {
+		font-weight: 500;
+		color: var(--theme);
+	}
 }
 
 .joe_owo {
-    &__contain {
-        position: relative;
-        .seat {
-            user-select: none;
-            cursor: pointer;
-        }
-        .box {
-            width: 100%;
-            display: none;
-            background: var(--background);
-            border-radius: var(--radius-inner);
-            overflow: hidden;
-            margin-top: 15px;
-            .scroll {
-                display: none;
-                max-height: 200px;
-                overflow-y: auto;
-                overscroll-behavior: none;
-                padding: 5px;
-                .item {
-                    text-align: center;
-                    width: calc(100% / 18);
-                    display: inline-block;
-                    padding: 5px;
-                    cursor: pointer;
-                    border-radius: var(--radius-inner);
-                    transition: background 0.25s;
-                    img {
-                        max-width: 100%;
-                        max-height: 100%;
-                    }
-                    &:hover {
-                        background: var(--classD);
-                    }
-                }
-                &:nth-child(3) {
-                    .item {
-                        color: var(--routine);
-                        width: calc(100% / 5);
-                    }
-                }
-            }
-            .bar {
-                display: flex;
-                align-items: center;
-                border-top: 1px solid var(--classC);
-                .item {
-                    line-height: 30px;
-                    padding: 0 10px;
-                    cursor: pointer;
-                    color: var(--routine);
-                    transition: background 0.25s, color 0.25s;
-                    &.active {
-                        color: #fff;
-                        background: var(--theme);
-                    }
-                }
-            }
-        }
-    }
+	&__contain {
+		position: relative;
+		.seat {
+			user-select: none;
+			cursor: pointer;
+		}
+		.box {
+			width: 100%;
+			display: none;
+			background: var(--background);
+			border-radius: var(--radius-inner);
+			overflow: hidden;
+			margin-top: 15px;
+			.scroll {
+				display: none;
+				max-height: 200px;
+				overflow-y: auto;
+				overscroll-behavior: none;
+				padding: 5px;
+				.item {
+					text-align: center;
+					width: calc(100% / 18);
+					display: inline-block;
+					padding: 5px;
+					cursor: pointer;
+					border-radius: var(--radius-inner);
+					transition: background 0.25s;
+					img {
+						max-width: 100%;
+						max-height: 100%;
+					}
+					&:hover {
+						background: var(--classD);
+					}
+				}
+				&:nth-child(3) {
+					.item {
+						color: var(--routine);
+						width: calc(100% / 5);
+					}
+				}
+			}
+			.bar {
+				display: flex;
+				align-items: center;
+				border-top: 1px solid var(--classC);
+				.item {
+					line-height: 30px;
+					padding: 0 10px;
+					cursor: pointer;
+					color: var(--routine);
+					transition: background 0.25s, color 0.25s;
+					&.active {
+						color: #fff;
+						background: var(--theme);
+					}
+				}
+			}
+		}
+	}
 }
 
 .profile-color-modes-illu-frame {
-    opacity: 0;
+	opacity: 0;
 }
 .profile-color-modes-illu-red {
-    stroke: #da3633;
+	stroke: #da3633;
 }
 .profile-color-modes-illu-orange {
-    stroke: #f0883e;
+	stroke: #f0883e;
 }
 .profile-color-modes-illu-purple {
-    stroke: #8957e5;
+	stroke: #8957e5;
 }
 .profile-color-modes-illu-green {
-    stroke: #3fb950;
+	stroke: #3fb950;
 }
 .profile-color-modes-illu-blue {
-    stroke: #388bfd;
+	stroke: #388bfd;
 }
 .profile-color-modes-illu-group {
-    animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
+	animation: profile-color-modes-illu-anim 0.2s cubic-bezier(0.72, 0.08, 1, 0.68) backwards;
 }
 .profile-color-modes-illu-frame {
-    animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
+	animation: profile-color-modes-illu-anim-frame-show 0s forwards, profile-color-modes-illu-anim-frame-hide 0s forwards;
 }
 .profile-color-modes-illu-frame:first-child {
-    opacity: 1;
-    animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
+	opacity: 1;
+	animation: profile-color-modes-illu-anim-frame-hide 0s forwards;
 }
 .profile-color-modes-illu-frame:nth-child(8) {
-    animation: profile-color-modes-illu-anim-frame-show 0s forwards;
+	animation: profile-color-modes-illu-anim-frame-show 0s forwards;
 }
 .profile-color-modes-illu-red {
-    animation-delay: 0.4s;
-    animation-duration: 0.1s;
+	animation-delay: 0.4s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-orange {
-    animation-delay: 0.5s;
-    animation-duration: 0.1s;
+	animation-delay: 0.5s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-purple {
-    animation-delay: 0.6s;
-    animation-duration: 0.1s;
+	animation-delay: 0.6s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-blue {
-    animation-delay: 0.7s;
-    animation-duration: 0.1s;
+	animation-delay: 0.7s;
+	animation-duration: 0.1s;
 }
 .profile-color-modes-illu-green {
-    animation-delay: 0.8s;
-    animation-duration: 0.2s;
-    animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
+	animation-delay: 0.8s;
+	animation-duration: 0.2s;
+	animation-timing-function: cubic-bezier(0.47, 2.92, 0.84, -1.5);
 }
 .profile-color-modes-illu-frame:first-child {
-    animation-delay: 1.8s;
+	animation-delay: 1.8s;
 }
 .profile-color-modes-illu-frame:nth-child(2) {
-    animation-delay: 1.8s, 2.58s;
+	animation-delay: 1.8s, 2.58s;
 }
 .profile-color-modes-illu-frame:nth-child(3) {
-    animation-delay: 2.58s, 2.66s;
+	animation-delay: 2.58s, 2.66s;
 }
 .profile-color-modes-illu-frame:nth-child(4) {
-    animation-delay: 2.66s, 2.78s;
+	animation-delay: 2.66s, 2.78s;
 }
 .profile-color-modes-illu-frame:nth-child(5) {
-    animation-delay: 2.78s, 2.84s;
+	animation-delay: 2.78s, 2.84s;
 }
 .profile-color-modes-illu-frame:nth-child(6) {
-    animation-delay: 2.84s, 3.44s;
+	animation-delay: 2.84s, 3.44s;
 }
 .profile-color-modes-illu-frame:nth-child(7) {
-    animation-delay: 3.44s, 3.56s;
+	animation-delay: 3.44s, 3.56s;
 }
 .profile-color-modes-illu-frame:nth-child(8) {
-    animation-delay: 3.56s;
+	animation-delay: 3.56s;
 }
 .profile-color-modes-illu-frame:nth-child(9),
 .profile-color-modes-illu-frame:nth-child(10) {
-    animation: none;
+	animation: none;
 }
 
 @keyframes wobble-bottom {
-    16.65% {
-        transform: skew(-12deg);
-    }
+	16.65% {
+		transform: skew(-12deg);
+	}
 
-    33.3% {
-        transform: skew(10deg);
-    }
+	33.3% {
+		transform: skew(10deg);
+	}
 
-    49.95% {
-        transform: skew(-6deg);
-    }
+	49.95% {
+		transform: skew(-6deg);
+	}
 
-    66.6% {
-        transform: skew(4deg);
-    }
+	66.6% {
+		transform: skew(4deg);
+	}
 
-    83.25% {
-        transform: skew(-2deg);
-    }
+	83.25% {
+		transform: skew(-2deg);
+	}
 
-    100% {
-        transform: skew(0);
-    }
+	100% {
+		transform: skew(0);
+	}
 }
 
 @keyframes showComment {
-    0% {
-        opacity: 0;
-        transform: scale(0.3);
-    }
-    50% {
-        opacity: 1;
-        transform: scale(1.05);
-    }
-    70% {
-        transform: scale(0.9);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+	0% {
+		opacity: 0;
+		transform: scale(0.3);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+	70% {
+		transform: scale(0.9);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 @keyframes box_shadow {
-    0% {
-        box-shadow: 0 0 0 0 #f56c6c;
-    }
+	0% {
+		box-shadow: 0 0 0 0 #f56c6c;
+	}
 }
 @keyframes progress {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: 30px 0;
-    }
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: 30px 0;
+	}
 }
 @keyframes list_thumbnail_loading {
-    0% {
-        transform: scale(0.85);
-    }
-    100% {
-        transform: scale(1);
-    }
+	0% {
+		transform: scale(0.85);
+	}
+	100% {
+		transform: scale(1);
+	}
 }
 @keyframes list_title_loading {
-    0% {
-        width: 80%;
-    }
-    100% {
-        width: 95%;
-    }
+	0% {
+		width: 80%;
+	}
+	100% {
+		width: 95%;
+	}
 }
 @keyframes list_abstract_loading {
-    0% {
-        width: 60%;
-    }
-    100% {
-        width: 80%;
-    }
+	0% {
+		width: 60%;
+	}
+	100% {
+		width: 80%;
+	}
 }
 @keyframes profile-color-modes-illu-anim {
-    0% {
-        stroke: #666;
-    }
+	0% {
+		stroke: #666;
+	}
 }
 @keyframes profile-color-modes-illu-anim-frame-show {
-    0% {
-        opacity: 0;
-        animation-timing-function: ease-out;
-    }
-    to {
-        opacity: 1;
-    }
+	0% {
+		opacity: 0;
+		animation-timing-function: ease-out;
+	}
+	to {
+		opacity: 1;
+	}
 }
 @keyframes profile-color-modes-illu-anim-frame-hide {
-    0% {
-        opacity: 1;
-        animation-timing-function: ease-in;
-    }
-    to {
-        opacity: 0;
-    }
+	0% {
+		opacity: 1;
+		animation-timing-function: ease-in;
+	}
+	to {
+		opacity: 0;
+	}
 }
 
 @keyframes shaked {
-    2% {
-        transform: translateY(1.5px) rotate(1.5deg);
-    }
-    4% {
-        transform: translateY(-1.5px) rotate(-0.5deg);
-    }
-    6% {
-        transform: translateY(1.5px) rotate(-1.5deg);
-    }
-    8% {
-        transform: translateY(-1.5px) rotate(-1.5deg);
-    }
-    10% {
-        transform: translateY(2.5px) rotate(1.5deg);
-    }
-    12% {
-        transform: translateY(-0.5px) rotate(1.5deg);
-    }
-    14% {
-        transform: translateY(-1.5px) rotate(1.5deg);
-    }
-    16% {
-        transform: translateY(-0.5px) rotate(-1.5deg);
-    }
-    18% {
-        transform: translateY(0.5px) rotate(-1.5deg);
-    }
-    20% {
-        transform: translateY(-1.5px) rotate(2.5deg);
-    }
-    22% {
-        transform: translateY(0.5px) rotate(-1.5deg);
-    }
-    24% {
-        transform: translateY(1.5px) rotate(1.5deg);
-    }
-    26% {
-        transform: translateY(0.5px) rotate(0.5deg);
-    }
-    28% {
-        transform: translateY(0.5px) rotate(1.5deg);
-    }
-    30% {
-        transform: translateY(-0.5px) rotate(2.5deg);
-    }
-    32%,
-    34% {
-        transform: translateY(1.5px) rotate(-0.5deg);
-    }
-    36% {
-        transform: translateY(-1.5px) rotate(2.5deg);
-    }
-    38% {
-        transform: translateY(1.5px) rotate(-1.5deg);
-    }
-    40% {
-        transform: translateY(-0.5px) rotate(2.5deg);
-    }
-    42% {
-        transform: translateY(2.5px) rotate(-1.5deg);
-    }
-    44% {
-        transform: translateY(1.5px) rotate(0.5deg);
-    }
-    46% {
-        transform: translateY(-1.5px) rotate(2.5deg);
-    }
-    48% {
-        transform: translateY(-0.5px) rotate(0.5deg);
-    }
-    50% {
-        transform: translateY(0.5px) rotate(0.5deg);
-    }
-    52% {
-        transform: translateY(2.5px) rotate(2.5deg);
-    }
-    54% {
-        transform: translateY(-1.5px) rotate(1.5deg);
-    }
-    56% {
-        transform: translateY(2.5px) rotate(2.5deg);
-    }
-    58% {
-        transform: translateY(0.5px) rotate(2.5deg);
-    }
-    60% {
-        transform: translateY(2.5px) rotate(2.5deg);
-    }
-    62% {
-        transform: translateY(-0.5px) rotate(2.5deg);
-    }
-    64% {
-        transform: translateY(-0.5px) rotate(1.5deg);
-    }
-    66% {
-        transform: translateY(1.5px) rotate(-0.5deg);
-    }
-    68% {
-        transform: translateY(-1.5px) rotate(-0.5deg);
-    }
-    70% {
-        transform: translateY(1.5px) rotate(0.5deg);
-    }
-    72% {
-        transform: translateY(2.5px) rotate(1.5deg);
-    }
-    74% {
-        transform: translateY(-0.5px) rotate(0.5deg);
-    }
-    76% {
-        transform: translateY(-0.5px) rotate(2.5deg);
-    }
-    78% {
-        transform: translateY(-0.5px) rotate(1.5deg);
-    }
-    80% {
-        transform: translateY(1.5px) rotate(1.5deg);
-    }
-    82% {
-        transform: translateY(-0.5px) rotate(0.5deg);
-    }
-    84% {
-        transform: translateY(1.5px) rotate(2.5deg);
-    }
-    86% {
-        transform: translateY(-1.5px) rotate(-1.5deg);
-    }
-    88% {
-        transform: translateY(-0.5px) rotate(2.5deg);
-    }
-    90% {
-        transform: translateY(2.5px) rotate(-0.5deg);
-    }
-    92% {
-        transform: translateY(0.5px) rotate(-0.5deg);
-    }
-    94% {
-        transform: translateY(2.5px) rotate(0.5deg);
-    }
-    96% {
-        transform: translateY(-0.5px) rotate(1.5deg);
-    }
-    98% {
-        transform: translateY(-1.5px) rotate(-0.5deg);
-    }
-    0%,
-    100% {
-        transform: translate(0px) rotate(0deg);
-    }
+	2% {
+		transform: translateY(1.5px) rotate(1.5deg);
+	}
+	4% {
+		transform: translateY(-1.5px) rotate(-0.5deg);
+	}
+	6% {
+		transform: translateY(1.5px) rotate(-1.5deg);
+	}
+	8% {
+		transform: translateY(-1.5px) rotate(-1.5deg);
+	}
+	10% {
+		transform: translateY(2.5px) rotate(1.5deg);
+	}
+	12% {
+		transform: translateY(-0.5px) rotate(1.5deg);
+	}
+	14% {
+		transform: translateY(-1.5px) rotate(1.5deg);
+	}
+	16% {
+		transform: translateY(-0.5px) rotate(-1.5deg);
+	}
+	18% {
+		transform: translateY(0.5px) rotate(-1.5deg);
+	}
+	20% {
+		transform: translateY(-1.5px) rotate(2.5deg);
+	}
+	22% {
+		transform: translateY(0.5px) rotate(-1.5deg);
+	}
+	24% {
+		transform: translateY(1.5px) rotate(1.5deg);
+	}
+	26% {
+		transform: translateY(0.5px) rotate(0.5deg);
+	}
+	28% {
+		transform: translateY(0.5px) rotate(1.5deg);
+	}
+	30% {
+		transform: translateY(-0.5px) rotate(2.5deg);
+	}
+	32%,
+	34% {
+		transform: translateY(1.5px) rotate(-0.5deg);
+	}
+	36% {
+		transform: translateY(-1.5px) rotate(2.5deg);
+	}
+	38% {
+		transform: translateY(1.5px) rotate(-1.5deg);
+	}
+	40% {
+		transform: translateY(-0.5px) rotate(2.5deg);
+	}
+	42% {
+		transform: translateY(2.5px) rotate(-1.5deg);
+	}
+	44% {
+		transform: translateY(1.5px) rotate(0.5deg);
+	}
+	46% {
+		transform: translateY(-1.5px) rotate(2.5deg);
+	}
+	48% {
+		transform: translateY(-0.5px) rotate(0.5deg);
+	}
+	50% {
+		transform: translateY(0.5px) rotate(0.5deg);
+	}
+	52% {
+		transform: translateY(2.5px) rotate(2.5deg);
+	}
+	54% {
+		transform: translateY(-1.5px) rotate(1.5deg);
+	}
+	56% {
+		transform: translateY(2.5px) rotate(2.5deg);
+	}
+	58% {
+		transform: translateY(0.5px) rotate(2.5deg);
+	}
+	60% {
+		transform: translateY(2.5px) rotate(2.5deg);
+	}
+	62% {
+		transform: translateY(-0.5px) rotate(2.5deg);
+	}
+	64% {
+		transform: translateY(-0.5px) rotate(1.5deg);
+	}
+	66% {
+		transform: translateY(1.5px) rotate(-0.5deg);
+	}
+	68% {
+		transform: translateY(-1.5px) rotate(-0.5deg);
+	}
+	70% {
+		transform: translateY(1.5px) rotate(0.5deg);
+	}
+	72% {
+		transform: translateY(2.5px) rotate(1.5deg);
+	}
+	74% {
+		transform: translateY(-0.5px) rotate(0.5deg);
+	}
+	76% {
+		transform: translateY(-0.5px) rotate(2.5deg);
+	}
+	78% {
+		transform: translateY(-0.5px) rotate(1.5deg);
+	}
+	80% {
+		transform: translateY(1.5px) rotate(1.5deg);
+	}
+	82% {
+		transform: translateY(-0.5px) rotate(0.5deg);
+	}
+	84% {
+		transform: translateY(1.5px) rotate(2.5deg);
+	}
+	86% {
+		transform: translateY(-1.5px) rotate(-1.5deg);
+	}
+	88% {
+		transform: translateY(-0.5px) rotate(2.5deg);
+	}
+	90% {
+		transform: translateY(2.5px) rotate(-0.5deg);
+	}
+	92% {
+		transform: translateY(0.5px) rotate(-0.5deg);
+	}
+	94% {
+		transform: translateY(2.5px) rotate(0.5deg);
+	}
+	96% {
+		transform: translateY(-0.5px) rotate(1.5deg);
+	}
+	98% {
+		transform: translateY(-1.5px) rotate(-0.5deg);
+	}
+	0%,
+	100% {
+		transform: translate(0px) rotate(0deg);
+	}
 }
diff --git a/core/function.php b/core/function.php
index a66e5b2..0da4a03 100644
--- a/core/function.php
+++ b/core/function.php
@@ -3,7 +3,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-	return "5.5.1";
+	return "5.5.2";
 };
 
 /* 判断是否是手机 */
diff --git a/functions.php b/functions.php
index 7f50d32..9d0a42e 100644
--- a/functions.php
+++ b/functions.php
@@ -338,7 +338,7 @@ function themeConfig($form)
     $JCustomFont->setAttribute('class', 'joe_content joe_global');
     $form->addInput($JCustomFont);
 
-    
+
     $JAside_Author_Nick = new Typecho_Widget_Helper_Form_Element_Text(
         'JAside_Author_Nick',
         NULL,
@@ -594,6 +594,19 @@ function themeConfig($form)
     );
     $JAside_Weather_Style->setAttribute('class', 'joe_content joe_aside');
     $form->addInput($JAside_Weather_Style->multiMode());
+    /* --------------------------------------- */
+    $JADContent = new Typecho_Widget_Helper_Form_Element_Textarea(
+        'JADContent',
+        NULL,
+        NULL,
+        '侧边栏广告（非必填）',
+        '介绍：用于设置侧边栏广告<br />
+         格式：广告图片 || 跳转链接 （中间使用两个竖杠分隔）<br />
+         例如：https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/thumb/1.jpg || https://as.js.cn <br />
+         注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0)'
+    );
+    $JADContent->setAttribute('class', 'joe_content joe_aside');
+    $form->addInput($JADContent);
 
 
 
diff --git a/public/aside.php b/public/aside.php
index 03b73e8..c9dee6a 100644
--- a/public/aside.php
+++ b/public/aside.php
@@ -132,4 +132,10 @@
             </div>
         </section>
     <?php endif; ?>
+    <?php if ($this->options->JADContent) : ?>
+        <a class="joe_aside__item advert" target="_blank" rel="noopener noreferrer nofollow" href="<?php echo explode("||", $this->options->JADContent)[1]; ?>" title="广告">
+            <img class="lazyload" width="100%" src="<?php _getLazyload() ?>" data-src="<?php echo explode("||", $this->options->JADContent)[0]; ?>" onerror="javascript: this.src='<?php _getLazyload() ?>';" alt="广告" />
+            <span class="icon">广告</span>
+        </a>
+    <?php endif; ?>
 </aside>
\ No newline at end of file