diff --git a/assets/css/joe.global.css b/assets/css/joe.global.css
index 488ce3f..23f9c51 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 8px;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:50%;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:3px}.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}.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{position:relative;width:210px;height:140px;min-width:210px;min-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{position:relative;width:210px;height:140px;min-width:210px;min-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:15px;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:15px}.joe_detail__article p{line-height:26px;margin-bottom:15px}.joe_detail__article blockquote{line-height:26px;margin-bottom:15px;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 15px;padding:30px 0 0;border-radius:var(--radius-inner);font-size:14px;overflow:hidden !important}.joe_detail__article pre[class*='language-'] code[class*='language-']{display:block;max-width:100%;overflow:auto;padding:0 15px 12px;border-radius:var(--radius-inner)}.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:15px;padding:0 30px}.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:15px;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:15px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow)}.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:300px;height:44px;border:none;border-radius:var(--radius-inner);color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:0;right:0;height:44px;line-height:44px;width:44px;cursor:pointer;text-align:center;font-size:13px;color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: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:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:500px;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:15px}.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__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{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .submit{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;fill:var(--main);transition:fill 0.35s}.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)}.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 8px;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:50%;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:3px}.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}.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{position:relative;width:210px;height:140px;min-width:210px;min-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{position:relative;width:210px;height:140px;min-width:210px;min-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:15px;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:15px}.joe_detail__article p{line-height:26px;margin-bottom:15px}.joe_detail__article blockquote{line-height:26px;margin-bottom:15px;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 15px;padding:30px 0 0;border-radius:var(--radius-inner);font-size:14px;overflow:hidden !important}.joe_detail__article pre[class*='language-'] code[class*='language-']{display:block;max-width:100%;overflow:auto;padding:0 15px 12px;border-radius:var(--radius-inner)}.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:15px;padding:0 30px}.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:15px;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:15px}.joe_detail__article-protected .contain{position:relative;box-shadow:var(--box-shadow)}.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:300px;height:44px;border:none;border-radius:var(--radius-inner);color:var(--routine);padding-left:50px;background:var(--background)}.joe_detail__article-protected .contain .submit{position:absolute;top:0;right:0;height:44px;line-height:44px;width:44px;cursor:pointer;text-align:center;font-size:13px;color:var(--main);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: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:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:500px;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:15px}.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__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{display:flex;align-items:center;color:var(--minor);white-space:nowrap;margin-bottom:10px}.joe_detail__copyright .content .item:last-child{margin-bottom:0}.joe_detail__copyright .content .item .icon{width:20px;height:20px;min-width:20px;min-height:20px;margin-right:5px}.joe_detail__copyright .content .item .link{color:var(--minor)}.joe_detail__copyright .content .item .link:hover{color:var(--theme)}.joe_detail__copyright .content .item .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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;justify-content:space-between;padding:0 15px 15px}.joe_comment__respond-form .foot .owo .seat{color:var(--routine);height:100%;display:flex;align-items:center}.joe_comment__respond-form .foot .submit{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;fill:var(--main);transition:fill 0.35s}.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{position:absolute;left:0;width:300px;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-inner);overflow:hidden;visibility:hidden;-webkit-transform:scale(0.5);transform:scale(0.5);border:1px solid var(--classD);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}.joe_owo__contain .box.show{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.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:nth-child(3) .item{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--routine)}.joe_owo__contain .box .scroll .item{width:20%;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 .bar{display:flex;align-items:center;border-top:1px solid var(--classD)}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s}.joe_owo__contain .box .bar .item.active{background:var(--classD)}.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 3a44eab..c48cdb4 100644
--- a/assets/css/joe.global.scss
+++ b/assets/css/joe.global.scss
@@ -1,3040 +1,3124 @@
 .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 8px;
-					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: 50%;
-						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: 3px;
-					}
-				}
-			}
-		}
-		&-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 8px;
+                    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: 50%;
+                        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: 3px;
+                    }
+                }
+            }
+        }
+        &-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;
-				}
-			}
-			.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;
+                }
+            }
+            .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;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .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 {
-				position: relative;
-				width: 210px;
-				height: 140px;
-				min-width: 210px;
-				min-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 {
-				position: relative;
-				width: 210px;
-				height: 140px;
-				min-width: 210px;
-				min-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 {
+                position: relative;
+                width: 210px;
+                height: 140px;
+                min-width: 210px;
+                min-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 {
+                position: relative;
+                width: 210px;
+                height: 140px;
+                min-width: 210px;
+                min-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: 15px;
-			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: 15px;
-		}
-		p {
-			line-height: 26px;
-			margin-bottom: 15px;
-		}
-		blockquote {
-			line-height: 26px;
-			margin-bottom: 15px;
-			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 15px;
-			padding: 30px 0 0;
-			border-radius: var(--radius-inner);
-			font-size: 14px;
-			overflow: hidden !important;
-			code[class*='language-'] {
-				display: block;
-				max-width: 100%;
-				overflow: auto;
-				padding: 0 15px 12px;
-				border-radius: var(--radius-inner);
-			}
-			&::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: 15px;
-			padding: 0 30px;
-			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: 15px;
-			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: 15px;
-			.contain {
-				position: relative;
-				box-shadow: var(--box-shadow);
-				.icon {
-					position: absolute;
-					top: 50%;
-					transform: translateY(-50%);
-					left: 15px;
-				}
-				.password {
-					width: 300px;
-					height: 44px;
-					border: none;
-					border-radius: var(--radius-inner);
-					color: var(--routine);
-					padding-left: 50px;
-					background: var(--background);
-				}
-				.submit {
-					position: absolute;
-					top: 0;
-					right: 0;
-					height: 44px;
-					line-height: 44px;
-					width: 44px;
-					cursor: pointer;
-					text-align: center;
-					font-size: 13px;
-					color: var(--main);
-					user-select: 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: 500px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-			&.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: 500px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-		}
-		&-copy {
-			cursor: pointer;
-			user-select: none;
-		}
-		&-video {
-			margin-bottom: 15px;
-			.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);
-						}
-					}
-				}
-			}
-		}
-	}
-	&__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 {
-				display: flex;
-				align-items: center;
-				color: var(--minor);
-				white-space: nowrap;
-				margin-bottom: 10px;
-				&:last-child {
-					margin-bottom: 0;
-				}
-				.icon {
-					width: 20px;
-					height: 20px;
-					min-width: 20px;
-					min-height: 20px;
-					margin-right: 5px;
-				}
-				.link {
-					color: var(--minor);
-					&:hover {
-						color: var(--theme);
-					}
-				}
-				.text {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-			}
-		}
-	}
-	&__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: 15px;
+            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: 15px;
+        }
+        p {
+            line-height: 26px;
+            margin-bottom: 15px;
+        }
+        blockquote {
+            line-height: 26px;
+            margin-bottom: 15px;
+            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 15px;
+            padding: 30px 0 0;
+            border-radius: var(--radius-inner);
+            font-size: 14px;
+            overflow: hidden !important;
+            code[class*='language-'] {
+                display: block;
+                max-width: 100%;
+                overflow: auto;
+                padding: 0 15px 12px;
+                border-radius: var(--radius-inner);
+            }
+            &::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: 15px;
+            padding: 0 30px;
+            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: 15px;
+            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: 15px;
+            .contain {
+                position: relative;
+                box-shadow: var(--box-shadow);
+                .icon {
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 15px;
+                }
+                .password {
+                    width: 300px;
+                    height: 44px;
+                    border: none;
+                    border-radius: var(--radius-inner);
+                    color: var(--routine);
+                    padding-left: 50px;
+                    background: var(--background);
+                }
+                .submit {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    height: 44px;
+                    line-height: 44px;
+                    width: 44px;
+                    cursor: pointer;
+                    text-align: center;
+                    font-size: 13px;
+                    color: var(--main);
+                    user-select: 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: 500px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            &.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: 500px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+        &-copy {
+            cursor: pointer;
+            user-select: none;
+        }
+        &-video {
+            margin-bottom: 15px;
+            .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);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &__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 {
+                display: flex;
+                align-items: center;
+                color: var(--minor);
+                white-space: nowrap;
+                margin-bottom: 10px;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                    min-width: 20px;
+                    min-height: 20px;
+                    margin-right: 5px;
+                }
+                .link {
+                    color: var(--minor);
+                    &:hover {
+                        color: var(--theme);
+                    }
+                }
+                .text {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+    &__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;
+    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;
+                justify-content: space-between;
+                padding: 0 15px 15px;
+                .owo {
+					.seat {
 						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 {
+                        height: 100%;
 						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;
-				justify-content: space-between;
-				padding: 0 15px 15px;
-				.submit {
-					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;
-									fill: var(--main);
-									transition: fill 0.35s;
-								}
-								&: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;
-	}
+                }
+                .submit {
+                    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;
+                                    fill: var(--main);
+                                    transition: fill 0.35s;
+                                }
+                                &: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 {
+            position: absolute;
+            left: 0;
+            width: 300px;
+            background: var(--background);
+            box-shadow: var(--box-shadow);
+            border-radius: var(--radius-inner);
+            overflow: hidden;
+            visibility: hidden;
+            transform: scale(0.5);
+            border: 1px solid var(--classD);
+            opacity: 0;
+            transition: visibility, 0.35s, opacity 0.35s, transform 0.35s;
+            &.show {
+                visibility: visible;
+                transform: scale(1);
+                opacity: 1;
+            }
+            .scroll {
+                display: none;
+                max-height: 200px;
+                overflow-y: auto;
+                overscroll-behavior: none;
+                padding: 5px;
+                &:nth-child(3) .item {
+                    text-align: center;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 50%;
+                    user-select: none;
+                    color: var(--routine);
+                }
+                .item {
+                    width: 20%;
+                    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);
+                    }
+                }
+            }
+            .bar {
+                display: flex;
+                align-items: center;
+                border-top: 1px solid var(--classD);
+                .item {
+                    line-height: 30px;
+                    padding: 0 10px;
+                    cursor: pointer;
+                    color: var(--routine);
+                    transition: background 0.25s;
+                    &.active {
+                        background: var(--classD);
+                    }
+                }
+            }
+        }
+    }
+}
+
+
 .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/assets/js/joe.archive.js b/assets/js/joe.archive.js
index f3005e2..3479ef7 100644
--- a/assets/js/joe.archive.js
+++ b/assets/js/joe.archive.js
@@ -1,16 +1,16 @@
 /* 搜索页面需要用到的JS */
-document.addEventListener('DOMContentLoaded', () => {
-	/* 激活列表特效 */
-	{
-		const wow = $('.joe_archive__list').attr('data-wow')
-		if (wow !== 'off' && wow)
-			new WOW({
-				boxClass: 'wow',
-				animateClass: `animated ${wow}`,
-				offset: 0,
-				mobile: true,
-				live: true,
-				scrollContainer: null
-			}).init()
-	}
-})
+document.addEventListener('DOMContentLoaded', function () {
+    /* 激活列表特效 */
+    {
+        var wow = $('.joe_archive__list').attr('data-wow');
+        if (wow !== 'off' && wow)
+            new WOW({
+                boxClass: 'wow',
+                animateClass: 'animated '.concat(wow),
+                offset: 0,
+                mobile: true,
+                live: true,
+                scrollContainer: null
+            }).init();
+    }
+});
diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js
index f8fba12..1133819 100644
--- a/assets/js/joe.global.js
+++ b/assets/js/joe.global.js
@@ -1,140 +1,140 @@
 document.addEventListener('DOMContentLoaded', () => {
-	/* 公共修改地址栏URL函数 */
-	const changeURLArg = (url, arg, arg_val) => {
-		let pattern = arg + '=([^&]*)'
-		let replaceText = arg + '=' + arg_val
-		if (url.match(pattern)) {
-			let tmp = '/(' + arg + '=)([^&]*)/gi'
-			return url.replace(eval(tmp), replaceText)
-		} else {
-			if (url.match('[?]')) {
-				return url + '&' + replaceText
-			} else {
-				return url + '?' + replaceText
-			}
-		}
-		return url + '\n' + arg + '\n' + arg_val
-	}
+    /* 公共修改地址栏URL函数 */
+    const changeURLArg = (url, arg, arg_val) => {
+        let pattern = arg + '=([^&]*)';
+        let replaceText = arg + '=' + arg_val;
+        if (url.match(pattern)) {
+            let tmp = '/(' + arg + '=)([^&]*)/gi';
+            return url.replace(eval(tmp), replaceText);
+        } else {
+            if (url.match('[?]')) {
+                return url + '&' + replaceText;
+            } else {
+                return url + '?' + replaceText;
+            }
+        }
+        return url + '\n' + arg + '\n' + arg_val;
+    };
 
-	/* 初始化昼夜模式 */
-	{
-		if (localStorage.getItem('data-night')) {
-			$('.joe_action_item.mode .icon-1').addClass('active')
-			$('.joe_action_item.mode .icon-2').removeClass('active')
-		} else {
-			$('html').removeAttr('data-night')
-			$('.joe_action_item.mode .icon-1').removeClass('active')
-			$('.joe_action_item.mode .icon-2').addClass('active')
-		}
-		$('.joe_action_item.mode').on('click', () => {
-			if (localStorage.getItem('data-night')) {
-				$('.joe_action_item.mode .icon-1').removeClass('active')
-				$('.joe_action_item.mode .icon-2').addClass('active')
-				$('html').removeAttr('data-night')
-				localStorage.removeItem('data-night')
-			} else {
-				$('.joe_action_item.mode .icon-1').addClass('active')
-				$('.joe_action_item.mode .icon-2').removeClass('active')
-				$('html').attr('data-night', 'night')
-				localStorage.setItem('data-night', 'night')
-			}
-		})
-	}
+    /* 初始化昼夜模式 */
+    {
+        if (localStorage.getItem('data-night')) {
+            $('.joe_action_item.mode .icon-1').addClass('active');
+            $('.joe_action_item.mode .icon-2').removeClass('active');
+        } else {
+            $('html').removeAttr('data-night');
+            $('.joe_action_item.mode .icon-1').removeClass('active');
+            $('.joe_action_item.mode .icon-2').addClass('active');
+        }
+        $('.joe_action_item.mode').on('click', () => {
+            if (localStorage.getItem('data-night')) {
+                $('.joe_action_item.mode .icon-1').removeClass('active');
+                $('.joe_action_item.mode .icon-2').addClass('active');
+                $('html').removeAttr('data-night');
+                localStorage.removeItem('data-night');
+            } else {
+                $('.joe_action_item.mode .icon-1').addClass('active');
+                $('.joe_action_item.mode .icon-2').removeClass('active');
+                $('html').attr('data-night', 'night');
+                localStorage.setItem('data-night', 'night');
+            }
+        });
+    }
 
-	/* 动态背景 */
-	{
-		if (!Joe.IS_MOBILE && Joe.DYNAMIC_BACKGROUND !== 'off' && Joe.DYNAMIC_BACKGROUND && !Joe.WALLPAPER_BACKGROUND_PC) {
-			$.getScript(`https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/backdrop/${Joe.DYNAMIC_BACKGROUND}`)
-		}
-	}
+    /* 动态背景 */
+    {
+        if (!Joe.IS_MOBILE && Joe.DYNAMIC_BACKGROUND !== 'off' && Joe.DYNAMIC_BACKGROUND && !Joe.WALLPAPER_BACKGROUND_PC) {
+            $.getScript(`https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/assets/backdrop/${Joe.DYNAMIC_BACKGROUND}`);
+        }
+    }
 
-	/* 搜索框弹窗 */
-	{
-		$('.joe_header__above-search .input').on('click', e => {
-			e.stopPropagation()
-			$('.joe_header__above-search .result').addClass('active')
-		})
-		$(document).on('click', function () {
-			$('.joe_header__above-search .result').removeClass('active')
-		})
-		$(document).on('scroll', function () {
-			$('.joe_header__above-search .result').removeClass('active')
-		})
-	}
+    /* 搜索框弹窗 */
+    {
+        $('.joe_header__above-search .input').on('click', e => {
+            e.stopPropagation();
+            $('.joe_header__above-search .result').addClass('active');
+        });
+        $(document).on('click', function () {
+            $('.joe_header__above-search .result').removeClass('active');
+        });
+        $(document).on('scroll', function () {
+            $('.joe_header__above-search .result').removeClass('active');
+        });
+    }
 
-	/* 激活全局下拉框功能 */
-	{
-		$('.joe_dropdown').each(function (index, item) {
-			const menu = $(this).find('.joe_dropdown__menu')
-			const trigger = $(item).attr('trigger') || 'click'
-			const placement = $(item).attr('placement') || $(this).height() || 0
-			menu.css('top', placement)
-			if (trigger === 'hover') {
-				$(this).hover(
-					() => $(this).addClass('active'),
-					() => $(this).removeClass('active')
-				)
-			} else {
-				$(this).on('click', function (e) {
-					$(this).toggleClass('active')
-					$(document).one('click', () => $(this).removeClass('active'))
-					e.stopPropagation()
-				})
-				menu.on('click', e => e.stopPropagation())
-			}
-		})
-	}
+    /* 激活全局下拉框功能 */
+    {
+        $('.joe_dropdown').each(function (index, item) {
+            const menu = $(this).find('.joe_dropdown__menu');
+            const trigger = $(item).attr('trigger') || 'click';
+            const placement = $(item).attr('placement') || $(this).height() || 0;
+            menu.css('top', placement);
+            if (trigger === 'hover') {
+                $(this).hover(
+                    () => $(this).addClass('active'),
+                    () => $(this).removeClass('active')
+                );
+            } else {
+                $(this).on('click', function (e) {
+                    $(this).toggleClass('active');
+                    $(document).one('click', () => $(this).removeClass('active'));
+                    e.stopPropagation();
+                });
+                menu.on('click', e => e.stopPropagation());
+            }
+        });
+    }
 
-	/* 激活全局返回顶部功能 */
-	{
-		const handleScroll = () => ((document.documentElement.scrollTop || document.body.scrollTop) > 300 ? $('.joe_action_item.scroll').addClass('active') : $('.joe_action_item.scroll').removeClass('active'))
-		handleScroll()
-		$(window).on('scroll', () => handleScroll())
-		$('.joe_action_item.scroll').on('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
-	}
+    /* 激活全局返回顶部功能 */
+    {
+        const handleScroll = () => ((document.documentElement.scrollTop || document.body.scrollTop) > 300 ? $('.joe_action_item.scroll').addClass('active') : $('.joe_action_item.scroll').removeClass('active'));
+        handleScroll();
+        $(window).on('scroll', () => handleScroll());
+        $('.joe_action_item.scroll').on('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+    }
 
-	/* 激活侧边栏人生倒计时功能 */
-	{
-		if ($('.joe_aside__item.timelife').length !== 0) {
-			let timelife = [
-				{ title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' },
-				{ title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' },
-				{ title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' },
-				{ title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' }
-			]
-			{
-				let nowDate = +new Date()
-				let todayStartDate = new Date(new Date().toLocaleDateString()).getTime()
-				let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60
-				let todayPassHoursPercent = (todayPassHours / 24) * 100
-				timelife[0].num = parseInt(todayPassHours)
-				timelife[0].percent = parseInt(todayPassHoursPercent) + '%'
-			}
-			{
-				let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }
-				let weekDay = weeks[new Date().getDay()]
-				let weekDayPassPercent = (weekDay / 7) * 100
-				timelife[1].num = parseInt(weekDay)
-				timelife[1].percent = parseInt(weekDayPassPercent) + '%'
-			}
-			{
-				let year = new Date().getFullYear()
-				let date = new Date().getDate()
-				let month = new Date().getMonth() + 1
-				let monthAll = new Date(year, month, 0).getDate()
-				let monthPassPercent = (date / monthAll) * 100
-				timelife[2].num = date
-				timelife[2].percent = parseInt(monthPassPercent) + '%'
-			}
-			{
-				let month = new Date().getMonth() + 1
-				let yearPass = (month / 12) * 100
-				timelife[3].num = month
-				timelife[3].percent = parseInt(yearPass) + '%'
-			}
-			let htmlStr = ''
-			timelife.forEach((item, index) => {
-				htmlStr += `
+    /* 激活侧边栏人生倒计时功能 */
+    {
+        if ($('.joe_aside__item.timelife').length !== 0) {
+            let timelife = [
+                { title: '今日已经过去', endTitle: '小时', num: 0, percent: '0%' },
+                { title: '这周已经过去', endTitle: '天', num: 0, percent: '0%' },
+                { title: '本月已经过去', endTitle: '天', num: 0, percent: '0%' },
+                { title: '今年已经过去', endTitle: '个月', num: 0, percent: '0%' }
+            ];
+            {
+                let nowDate = +new Date();
+                let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
+                let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
+                let todayPassHoursPercent = (todayPassHours / 24) * 100;
+                timelife[0].num = parseInt(todayPassHours);
+                timelife[0].percent = parseInt(todayPassHoursPercent) + '%';
+            }
+            {
+                let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 };
+                let weekDay = weeks[new Date().getDay()];
+                let weekDayPassPercent = (weekDay / 7) * 100;
+                timelife[1].num = parseInt(weekDay);
+                timelife[1].percent = parseInt(weekDayPassPercent) + '%';
+            }
+            {
+                let year = new Date().getFullYear();
+                let date = new Date().getDate();
+                let month = new Date().getMonth() + 1;
+                let monthAll = new Date(year, month, 0).getDate();
+                let monthPassPercent = (date / monthAll) * 100;
+                timelife[2].num = date;
+                timelife[2].percent = parseInt(monthPassPercent) + '%';
+            }
+            {
+                let month = new Date().getMonth() + 1;
+                let yearPass = (month / 12) * 100;
+                timelife[3].num = month;
+                timelife[3].percent = parseInt(yearPass) + '%';
+            }
+            let htmlStr = '';
+            timelife.forEach((item, index) => {
+                htmlStr += `
 						<div class="item">
 							<div class="title">
 								${item.title}
@@ -147,309 +147,316 @@ document.addEventListener('DOMContentLoaded', () => {
 								</div>
 								<div class="progress-percentage">${item.percent}</div>
 							</div>
-						</div>`
-			})
-			$('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr)
-		}
-	}
+						</div>`;
+            });
+            $('.joe_aside__item.timelife .joe_aside__item-contain').html(htmlStr);
+        }
+    }
 
-	/* 激活侧边栏天气功能 */
-	{
-		if ($('.joe_aside__item.weather').length !== 0) {
-			const key = $('.joe_aside__item.weather').attr('data-key')
-			const style = $('.joe_aside__item.weather').attr('data-style')
-			const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' }
-			window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } }
-		}
-	}
+    /* 激活侧边栏天气功能 */
+    {
+        if ($('.joe_aside__item.weather').length !== 0) {
+            const key = $('.joe_aside__item.weather').attr('data-key');
+            const style = $('.joe_aside__item.weather').attr('data-style');
+            const aqiColor = { 1: 'FFFFFF', 2: '4A4A4A', 3: 'FFFFFF' };
+            window.WIDGET = { CONFIG: { layout: 2, width: '220', height: '270', background: style, dataColor: aqiColor[style], language: 'zh', key: key } };
+        }
+    }
 
-	/* 激活侧边栏排行榜功能 */
-	{
-		if ($('.joe_aside__item.ranking').length !== 0) {
-			$.ajax({
-				url: Joe.BASE_API,
-				type: 'POST',
-				data: { routeType: 'aside_ranking' },
-				success(res) {
-					$('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title)
-					let htmlStr = ''
-					if (res.code === 1) {
-						res.data.forEach((item, index) => {
-							htmlStr += `
+    /* 激活侧边栏排行榜功能 */
+    {
+        if ($('.joe_aside__item.ranking').length !== 0) {
+            $.ajax({
+                url: Joe.BASE_API,
+                type: 'POST',
+                data: { routeType: 'aside_ranking' },
+                success(res) {
+                    $('.joe_aside__item.ranking .joe_aside__item-title .text').html(res.title);
+                    let htmlStr = '';
+                    if (res.code === 1) {
+                        res.data.forEach((item, index) => {
+                            htmlStr += `
 									<li class="item">
 										<span class="sort">${index + 1}</span>
 										<a class="link" href="${item.url}" title="${item.title}" target="_blank" rel="noopener noreferrer nofollow">${item.title}</a>
 									</li>
-								`
-						})
-					} else {
-						htmlStr += `<li class="error">数据抓取异常！</li>`
-					}
-					$('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr)
-				}
-			})
-		}
-	}
+								`;
+                        });
+                    } else {
+                        htmlStr += `<li class="error">数据抓取异常！</li>`;
+                    }
+                    $('.joe_aside__item.ranking .joe_aside__item-contain').html(htmlStr);
+                }
+            });
+        }
+    }
 
-	/* 设置侧边栏最后一个元素的高度 */
-	{
-		$('.joe_aside__item:last-child').css('top', $('.joe_header').height() + 15)
-	}
+    /* 设置侧边栏最后一个元素的高度 */
+    {
+        $('.joe_aside__item:last-child').css('top', $('.joe_header').height() + 15);
+    }
 
-	/* 激活Live2d人物 */
-	{
-		if (Joe.LIVE2D !== 'off' && Joe.LIVE2D) {
-			$.getScript('https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js', () => {
-				L2Dwidget.init({
-					model: { jsonPath: Joe.LIVE2D, scale: 1 },
-					mobile: { show: false },
-					display: { position: 'right', width: 160, height: 200, hOffset: 70, vOffset: 0 }
-				})
-			})
-		}
-	}
+    /* 激活Live2d人物 */
+    {
+        if (Joe.LIVE2D !== 'off' && Joe.LIVE2D) {
+            $.getScript('https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js', () => {
+                L2Dwidget.init({
+                    model: { jsonPath: Joe.LIVE2D, scale: 1 },
+                    mobile: { show: false },
+                    display: { position: 'right', width: 160, height: 200, hOffset: 70, vOffset: 0 }
+                });
+            });
+        }
+    }
 
-	/* 计算页面滚动多少 */
-	{
-		const calcProgress = () => {
-			let scrollTop = $(window).scrollTop()
-			let documentHeight = $(document).height()
-			let windowHeight = $(window).height()
-			let progress = parseInt((scrollTop / (documentHeight - windowHeight)) * 100)
-			if (progress <= 0) progress = 0
-			if (progress >= 100) progress = 100
-			$('.joe_header__below-progress').css('width', progress + '%')
-		}
-		calcProgress()
-		$(window).on('scroll', () => calcProgress())
-	}
+    /* 计算页面滚动多少 */
+    {
+        const calcProgress = () => {
+            let scrollTop = $(window).scrollTop();
+            let documentHeight = $(document).height();
+            let windowHeight = $(window).height();
+            let progress = parseInt((scrollTop / (documentHeight - windowHeight)) * 100);
+            if (progress <= 0) progress = 0;
+            if (progress >= 100) progress = 100;
+            $('.joe_header__below-progress').css('width', progress + '%');
+        };
+        calcProgress();
+        $(window).on('scroll', () => calcProgress());
+    }
 
-	/* 判断页面上是否有侧边栏 */
-	{
-		const getAside = () => {
-			if ($('.joe_aside').length === 0) {
-				$('body').addClass('noaside')
-			} else {
-				$('body').removeClass('noaside')
-			}
-		}
-		getAside()
-		$(window).on('resize', () => getAside())
-	}
+    /* 判断页面上是否有侧边栏 */
+    {
+        const getAside = () => {
+            if ($('.joe_aside').length === 0) {
+                $('body').addClass('noaside');
+            } else {
+                $('body').removeClass('noaside');
+            }
+        };
+        getAside();
+        $(window).on('resize', () => getAside());
+    }
 
-	/* 评论框点击切换画图模式和文本模式 */
-	{
-		$('.joe_comment__respond-type .item').on('click', function () {
-			$(this).addClass('active').siblings().removeClass('active')
-			if ($(this).attr('data-type') === 'draw') {
-				$('.joe_comment__respond-form .body .draw').show().siblings().hide()
-				$('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width())
-				/* 设置表单格式为画图模式 */
-				$('.joe_comment__respond-form').attr('data-type', 'draw')
-			} else {
-				$('.joe_comment__respond-form .body .text').show().siblings().hide()
-				/* 设置表单格式为文字模式 */
-				$('.joe_comment__respond-form').attr('data-type', 'text')
-			}
-		})
-	}
+    /* 评论框点击切换画图模式和文本模式 */
+    {
+        $('.joe_comment__respond-type .item').on('click', function () {
+            $(this).addClass('active').siblings().removeClass('active');
+            if ($(this).attr('data-type') === 'draw') {
+                $('.joe_comment__respond-form .body .draw').show().siblings().hide();
+                $('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width());
+                /* 设置表单格式为画图模式 */
+                $('.joe_comment__respond-form').attr('data-type', 'draw');
+            } else {
+                $('.joe_comment__respond-form .body .text').show().siblings().hide();
+                /* 设置表单格式为文字模式 */
+                $('.joe_comment__respond-form').attr('data-type', 'text');
+            }
+        });
+    }
 
-	/* 激活画图功能 */
-	{
-		if ($('#joe_comment_draw').length !== 0) {
-			/* 激活画板 */
-			window.sketchpad = new Sketchpad({ element: '#joe_comment_draw', height: 300, penSize: 5, color: '303133' })
-			/* 撤销上一步 */
-			$('.joe_comment__respond-form .body .draw .icon-undo').on('click', () => window.sketchpad.undo())
-			/* 动画预览 */
-			$('.joe_comment__respond-form .body .draw .icon-animate').on('click', () => window.sketchpad.animate(10))
-			/* 更改画板的线宽 */
-			$('.joe_comment__respond-form .body .draw .line li').on('click', function () {
-				window.sketchpad.penSize = $(this).attr('data-line')
-				$(this).addClass('active').siblings().removeClass('active')
-			})
-			/* 更改画板的颜色 */
-			$('.joe_comment__respond-form .body .draw .color li').on('click', function () {
-				window.sketchpad.color = $(this).attr('data-color')
-				$(this).addClass('active').siblings().removeClass('active')
-			})
-		}
-	}
+    /* 激活画图功能 */
+    {
+        if ($('#joe_comment_draw').length !== 0) {
+            /* 激活画板 */
+            window.sketchpad = new Sketchpad({ element: '#joe_comment_draw', height: 300, penSize: 5, color: '303133' });
+            /* 撤销上一步 */
+            $('.joe_comment__respond-form .body .draw .icon-undo').on('click', () => window.sketchpad.undo());
+            /* 动画预览 */
+            $('.joe_comment__respond-form .body .draw .icon-animate').on('click', () => window.sketchpad.animate(10));
+            /* 更改画板的线宽 */
+            $('.joe_comment__respond-form .body .draw .line li').on('click', function () {
+                window.sketchpad.penSize = $(this).attr('data-line');
+                $(this).addClass('active').siblings().removeClass('active');
+            });
+            /* 更改画板的颜色 */
+            $('.joe_comment__respond-form .body .draw .color li').on('click', function () {
+                window.sketchpad.color = $(this).attr('data-color');
+                $(this).addClass('active').siblings().removeClass('active');
+            });
+        }
+    }
 
-	/* 重写评论功能 */
-	{
-		const respond = $('.joe_comment__respond')
-		/* 重写回复功能 */
-		$('.joe_comment__reply').on('click', function () {
-			/* 父级ID */
-			const coid = $(this).attr('data-coid')
-			/* 当前的项 */
-			const item = $('#' + $(this).attr('data-id'))
-			/* 添加自定义属性表示父级ID */
-			respond.find('.joe_comment__respond-form').attr('data-coid', coid)
-			item.append(respond)
-			$(".joe_comment__respond-type .item[data-type='text']").click()
-			$('.joe_comment__cancle').show()
-			window.scrollTo({
-				top: item.offset().top - $('.joe_header').height() - 15,
-				behavior: 'smooth'
-			})
-		})
-		/* 重写取消回复功能 */
-		$('.joe_comment__cancle').on('click', function () {
-			/* 移除自定义属性父级ID */
-			respond.find('.joe_comment__respond-form').removeAttr('data-coid')
-			$('.joe_comment__cancle').hide()
-			$('.joe_comment__title').after(respond)
-			$(".joe_comment__respond-type .item[data-type='text']").click()
-			window.scrollTo({
-				top: $('.joe_comment').offset().top - $('.joe_header').height() - 15,
-				behavior: 'smooth'
-			})
-		})
-	}
+    /* 重写评论功能 */
+    {
+        const respond = $('.joe_comment__respond');
+        /* 重写回复功能 */
+        $('.joe_comment__reply').on('click', function () {
+            /* 父级ID */
+            const coid = $(this).attr('data-coid');
+            /* 当前的项 */
+            const item = $('#' + $(this).attr('data-id'));
+            /* 添加自定义属性表示父级ID */
+            respond.find('.joe_comment__respond-form').attr('data-coid', coid);
+            item.append(respond);
+            $(".joe_comment__respond-type .item[data-type='text']").click();
+            $('.joe_comment__cancle').show();
+            window.scrollTo({
+                top: item.offset().top - $('.joe_header').height() - 15,
+                behavior: 'smooth'
+            });
+        });
+        /* 重写取消回复功能 */
+        $('.joe_comment__cancle').on('click', function () {
+            /* 移除自定义属性父级ID */
+            respond.find('.joe_comment__respond-form').removeAttr('data-coid');
+            $('.joe_comment__cancle').hide();
+            $('.joe_comment__title').after(respond);
+            $(".joe_comment__respond-type .item[data-type='text']").click();
+            window.scrollTo({
+                top: $('.joe_comment').offset().top - $('.joe_header').height() - 15,
+                behavior: 'smooth'
+            });
+        });
+    }
 
-	/* 激活评论提交 */
-	{
-		let isSubmit = false
-		$('.joe_comment__respond-form').on('submit', function (e) {
-			e.preventDefault()
-			const url = $('.joe_comment__respond-form').attr('action')
-			const type = $('.joe_comment__respond-form').attr('data-type')
-			const parent = $('.joe_comment__respond-form').attr('data-coid')
-			const author = $(".joe_comment__respond-form .head input[name='author']").val()
-			const mail = $(".joe_comment__respond-form .head input[name='mail']").val()
-			let text = $(".joe_comment__respond-form .body textarea[name='text']").val()
-			if (author.trim() === '') return Qmsg.info('请输入昵称！')
-			if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return Qmsg.info('请输入正确的邮箱！')
-			if (type === 'text' && text.trim() === '') return Qmsg.info('请输入评论内容！')
-			if (type === 'draw') {
-				const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1)
-				text = '{!{' + txt + '}!} '
-			}
-			if (isSubmit) return
-			isSubmit = true
-			$.ajax({
-				url,
-				type: 'POST',
-				data: { author, mail, text, parent },
-				success(res) {
-					let arr = [],
-						str = ''
-					arr = $(res).contents()
-					Array.from(arr).forEach(_ => {
-						if (_.parentNode.className === 'container') str = _
-					})
-					if (!/Joe/.test(res)) {
-						Qmsg.warning(str.textContent.trim() || '')
-						isSubmit = false
-					} else {
-						window.location.href = changeURLArg(location.href, 'scroll', 'joe_comment')
-					}
-				}
-			})
-		})
-	}
+    /* 激活评论提交 */
+    {
+        let isSubmit = false;
+        $('.joe_comment__respond-form').on('submit', function (e) {
+            e.preventDefault();
+            const url = $('.joe_comment__respond-form').attr('action');
+            const type = $('.joe_comment__respond-form').attr('data-type');
+            const parent = $('.joe_comment__respond-form').attr('data-coid');
+            const author = $(".joe_comment__respond-form .head input[name='author']").val();
+            const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
+            let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
+            if (author.trim() === '') return Qmsg.info('请输入昵称！');
+            if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return Qmsg.info('请输入正确的邮箱！');
+            if (type === 'text' && text.trim() === '') return Qmsg.info('请输入评论内容！');
+            if (type === 'draw') {
+                const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
+                text = '{!{' + txt + '}!} ';
+            }
+            if (isSubmit) return;
+            isSubmit = true;
+            $.ajax({
+                url,
+                type: 'POST',
+                data: { author, mail, text, parent },
+                success(res) {
+                    let arr = [],
+                        str = '';
+                    arr = $(res).contents();
+                    Array.from(arr).forEach(_ => {
+                        if (_.parentNode.className === 'container') str = _;
+                    });
+                    if (!/Joe/.test(res)) {
+                        Qmsg.warning(str.textContent.trim() || '');
+                        isSubmit = false;
+                    } else {
+                        window.location.href = changeURLArg(location.href, 'scroll', 'joe_comment');
+                    }
+                }
+            });
+        });
+    }
 
-	/* 切换标签显示不同的标题 */
-	{
-		if (Joe.DOCUMENT_TITLE) {
-			const TITLE = document.title
-			document.addEventListener('visibilitychange', () => {
-				if (document.visibilityState === 'hidden') {
-					document.title = Joe.DOCUMENT_TITLE
-				} else {
-					document.title = TITLE
-				}
-			})
-		}
-	}
+    /* 切换标签显示不同的标题 */
+    {
+        if (Joe.DOCUMENT_TITLE) {
+            const TITLE = document.title;
+            document.addEventListener('visibilitychange', () => {
+                if (document.visibilityState === 'hidden') {
+                    document.title = Joe.DOCUMENT_TITLE;
+                } else {
+                    document.title = TITLE;
+                }
+            });
+        }
+    }
 
-	/* 小屏幕伸缩侧边栏 */
-	{
-		$('.joe_header__above-slideicon').on('click', function () {
-			/* 关闭搜索框 */
-			$('.joe_header__searchout').removeClass('active')
-			/* 处理开启关闭状态 */
-			if ($('.joe_header__slideout').hasClass('active')) {
-				$('body').css('overflow', '')
-				$('.joe_header__mask').removeClass('active slideout')
-				$('.joe_header__slideout').removeClass('active')
-			} else {
-				$('body').css('overflow', 'hidden')
-				$('.joe_header__mask').addClass('active slideout')
-				$('.joe_header__slideout').addClass('active')
-			}
-		})
-	}
+    /* 小屏幕伸缩侧边栏 */
+    {
+        $('.joe_header__above-slideicon').on('click', function () {
+            /* 关闭搜索框 */
+            $('.joe_header__searchout').removeClass('active');
+            /* 处理开启关闭状态 */
+            if ($('.joe_header__slideout').hasClass('active')) {
+                $('body').css('overflow', '');
+                $('.joe_header__mask').removeClass('active slideout');
+                $('.joe_header__slideout').removeClass('active');
+            } else {
+                $('body').css('overflow', 'hidden');
+                $('.joe_header__mask').addClass('active slideout');
+                $('.joe_header__slideout').addClass('active');
+            }
+        });
+    }
 
-	/* 小屏幕搜索框 */
-	{
-		$('.joe_header__above-searchicon').on('click', function () {
-			/* 关闭侧边栏 */
-			$('.joe_header__slideout').removeClass('active')
-			/* 处理开启关闭状态 */
-			if ($('.joe_header__searchout').hasClass('active')) {
-				$('body').css('overflow', '')
-				$('.joe_header__mask').removeClass('active slideout')
-				$('.joe_header__searchout').removeClass('active')
-			} else {
-				$('body').css('overflow', 'hidden')
-				$('.joe_header__mask').addClass('active')
-				$('.joe_header__searchout').addClass('active')
-			}
-		})
-	}
+    /* 小屏幕搜索框 */
+    {
+        $('.joe_header__above-searchicon').on('click', function () {
+            /* 关闭侧边栏 */
+            $('.joe_header__slideout').removeClass('active');
+            /* 处理开启关闭状态 */
+            if ($('.joe_header__searchout').hasClass('active')) {
+                $('body').css('overflow', '');
+                $('.joe_header__mask').removeClass('active slideout');
+                $('.joe_header__searchout').removeClass('active');
+            } else {
+                $('body').css('overflow', 'hidden');
+                $('.joe_header__mask').addClass('active');
+                $('.joe_header__searchout').addClass('active');
+            }
+        });
+    }
 
-	/* 点击遮罩层关闭 */
-	{
-		$('.joe_header__mask').on('click', function () {
-			$('body').css('overflow', '')
-			$('.joe_header__mask').removeClass('active slideout')
-			$('.joe_header__searchout').removeClass('active')
-			$('.joe_header__slideout').removeClass('active')
-		})
-	}
+    /* 点击遮罩层关闭 */
+    {
+        $('.joe_header__mask').on('click', function () {
+            $('body').css('overflow', '');
+            $('.joe_header__mask').removeClass('active slideout');
+            $('.joe_header__searchout').removeClass('active');
+            $('.joe_header__slideout').removeClass('active');
+        });
+    }
 
-	/* 移动端侧边栏菜单手风琴 */
-	{
-		$('.joe_header__slideout-menu .current').parents('.panel-body').show().siblings('.panel').addClass('in')
-		$('.joe_header__slideout-menu .panel').on('click', function () {
-			const panelBox = $(this).parent().parent()
-			/* 清除全部内容 */
-			panelBox.find('.panel').not($(this)).removeClass('in')
-			panelBox.find('.panel-body').not($(this).siblings('.panel-body')).stop().hide('fast')
-			/* 激活当前的内容 */
-			$(this).toggleClass('in').siblings('.panel-body').stop().toggle('fast')
-		})
-	}
+    /* 移动端侧边栏菜单手风琴 */
+    {
+        $('.joe_header__slideout-menu .current').parents('.panel-body').show().siblings('.panel').addClass('in');
+        $('.joe_header__slideout-menu .panel').on('click', function () {
+            const panelBox = $(this).parent().parent();
+            /* 清除全部内容 */
+            panelBox.find('.panel').not($(this)).removeClass('in');
+            panelBox.find('.panel-body').not($(this).siblings('.panel-body')).stop().hide('fast');
+            /* 激活当前的内容 */
+            $(this).toggleClass('in').siblings('.panel-body').stop().toggle('fast');
+        });
+    }
 
-	/* 初始化网站运行时间 */
-	{
-		const getRunTime = () => {
-			const birthDay = new Date(Joe.BIRTHDAY)
-			const today = +new Date()
-			const timePast = today - birthDay.getTime()
-			let day = timePast / (1000 * 24 * 60 * 60)
-			let dayPast = Math.floor(day)
-			let hour = (day - dayPast) * 24
-			let hourPast = Math.floor(hour)
-			let minute = (hour - hourPast) * 60
-			let minutePast = Math.floor(minute)
-			let second = (minute - minutePast) * 60
-			let secondPast = Math.floor(second)
-			day = String(dayPast).padStart(2, 0)
-			hour = String(hourPast).padStart(2, 0)
-			minute = String(minutePast).padStart(2, 0)
-			second = String(secondPast).padStart(2, 0)
-			$('.joe_run__day').html(day)
-			$('.joe_run__hour').html(hour)
-			$('.joe_run__minute').html(minute)
-			$('.joe_run__second').html(second)
-		}
-		if (Joe.BIRTHDAY && /(\d{4})\/(\d{1,2})\/(\d{1,2}) (\d{1,2})\:(\d{1,2})\:(\d{1,2})/.test(Joe.BIRTHDAY)) {
-			getRunTime()
-			setInterval(getRunTime, 1000)
-		}
-	}
-})
+    /* 初始化网站运行时间 */
+    {
+        const getRunTime = () => {
+            const birthDay = new Date(Joe.BIRTHDAY);
+            const today = +new Date();
+            const timePast = today - birthDay.getTime();
+            let day = timePast / (1000 * 24 * 60 * 60);
+            let dayPast = Math.floor(day);
+            let hour = (day - dayPast) * 24;
+            let hourPast = Math.floor(hour);
+            let minute = (hour - hourPast) * 60;
+            let minutePast = Math.floor(minute);
+            let second = (minute - minutePast) * 60;
+            let secondPast = Math.floor(second);
+            day = String(dayPast).padStart(2, 0);
+            hour = String(hourPast).padStart(2, 0);
+            minute = String(minutePast).padStart(2, 0);
+            second = String(secondPast).padStart(2, 0);
+            $('.joe_run__day').html(day);
+            $('.joe_run__hour').html(hour);
+            $('.joe_run__minute').html(minute);
+            $('.joe_run__second').html(second);
+        };
+        if (Joe.BIRTHDAY && /(\d{4})\/(\d{1,2})\/(\d{1,2}) (\d{1,2})\:(\d{1,2})\:(\d{1,2})/.test(Joe.BIRTHDAY)) {
+            getRunTime();
+            setInterval(getRunTime, 1000);
+        }
+    }
+
+    /* 初始化表情功能 */
+    {
+        if ($('.joe_owo__contain').length > 0 && $('.joe_owo__target').length > 0) {
+            new JoeOwO();
+        }
+    }
+});
diff --git a/assets/js/joe.owo.js b/assets/js/joe.owo.js
new file mode 100644
index 0000000..68a9f7a
--- /dev/null
+++ b/assets/js/joe.owo.js
@@ -0,0 +1,84 @@
+class JoeOwO {
+    constructor(options) {
+        const defaultOption = {
+            contain: '.joe_owo__contain',
+            target: '.joe_owo__target',
+            seat: 'OωO',
+            api: '/usr/themes/Joe/assets/json/joe.owo.json'
+        };
+        this.options = Object.assign(defaultOption, options);
+        $.ajax({
+            url: this.options.api,
+            type: 'get',
+            dataType: 'json',
+            success: res => this.initHtml(res)
+        });
+    }
+    /* 初始化 */
+    initHtml(res) {
+        let barStr = '';
+        let scrollStr = '';
+        for (let key in res) {
+            barStr += `<div class="item" data-index="${res[key].index}">${key}</div>`;
+            scrollStr += `
+                <ul class="scroll" data-index="${res[key].index}">
+                    ${res[key].container.map(_ => `<li class="item" data-text="${_.data}">${_.icon}</li>`).join('')} 
+                </ul>
+            `;
+        }
+        $(this.options.contain).html(`
+            <div class="seat">${this.options.seat}</div>
+            <div class="box">
+                ${scrollStr}
+                <div class="bar">${barStr}</div>
+            </div>
+        `);
+
+        this.initEvent();
+    }
+    initEvent() {
+        /* 容器 */
+        const contain = this.options.contain;
+        const height = $(contain).height();
+
+        /* 点击页面关闭 */
+        $(document).on('click', function () {
+            $(contain + ' .box').removeClass('show');
+        });
+
+        /* 点击占位符，显示表情弹窗 */
+        const seat = contain + ' .seat';
+        $(seat).on('click', function (e) {
+            e.stopPropagation();
+            $(this).siblings('.box').css('top', height).toggleClass('show');
+        });
+
+        /* 点击tab栏，切换表情类型 */
+        const barItem = contain + ' .box .bar .item';
+        $(barItem).on('click', function (e) {
+            e.stopPropagation();
+            $(this).addClass('active').siblings().removeClass('active');
+            const scrollIndx = contain + ' .box .scroll[data-index="' + $(this).attr('data-index') + '"]';
+            $(scrollIndx).show().siblings('.scroll').hide();
+        });
+
+        /* 点击表情，向文本框插入内容 */
+        const items = contain + ' .scroll .item';
+        const textarea = $(this.options.target)[0];
+        $(items).on('click', function () {
+            const text = $(this).attr('data-text');
+            const cursorPos = textarea.selectionEnd;
+            const areaValue = textarea.value;
+            textarea.value = areaValue.slice(0, cursorPos) + text + areaValue.slice(cursorPos);
+            textarea.focus();
+        });
+
+        /* 默认激活第一个 */
+        $(barItem).first().click();
+    }
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = JoeOwO;
+} else {
+    window.JoeOwO = JoeOwO;
+}
diff --git a/assets/json/joe.owo.json b/assets/json/joe.owo.json
new file mode 100644
index 0000000..56ba01c
--- /dev/null
+++ b/assets/json/joe.owo.json
@@ -0,0 +1,258 @@
+{
+    "泡泡": {
+        "type": "image",
+        "index": "0",
+        "container": [
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E591B5E591B5_2x.png\">", "data": "::(呵呵)", "text": "呵呵" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E59388E59388_2x.png\">", "data": "::(哈哈)", "text": "哈哈" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E59090E8888C_2x.png\">", "data": "::(吐舌)", "text": "吐舌" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5A4AAE5BC80E5BF83_2x.png\">", "data": "::(太开心)", "text": "太开心" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E7AC91E79CBC_2x.png\">", "data": "::(笑眼)", "text": "笑眼" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E88AB1E5BF83_2x.png\">", "data": "::(花心)", "text": "花心" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5B08FE4B996_2x.png\">", "data": "::(小乖)", "text": "小乖" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E4B996_2x.png\">", "data": "::(乖)", "text": "乖" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E68D82E598B4E7AC91_2x.png\">", "data": "::(捂嘴笑)", "text": "捂嘴笑" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6BB91E7A8BD_2x.png\">", "data": "::(滑稽)", "text": "滑稽" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E4BDA0E68782E79A84_2x.png\">", "data": "::(你懂的)", "text": "你懂的" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E4B88DE9AB98E585B4_2x.png\">", "data": "::(不高兴)", "text": "不高兴" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E68092_2x.png\">", "data": "::(怒)", "text": "怒" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6B197_2x.png\">", "data": "::(汗)", "text": "汗" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E9BB91E7BABF_2x.png\">", "data": "::(黑线)", "text": "黑线" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6B3AA_2x.png\">", "data": "::(泪)", "text": "泪" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E79C9FE6A392_2x.png\">", "data": "::(真棒)", "text": "真棒" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E596B7_2x.png\">", "data": "::(喷)", "text": "喷" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6838AE593AD_2x.png\">", "data": "::(惊哭)", "text": "惊哭" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E998B4E999A9_2x.png\">", "data": "::(阴险)", "text": "阴险" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E98499E8A786_2x.png\">", "data": "::(鄙视)", "text": "鄙视" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E985B7_2x.png\">", "data": "::(酷)", "text": "酷" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5958A_2x.png\">", "data": "::(啊)", "text": "啊" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E78B82E6B197_2x.png\">", "data": "::(狂汗)", "text": "狂汗" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/what_2x.png\">", "data": "::(what)", "text": "what" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E79691E997AE_2x.png\">", "data": "::(疑问)", "text": "疑问" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E985B8E788BD_2x.png\">", "data": "::(酸爽)", "text": "酸爽" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E59180E592A9E788B9_2x.png\">", "data": "::(呀咩爹)", "text": "呀咩爹" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5A794E5B188_2x.png\">", "data": "::(委屈)", "text": "委屈" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6838AE8AEB6_2x.png\">", "data": "::(惊讶)", "text": "惊讶" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E79DA1E8A789_2x.png\">", "data": "::(睡觉)", "text": "睡觉" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E7AC91E5B0BF_2x.png\">", "data": "::(笑尿)", "text": "笑尿" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E68C96E9BCBB_2x.png\">", "data": "::(挖鼻)", "text": "挖鼻" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E59090_2x.png\">", "data": "::(吐)", "text": "吐" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E78A80E588A9_2x.png\">", "data": "::(犀利)", "text": "犀利" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5B08FE7BAA2E884B8_2x.png\">", "data": "::(小红脸)", "text": "小红脸" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E68792E5BE97E79086_2x.png\">", "data": "::(懒得理)", "text": "懒得理" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E58B89E5BCBA_2x.png\">", "data": "::(勉强)", "text": "勉强" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E788B1E5BF83_2x.png\">", "data": "::(爱心)", "text": "爱心" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5BF83E7A28E_2x.png\">", "data": "::(心碎)", "text": "心碎" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E78EABE791B0_2x.png\">", "data": "::(玫瑰)", "text": "玫瑰" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E7A4BCE789A9_2x.png\">", "data": "::(礼物)", "text": "礼物" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5BDA9E899B9_2x.png\">", "data": "::(彩虹)", "text": "彩虹" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5A4AAE998B3_2x.png\">", "data": "::(太阳)", "text": "太阳" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6989FE6989FE69C88E4BAAE_2x.png\">", "data": "::(星星月亮)", "text": "星星月亮" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E992B1E5B881_2x.png\">", "data": "::(钱币)", "text": "钱币" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E88CB6E69DAF_2x.png\">", "data": "::(茶杯)", "text": "茶杯" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E89B8BE7B395_2x.png\">", "data": "::(蛋糕)", "text": "蛋糕" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5A4A7E68B87E68C87_2x.png\">", "data": "::(大拇指)", "text": "大拇指" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E8839CE588A9_2x.png\">", "data": "::(胜利)", "text": "胜利" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/haha_2x.png\">", "data": "::(haha)", "text": "haha" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/OK_2x.png\">", "data": "::(OK)", "text": "OK" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6B299E58F91_2x.png\">", "data": "::(沙发)", "text": "沙发" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E6898BE7BAB8_2x.png\">", "data": "::(手纸)", "text": "手纸" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E9A699E89589_2x.png\">", "data": "::(香蕉)", "text": "香蕉" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E4BEBFE4BEBF_2x.png\">", "data": "::(便便)", "text": "便便" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E88DAFE4B8B8_2x.png\">", "data": "::(药丸)", "text": "药丸" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E7BAA2E9A286E5B7BE_2x.png\">", "data": "::(红领巾)", "text": "红领巾" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E89CA1E7839B_2x.png\">", "data": "::(蜡烛)", "text": "蜡烛" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E99FB3E4B990_2x.png\">", "data": "::(音乐)", "text": "音乐" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E781AFE6B3A1_2x.png\">", "data": "::(灯泡)", "text": "灯泡" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5BC80E5BF83_2x.png\">", "data": "::(开心)", "text": "开心" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E992B1_2x.png\">", "data": "::(钱)", "text": "钱" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E592A6_2x.png\">", "data": "::(咦)", "text": "咦" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E591BC_2x.png\">", "data": "::(呼)", "text": "呼" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E586B7_2x.png\">", "data": "::(冷)", "text": "冷" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E7949FE6B094_2x.png\">", "data": "::(生气)", "text": "生气" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/paopao/E5BCB1_2x.png\">", "data": "::(弱)", "text": "弱" }
+        ]
+    },
+    "阿鲁": {
+        "type": "image",
+        "index": "1",
+        "container": [
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E9AB98E585B4_2x.png\">", "data": ":@(高兴)", "text": "高兴" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5B08FE68092_2x.png\">", "data": ":@(小怒)", "text": "小怒" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E884B8E7BAA2_2x.png\">", "data": ":@(脸红)", "text": "脸红" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E58685E4BCA4_2x.png\">", "data": ":@(内伤)", "text": "内伤" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E8A385E5A4A7E6ACBE_2x.png\">", "data": ":@(装大款)", "text": "装大款" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E8B59EE4B880E4B8AA_2x.png\">", "data": ":@(赞一个)", "text": "赞一个" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5AEB3E7BE9E_2x.png\">", "data": ":@(害羞)", "text": "害羞" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E6B197_2x.png\">", "data": ":@(汗)", "text": "汗" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E59090E8A180E58092E59CB0_2x.png\">", "data": ":@(吐血倒地)", "text": "吐血倒地" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E6B7B1E6809D_2x.png\">", "data": ":@(深思)", "text": "深思" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B88DE9AB98E585B4_2x.png\">", "data": ":@(不高兴)", "text": "不高兴" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E697A0E8AFAD_2x.png\">", "data": ":@(无语)", "text": "无语" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4BAB2E4BAB2_2x.png\">", "data": ":@(亲亲)", "text": "亲亲" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E58FA3E6B0B4_2x.png\">", "data": ":@(口水)", "text": "口水" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5B0B4E5B0AC_2x.png\">", "data": ":@(尴尬)", "text": "尴尬" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B8ADE68C87_2x.png\">", "data": ":@(中指)", "text": "中指" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E683B3E4B880E683B3_2x.png\">", "data": ":@(想一想)", "text": "想一想" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E593ADE6B3A3_2x.png\">", "data": ":@(哭泣)", "text": "哭泣" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4BEBFE4BEBF_2x.png\">", "data": ":@(便便)", "text": "便便" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E78CAEE88AB1_2x.png\">", "data": ":@(献花)", "text": "献花" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E79AB1E79C89_2x.png\">", "data": ":@(皱眉)", "text": "皱眉" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E582BBE7AC91_2x.png\">", "data": ":@(傻笑)", "text": "傻笑" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E78B82E6B197_2x.png\">", "data": ":@(狂汗)", "text": "狂汗" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E59090_2x.png\">", "data": ":@(吐)", "text": "吐" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E596B7E6B0B4_2x.png\">", "data": ":@(喷水)", "text": "喷水" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E79C8BE4B88DE8A781_2x.png\">", "data": ":@(看不见)", "text": "看不见" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E9BC93E68E8C_2x.png\">", "data": ":@(鼓掌)", "text": "鼓掌" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E998B4E69A97_2x.png\">", "data": ":@(阴暗)", "text": "阴暗" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E995BFE88D89_2x.png\">", "data": ":@(长草)", "text": "长草" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E78CAEE9BB84E7939C_2x.png\">", "data": ":@(献黄瓜)", "text": "献黄瓜" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E982AAE681B6_2x.png\">", "data": ":@(邪恶)", "text": "邪恶" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E69C9FE5BE85_2x.png\">", "data": ":@(期待)", "text": "期待" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5BE97E6848F_2x.png\">", "data": ":@(得意)", "text": "得意" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E59090E8888C_2x.png\">", "data": ":@(吐舌)", "text": "吐舌" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E596B7E8A180_2x.png\">", "data": ":@(喷血)", "text": "喷血" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E697A0E68980E8B093_2x.png\">", "data": ":@(无所谓)", "text": "无所谓" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E8A782E5AF9F_2x.png\">", "data": ":@(观察)", "text": "观察" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E69A97E59CB0E8A782E5AF9F_2x.png\">", "data": ":@(暗地观察)", "text": "暗地观察" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E882BFE58C85_2x.png\">", "data": ":@(肿包)", "text": "肿包" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B8ADE69EAA_2x.png\">", "data": ":@(中枪)", "text": "中枪" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5A4A7E59BA7_2x.png\">", "data": ":@(大囧)", "text": "大囧" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E591B2E78999_2x.png\">", "data": ":@(呲牙)", "text": "呲牙" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E68AA0E9BCBB_2x.png\">", "data": ":@(抠鼻)", "text": "抠鼻" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B88DE8AFB4E8AF9D_2x.png\">", "data": ":@(不说话)", "text": "不说话" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E592BDE6B094_2x.png\">", "data": ":@(咽气)", "text": "咽气" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E6ACA2E591BC_2x.png\">", "data": ":@(欢呼)", "text": "欢呼" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E99481E79C89_2x.png\">", "data": ":@(锁眉)", "text": "锁眉" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E89CA1E7839B_2x.png\">", "data": ":@(蜡烛)", "text": "蜡烛" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E59D90E7AD89_2x.png\">", "data": ":@(坐等)", "text": "坐等" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E587BBE68E8C_2x.png\">", "data": ":@(击掌)", "text": "击掌" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E6838AE5969C_2x.png\">", "data": ":@(惊喜)", "text": "惊喜" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5969CE69E81E8808CE6B3A3_2x.png\">", "data": ":@(喜极而泣)", "text": "喜极而泣" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E68ABDE7839F_2x.png\">", "data": ":@(抽烟)", "text": "抽烟" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B88DE587BAE68980E69699_2x.png\">", "data": ":@(不出所料)", "text": "不出所料" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E684A4E68092_2x.png\">", "data": ":@(愤怒)", "text": "愤怒" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E697A0E5A588_2x.png\">", "data": ":@(无奈)", "text": "无奈" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E9BB91E7BABF_2x.png\">", "data": ":@(黑线)", "text": "黑线" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E68A95E9998D_2x.png\">", "data": ":@(投降)", "text": "投降" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E79C8BE783ADE997B9_2x.png\">", "data": ":@(看热闹)", "text": "看热闹" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E68987E880B3E58589_2x.png\">", "data": ":@(扇耳光)", "text": "扇耳光" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E5B08FE79CBCE79D9B_2x.png\">", "data": ":@(小眼睛)", "text": "小眼睛" },
+            { "icon": "<img alt=\"表情\" src=\"/usr/themes/Joe/assets/owo/aru/E4B8ADE58880_2x.png\">", "data": ":@(中刀)", "text": "中刀" }
+        ]
+    },
+    "颜文字": {
+        "type": "emoticon",
+        "index": "2",
+        "container": [
+            {
+                "icon": "|´・ω・)ノ",
+                "data": "|´・ω・)ノ"
+            },
+            {
+                "icon": "ヾ(≧∇≦*)ゝ",
+                "data": "ヾ(≧∇≦*)ゝ"
+            },
+            {
+                "icon": "(☆ω☆)",
+                "data": "(☆ω☆)"
+            },
+            {
+                "icon": "（╯‵□′）╯︵┴─┴",
+                "data": "（╯‵□′）╯︵┴─┴"
+            },
+            {
+                "icon": "￣﹃￣",
+                "data": "￣﹃￣"
+            },
+            {
+                "icon": "(/ω＼)",
+                "data": "(/ω＼)"
+            },
+            {
+                "icon": "∠( ᐛ 」∠)＿",
+                "data": "∠( ᐛ 」∠)＿"
+            },
+            {
+                "icon": "(๑•̀ㅁ•́ฅ)",
+                "data": "(๑•̀ㅁ•́ฅ)"
+            },
+            {
+                "icon": "→_→",
+                "data": "→_→"
+            },
+            {
+                "icon": "୧(๑•̀⌄•́๑)૭",
+                "data": "୧(๑•̀⌄•́๑)૭"
+            },
+            {
+                "icon": "٩(ˊᗜˋ*)و",
+                "data": "٩(ˊᗜˋ*)و"
+            },
+            {
+                "icon": "(ノ°ο°)ノ",
+                "data": "(ノ°ο°)ノ"
+            },
+            {
+                "icon": "(´இ皿இ｀)",
+                "data": "(´இ皿இ｀)"
+            },
+            {
+                "icon": "⌇●﹏●⌇",
+                "data": "⌇●﹏●⌇"
+            },
+            {
+                "icon": "(ฅ´ω`ฅ)",
+                "data": "(ฅ´ω`ฅ)"
+            },
+            {
+                "icon": "(╯°A°)╯︵○○○",
+                "data": "(╯°A°)╯︵○○○"
+            },
+            {
+                "icon": "φ(￣∇￣o)",
+                "data": "φ(￣∇￣o)"
+            },
+            {
+                "icon": "ヾ(´･ ･｀｡)ノ\"",
+                "data": "ヾ(´･ ･｀｡)ノ\""
+            },
+            {
+                "icon": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃",
+                "data": "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃"
+            },
+            {
+                "icon": "(ó﹏ò｡)",
+                "data": "(ó﹏ò｡)"
+            },
+            {
+                "icon": "Σ(っ °Д °;)っ",
+                "data": "Σ(っ °Д °;)っ"
+            },
+            {
+                "icon": "( ,,´･ω･)ﾉ\"(´っω･｀｡)",
+                "data": "( ,,´･ω･)ﾉ\"(´っω･｀｡)"
+            },
+            {
+                "icon": "╮(╯▽╰)╭ ",
+                "data": "╮(╯▽╰)╭ "
+            },
+            {
+                "icon": "o(*////▽////*)q ",
+                "data": "o(*////▽////*)q "
+            },
+            {
+                "icon": "＞﹏＜",
+                "data": "＞﹏＜"
+            },
+            {
+                "icon": "( ๑´•ω•) \"(ㆆᴗㆆ)",
+                "data": "( ๑´•ω•) \"(ㆆᴗㆆ)"
+            },
+            {
+                "icon": "(｡•ˇ‸ˇ•｡)",
+                "data": "(｡•ˇ‸ˇ•｡)"
+            }
+        ]
+    }
+}
diff --git a/core/factory.php b/core/factory.php
index 60dacea..eb95e74 100644
--- a/core/factory.php
+++ b/core/factory.php
@@ -9,9 +9,10 @@ class Editor
 {
     public static function edit()
     {
-        echo "<link rel='stylesheet' href='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.css' . "'>";
-        echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.extend.js' . "'></script>";
-        echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.js' . "'></script>";
+        echo "<link rel='stylesheet' href='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.css?v=666' . "'>";
+        echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.owo.js?v=666' . "'></script>";
+        echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.extend.js?v=666' . "'></script>";
+        echo "<script src='" . Helper::options()->themeUrl . '/typecho/editor/joe.editor.js?v=666' . "'></script>";
     }
 }
 
diff --git a/core/function.php b/core/function.php
index c75dcb6..1c4b85f 100644
--- a/core/function.php
+++ b/core/function.php
@@ -3,7 +3,7 @@
 /* 获取主题当前版本号 */
 function _getVersion()
 {
-    return "5.1.7";
+    return "5.1.9";
 };
 
 /* 判断是否是手机 */
diff --git a/functions.php b/functions.php
index 0af053e..d20bbf7 100644
--- a/functions.php
+++ b/functions.php
@@ -306,7 +306,7 @@ function themeConfig($form)
             'author' => '作者栏',
             'timelife' => '计时栏',
             'weather' => '天气栏（需先在下方填写KEY值）',
-            'hot' => '热门文章栏',
+            'hot' => '热门文章栏（首页时，热门文章和侧栏热门文章只会显示其中一个）',
             'ranking' => '排行榜栏',
             'newreply' => '最新回复栏'
         ),
diff --git a/public/aside.php b/public/aside.php
index d2da3ba..3540dd8 100644
--- a/public/aside.php
+++ b/public/aside.php
@@ -39,7 +39,7 @@
                 <div class="joe_aside__item-contain"></div>
             </section>
         <?php endif; ?>
-        <?php if (in_array('hot', $this->options->JAside)) : ?>
+        <?php if ($this->is('index') && $this->options->JIndex_Hot !== "on" || !$this->is('index') && in_array('hot', $this->options->JAside)) : ?>
             <section class="joe_aside__item hot">
                 <div class="joe_aside__item-title">
                     <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
diff --git a/public/comment.php b/public/comment.php
index 1528088..a65a572 100644
--- a/public/comment.php
+++ b/public/comment.php
@@ -30,7 +30,7 @@
                         </div>
                     </div>
                     <div class="body">
-                        <textarea class="text OwO-target" name="text" autocomplete="off" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>
+                        <textarea class="text joe_owo__target" name="text" autocomplete="off" placeholder="说点什么吧，点击右上方切换成画图试试？"></textarea>
                         <div class="draw" style="display: none;">
                             <ul class="line">
                                 <li data-line="3">细</li>
@@ -54,7 +54,7 @@
                         </div>
                     </div>
                     <div class="foot">
-                        <div class="OwO"></div>
+                        <div class="owo joe_owo__contain"></div>
                         <div class="submit">
                             <span class="cancle joe_comment__cancle">取消</span>
                             <button type="submit">发表评论</button>
diff --git a/public/include.php b/public/include.php
index 3e5c11b..36ae382 100644
--- a/public/include.php
+++ b/public/include.php
@@ -52,8 +52,8 @@
 <!-- 全局公用CSS（静态资源放在了CDN上，如果你的服务器带宽不够，请不要修改成本地，cdn采用jsdelivr放心不会失效） -->
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.mode.css'); ?>">
 <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.css'); ?>">
-<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css?v=3434'); ?>">
-<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.css?v=3434'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.css?v=666'); ?>">
+<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.css?v=666'); ?>">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/qmsg/qmsg.css" />
 <link rel="stylesheet" href="https://apip.weatherdt.com/standard/static/css/weather-standard.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
@@ -66,7 +66,8 @@
 <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/sketchpad/joe.sketchpad.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/qmsg/qmsg.js"></script>
-<script src="<?php $this->options->themeUrl('assets/js/joe.global.js?v=23123'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.owo.js'); ?>"></script>
+<script src="<?php $this->options->themeUrl('assets/js/joe.global.js?v=666'); ?>"></script>
 <!-- 异步加载的JS -->
 <script async src="https://apip.weatherdt.com/standard/static/js/weather-standard.js?v=2.0"></script>
 <script async src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/smooth/joe.smooth.js"></script>
diff --git a/typecho/config/joe.config.css b/typecho/config/joe.config.css
index ec7adfd..4d1774b 100644
--- a/typecho/config/joe.config.css
+++ b/typecho/config/joe.config.css
@@ -1 +1 @@
-.col-mb-12.col-tb-8.col-tb-offset-2{margin-left:0;width:100%}.joe_config{display:flex}.joe_config *{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}.joe_config li{list-style:none}.joe_config__aside{position:-webkit-sticky;position:sticky;top:15px;width:200px;background:#fff;padding:10px;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px}.joe_config__aside .logo{color:#303133;font-weight:500;font-size:24px;text-align:center;margin-bottom:10px;border-bottom:1px solid #ebeef5;padding-bottom:10px}.joe_config__aside .tabs{margin-bottom:10px}.joe_config__aside .tabs .item{border-radius:20px;text-align:center;height:40px;line-height:40px;color:#606266;cursor:pointer;transition:background 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_config__aside .tabs .item:hover{background:#f2f6fc}.joe_config__aside .tabs .item.active{color:#409eff;font-weight:500}.joe_config__aside .backup input{width:170px;height:40px;line-height:40px;margin-bottom:10px;color:#fff;font-size:14px;border-radius:20px;transition:opacity 0.35s;border:none;cursor:pointer}.joe_config__aside .backup input:hover{opacity:0.85}.joe_config__aside .backup input:nth-child(1){background:#5cb85c}.joe_config__aside .backup input:nth-child(2){background:#f0ad4e}.joe_config__aside .backup input:nth-child(3){margin-bottom:0;background:#d9534f}.joe_config>form{position:relative;display:none;background:#fff;min-width:0;flex:1;margin-left:15px;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px}.joe_config>form .typecho-option{position:-webkit-sticky;position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;margin:0;padding:15px;background:#fff;border-top:1px solid #ebebeb;border-radius:0 0 8px 8px}.joe_config>form .typecho-option button{width:170px;height:40px;background-color:#409eff;border-radius:20px}.joe_config>form .typecho-option button:hover{-webkit-animation:pulse 1s;animation:pulse 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_config>form .joe_content{display:none;padding:15px}.joe_config>form .joe_content li{border:1px solid #e9e9eb;padding:15px}.joe_config>form .joe_content li .typecho-label{display:block;border-left:4px solid #409eff;background:#ecf5ff;line-height:26px;margin-bottom:15px;padding:5px 15px;color:#409eff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0 4px 4px 0}.joe_config>form .joe_content li select{min-width:200px;height:34px;line-height:34px;border:1px solid #e9e9eb;color:#666;border-radius:4px;padding-left:5px}.joe_config>form .joe_content li .multiline{display:flex;align-items:center;color:#666}.joe_config>form .joe_content li .multiline input[type='checkbox']{margin-right:5px}.joe_config>form .joe_content li textarea,.joe_config>form .joe_content li input[type='text']{width:100%;padding:10px;color:#666;border:1px solid #e9e9eb;-webkit-appearance:none}.joe_config>form .joe_content li textarea{height:125px}.joe_config>form .joe_content li .description{background:#f8f8f8;color:#999;padding:10px 15px;margin-top:15px;line-height:26px;border-radius:4px;word-break:break-all}.joe_config__notice{display:none;margin-left:15px;background:#fff;padding:15px;flex:1;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px;line-height:28px;color:#606266}.joe_config__notice ol{padding:0 40px}.joe_config__notice ol li{list-style:decimal}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #409eff}}@keyframes pulse{0%{box-shadow:0 0 0 0 #409eff}}@media (max-width: 768px){.joe_config{display:block}.joe_config__aside{width:100%;margin-bottom:15px}.joe_config__aside .tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #ebeef5;padding-bottom:10px}.joe_config__aside .tabs .item{width:33.33333333%;height:36px;line-height:36px;border-radius:18px}.joe_config__aside .backup{display:flex;align-items:center;justify-content:space-between}.joe_config__aside .backup input{width:auto;flex:1;margin-bottom:0;height:36px;line-height:36px;border-radius:18px}.joe_config__aside .backup input:nth-child(2){margin:0 10px}.joe_config>form{margin-left:0}.joe_config>form .typecho-option{padding:10px 0}.joe_config>form .typecho-option button{width:150px;height:38px;border-radius:19px}.joe_config__notice{margin-left:0}}
+.col-mb-12.col-tb-8.col-tb-offset-2{margin-left:0;width:100%}.joe_config{display:flex}.joe_config *{margin:0;padding:0;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent}.joe_config li{list-style:none}.joe_config__aside{position:-webkit-sticky;position:sticky;top:15px;width:200px;background:#fff;padding:10px;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px}.joe_config__aside .logo{color:#303133;font-weight:500;font-size:24px;text-align:center;margin-bottom:10px;border-bottom:1px solid #ebeef5;padding-bottom:10px}.joe_config__aside .tabs{margin-bottom:10px}.joe_config__aside .tabs .item{border-radius:20px;text-align:center;height:40px;line-height:40px;color:#606266;cursor:pointer;transition:background 0.35s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_config__aside .tabs .item:hover{background:#f2f6fc}.joe_config__aside .tabs .item.active{color:#409eff;font-weight:500}.joe_config__aside .backup input{width:170px;height:40px;line-height:40px;margin-bottom:10px;color:#fff;font-size:14px;border-radius:20px;transition:opacity 0.35s;border:none;cursor:pointer}.joe_config__aside .backup input:hover{opacity:0.85}.joe_config__aside .backup input:nth-child(1){background:#5cb85c}.joe_config__aside .backup input:nth-child(2){background:#f0ad4e}.joe_config__aside .backup input:nth-child(3){margin-bottom:0;background:#d9534f}.joe_config>form{position:relative;display:none;background:#fff;min-width:0;flex:1;margin-left:15px;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px}.joe_config>form .typecho-option{position:-webkit-sticky;position:sticky;bottom:0;display:flex;align-items:center;justify-content:center;margin:0;padding:15px;background:#fff;border-top:1px solid #ebebeb;border-radius:0 0 8px 8px}.joe_config>form .typecho-option button{width:170px;height:40px;background-color:#409eff;border-radius:20px}.joe_config>form .typecho-option button:hover{-webkit-animation:pulse 1s;animation:pulse 1s;box-shadow:0 0 0 20px rgba(255,255,255,0)}.joe_config>form .joe_content{display:none;padding:15px}.joe_config>form .joe_content li{border:1px solid #e9e9eb;padding:15px}.joe_config>form .joe_content li .typecho-label{display:block;border-left:4px solid #409eff;background:#ecf5ff;line-height:26px;margin-bottom:15px;padding:5px 15px;color:#409eff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:0 4px 4px 0}.joe_config>form .joe_content li select{min-width:200px;height:34px;line-height:34px;border:1px solid #e9e9eb;color:#666;border-radius:4px;padding-left:5px}.joe_config>form .joe_content li .multiline{display:flex;align-items:center;color:#666}.joe_config>form .joe_content li .multiline input[type='checkbox']{margin-right:5px}.joe_config>form .joe_content li textarea,.joe_config>form .joe_content li input[type='text']{width:100%;padding:10px;color:#666;border:1px solid #e9e9eb;-webkit-appearance:none}.joe_config>form .joe_content li textarea{height:125px}.joe_config>form .joe_content li .description{background:#f8f8f8;color:#999;padding:10px 15px;margin-top:15px;line-height:26px;border-radius:4px;word-break:break-all}.joe_config__notice{display:none;margin-left:15px;background:#fff;padding:15px;flex:1;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:8px;line-height:28px;color:#606266}.joe_config__notice ol{padding:0 40px;margin-bottom:15px}.joe_config__notice ol li{list-style:decimal}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #409eff}}@keyframes pulse{0%{box-shadow:0 0 0 0 #409eff}}@media (max-width: 768px){.joe_config{display:block}.joe_config__aside{width:100%;margin-bottom:15px}.joe_config__aside .tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid #ebeef5;padding-bottom:10px}.joe_config__aside .tabs .item{width:33.33333333%;height:36px;line-height:36px;border-radius:18px}.joe_config__aside .backup{display:flex;align-items:center;justify-content:space-between}.joe_config__aside .backup input{width:auto;flex:1;margin-bottom:0;height:36px;line-height:36px;border-radius:18px}.joe_config__aside .backup input:nth-child(2){margin:0 10px}.joe_config>form{margin-left:0}.joe_config>form .typecho-option{padding:10px 0}.joe_config>form .typecho-option button{width:150px;height:38px;border-radius:19px}.joe_config__notice{margin-left:0}}
diff --git a/typecho/config/joe.config.js b/typecho/config/joe.config.js
index 3701899..a427083 100644
--- a/typecho/config/joe.config.js
+++ b/typecho/config/joe.config.js
@@ -1 +1 @@
-"use strict";document.addEventListener("DOMContentLoaded",function(){var a=document.querySelectorAll(".joe_config__aside .item"),b=document.querySelector(".joe_config__notice"),c=document.querySelector(".joe_config > form"),d=document.querySelectorAll(".joe_content");if(a.forEach(function(f){f.addEventListener("click",function(){a.forEach(function(h){h.classList.remove("active")}),f.classList.add("active");var g=f.getAttribute("data-current");sessionStorage.setItem("joe_config_current",g),"joe_notice"===g?(b.style.display="block",c.style.display="none"):(b.style.display="none",c.style.display="block"),d.forEach(function(h){h.style.display="none";var i=h.classList.contains(g);i&&(h.style.display="block")})})}),sessionStorage.getItem("joe_config_current")){var f=sessionStorage.getItem("joe_config_current");"joe_notice"===f?(b.style.display="block",c.style.display="none"):(c.style.display="block",b.style.display="none"),a.forEach(function(g){var h=g.getAttribute("data-current");h===f&&g.classList.add("active")}),d.forEach(function(g){g.classList.contains(f)&&(g.style.display="block")})}else a[0].classList.add("active"),b.style.display="block",c.style.display="none";var e=new XMLHttpRequest;e.onreadystatechange=function(){if(4===e.readyState)if(200<=e.status&&300>e.status||304===e.status){var f=JSON.parse(e.responseText);b.innerHTML=f.success?f.content:"\u8BF7\u6C42\u5931\u8D25\uFF01"}else b.innerHTML="\u8BF7\u6C42\u5931\u8D25\uFF01"},e.open("get","https://as.js.cn/qqshoucang.php?key=18e958d8c7fa5d435844f95c9f254fca",!0),e.send(null)});
\ No newline at end of file
+document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll(".joe_config__aside .item"),t=document.querySelector(".joe_config__notice"),s=document.querySelector(".joe_config > form"),n=document.querySelectorAll(".joe_content");if(e.forEach(function(o){o.addEventListener("click",function(){e.forEach(function(e){e.classList.remove("active")}),o.classList.add("active");var c=o.getAttribute("data-current");sessionStorage.setItem("joe_config_current",c),"joe_notice"===c?(t.style.display="block",s.style.display="none"):(t.style.display="none",s.style.display="block"),n.forEach(function(e){e.style.display="none";var t=e.classList.contains(c);t&&(e.style.display="block")})})}),sessionStorage.getItem("joe_config_current")){var o=sessionStorage.getItem("joe_config_current");"joe_notice"===o?(t.style.display="block",s.style.display="none"):(s.style.display="block",t.style.display="none"),e.forEach(function(e){var t=e.getAttribute("data-current");t===o&&e.classList.add("active")}),n.forEach(function(e){e.classList.contains(o)&&(e.style.display="block")})}else e[0].classList.add("active"),t.style.display="block",s.style.display="none";var c=new XMLHttpRequest;c.onreadystatechange=function(){if(4===c.readyState)if(200<=c.status&&300>c.status||304===c.status){var e=JSON.parse(c.responseText);t.innerHTML=e.success?e.content:"请求失败！"}else t.innerHTML="请求失败！"},c.open("get","https://as.js.cn/qqshoucang.php?key=18e958d8c7fa5d435844f95c9f254fca",!0),c.send(null)});
\ No newline at end of file
diff --git a/typecho/config/joe.config.scss b/typecho/config/joe.config.scss
index 3c7c7a0..50dec67 100644
--- a/typecho/config/joe.config.scss
+++ b/typecho/config/joe.config.scss
@@ -186,6 +186,7 @@
         color: #606266;
         ol {
             padding: 0 40px;
+            margin-bottom: 15px;
             li {
                 list-style: decimal;
             }
diff --git a/typecho/editor/joe.editor.css b/typecho/editor/joe.editor.css
index 91d0cac..bd1fe89 100644
--- a/typecho/editor/joe.editor.css
+++ b/typecho/editor/joe.editor.css
@@ -1 +1 @@
-table.typecho-list-table textarea[name='fields[thumb]'],table.typecho-list-table textarea[name='fields[abstract]'],table.typecho-list-table textarea[name='fields[description]'],table.typecho-list-table textarea[name='fields[video]']{width:100%;height:80px}table.typecho-list-table input[name='fields[keywords]']{width:100%}#wmd-button-row{height:auto}#wmd-button-row .wmd-button .icon{width:20px;height:20px;vertical-align:middle;fill:#9b9b9b}
+table.typecho-list-table textarea[name='fields[thumb]'],table.typecho-list-table textarea[name='fields[abstract]'],table.typecho-list-table textarea[name='fields[description]'],table.typecho-list-table textarea[name='fields[video]']{width:100%;height:80px}table.typecho-list-table input[name='fields[keywords]']{width:100%}#wmd-button-row{height:auto}#wmd-button-row .wmd-button .icon{width:20px;height:20px;vertical-align:middle;fill:#9b9b9b}.joe_owo__contain{position:relative}.joe_owo__contain *{box-sizing:border-box}.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{position:absolute;left:0;width:300px;background:#fff;box-shadow:0px 0px 20px -5px rgba(158,158,158,0.22);border-radius:4px;overflow:hidden;visibility:hidden;-webkit-transform:scale(0.5);transform:scale(0.5);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}.joe_owo__contain .box.show{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.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::-webkit-scrollbar{width:8px;height:8px}.joe_owo__contain .box .scroll::-webkit-scrollbar-thumb{border-radius:4px;background:#c0c4cc}.joe_owo__contain .box .scroll::-webkit-scrollbar-track{background:transparent}.joe_owo__contain .box .scroll:nth-child(3) .item{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_owo__contain .box .scroll .item{width:20%;display:inline-block;padding:5px;cursor:pointer;border-radius:4px;transition:background 0.25s;margin:0}.joe_owo__contain .box .scroll .item img{max-width:100%;max-height:100%}.joe_owo__contain .box .scroll .item:hover{background:#f2f6fc}.joe_owo__contain .box .bar{display:flex;align-items:center;border-top:1px solid #f2f6fc}.joe_owo__contain .box .bar .item{line-height:30px;padding:0 10px;cursor:pointer;color:var(--routine);transition:background 0.25s}.joe_owo__contain .box .bar .item.active{background:#f2f6fc}
diff --git a/typecho/editor/joe.editor.js b/typecho/editor/joe.editor.js
index 713be90..0e9b36a 100644
--- a/typecho/editor/joe.editor.js
+++ b/typecho/editor/joe.editor.js
@@ -3,7 +3,6 @@ $(function () {
     $('#wmd-button-bar .wmd-edittab').remove();
     $('#wmd-button-row .wmd-spacer').remove();
     $('#wmd-button-row #wmd-code-button').remove();
-
     /* 增加自定义功能 */
     const items = [
         {
@@ -159,11 +158,19 @@ $(function () {
         }
         return str;
     }
-
     /* 此处无需修改 */
     items.forEach(_ => {
         let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`);
         item.on('mousedown', () => $('#text').insertContent(getInsertTextById(_.id)));
         $('#wmd-button-row').append(item);
     });
+
+    $('#wmd-button-row').append(`
+        <li class="wmd-button joe_owo__contain" title="插入表情"></li>
+    `);
+
+    new JoeOwO({
+        target: '#text',
+        seat: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 160c194.4 0 352 157.6 352 352s-157.6 352-352 352S160 706.4 160 512 317.6 160 512 160z m0 64a288 288 0 1 0 0 576 288 288 0 0 0 0-576z m122.08 326.624l61.024 19.264a191.488 191.488 0 0 1-28.736 56.288A191.744 191.744 0 0 1 512 704a191.744 191.744 0 0 1-179.648-124.096l-3.456-10.016 61.024-19.264c4.256 13.44 10.72 26.112 19.136 37.44A127.744 127.744 0 0 0 512 640a127.744 127.744 0 0 0 119.264-81.408l2.816-8zM400 352a48 48 0 1 1 0 96 48 48 0 0 1 0-96z m224 0a48 48 0 1 1 0 96 48 48 0 0 1 0-96z" p-id="2401" fill="#9b9b9b"></path></svg>'
+    });
 });
diff --git a/typecho/editor/joe.editor.scss b/typecho/editor/joe.editor.scss
index c103a47..3f803ab 100644
--- a/typecho/editor/joe.editor.scss
+++ b/typecho/editor/joe.editor.scss
@@ -21,3 +21,91 @@ table.typecho-list-table {
         }
     }
 }
+
+.joe_owo {
+    &__contain {
+        position: relative;
+        * {
+            box-sizing: border-box;
+        }
+        .seat {
+            user-select: none;
+            cursor: pointer;
+        }
+        .box {
+            position: absolute;
+            left: 0;
+            width: 300px;
+            background: #fff;
+            box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
+            border-radius: 4px;
+            overflow: hidden;
+            visibility: hidden;
+            transform: scale(0.5);
+            opacity: 0;
+            transition: visibility, 0.35s, opacity 0.35s, transform 0.35s;
+            &.show {
+                visibility: visible;
+                transform: scale(1);
+                opacity: 1;
+            }
+            .scroll {
+                display: none;
+                max-height: 200px;
+                overflow-y: auto;
+                overscroll-behavior: none;
+                padding: 5px;
+                &::-webkit-scrollbar {
+                    width: 8px;
+                    height: 8px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    border-radius: 4px;
+                    background: #c0c4cc;
+                }
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+                &:nth-child(3) .item {
+                    text-align: center;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 50%;
+                    user-select: none;
+                }
+                .item {
+                    width: 20%;
+                    display: inline-block;
+                    padding: 5px;
+                    cursor: pointer;
+                    border-radius: 4px;
+                    transition: background 0.25s;
+                    margin: 0;
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                    &:hover {
+                        background: #f2f6fc;
+                    }
+                }
+            }
+            .bar {
+                display: flex;
+                align-items: center;
+                border-top: 1px solid #f2f6fc;
+                .item {
+                    line-height: 30px;
+                    padding: 0 10px;
+                    cursor: pointer;
+                    color: var(--routine);
+                    transition: background 0.25s;
+                    &.active {
+                        background: #f2f6fc;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/typecho/editor/joe.extend.js b/typecho/editor/joe.extend.js
index a06963d..7e65d99 100644
--- a/typecho/editor/joe.extend.js
+++ b/typecho/editor/joe.extend.js
@@ -1,60 +1 @@
-(function ($) {
-    $.fn.extend({
-        insertContent: function (myValue, t) {
-            var $t = $(this)[0];
-            if (document.selection) {
-                this.focus();
-                var sel = document.selection.createRange();
-                sel.text = myValue;
-                this.focus();
-                sel.moveStart('character', -l);
-                var wee = sel.text.length;
-                if (arguments.length == 2) {
-                    var l = $t.value.length;
-                    sel.moveEnd('character', wee + t);
-                    t <= 0 ? sel.moveStart('character', wee - 2 * t - myValue.length) : sel.moveStart('character', wee - t - myValue.length);
-                    sel.select();
-                }
-            } else if ($t.selectionStart || $t.selectionStart == '0') {
-                var startPos = $t.selectionStart;
-                var endPos = $t.selectionEnd;
-                var scrollTop = $t.scrollTop;
-                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
-                this.focus();
-                $t.selectionStart = startPos + myValue.length;
-                $t.selectionEnd = startPos + myValue.length;
-                $t.scrollTop = scrollTop;
-                if (arguments.length == 2) {
-                    $t.setSelectionRange(startPos - t, $t.selectionEnd + t);
-                    this.focus();
-                }
-            } else {
-                this.value += myValue;
-                this.focus();
-            }
-        },
-        selectionRange: function (start, end) {
-            var str = '';
-            var thisSrc = this[0];
-            if (start === undefined) {
-                if (/input|textarea/i.test(thisSrc.tagName) && /firefox/i.test(navigator.userAgent)) str = thisSrc.value.substring(thisSrc.selectionStart, thisSrc.selectionEnd);
-                else if (document.selection) str = document.selection.createRange().text;
-                else str = document.getSelection().toString();
-            } else {
-                if (!/input|textarea/.test(thisSrc.tagName.toLowerCase())) return false;
-                end === undefined && (end = start);
-                if (thisSrc.setSelectionRange) {
-                    thisSrc.setSelectionRange(start, end);
-                    this.focus();
-                } else {
-                    var range = thisSrc.createTextRange();
-                    range.move('character', start);
-                    range.moveEnd('character', end - start);
-                    range.select();
-                }
-            }
-            if (start === undefined) return str;
-            else return this;
-        }
-    });
-})(jQuery);
+(function(e){e.fn.extend({insertContent:function(t,n){var a=e(this)[0];if(document.selection){this.focus();var s=document.selection.createRange();s.text=t,this.focus(),s.moveStart("character",-i);var c=s.text.length;if(2==arguments.length){var i=a.value.length;s.moveEnd("character",c+n),n<=0?s.moveStart("character",c-2*n-t.length):s.moveStart("character",c-n-t.length),s.select()}}else if(a.selectionStart||"0"==a.selectionStart){var o=a.selectionStart,r=a.selectionEnd,l=a.scrollTop;a.value=a.value.substring(0,o)+t+a.value.substring(r,a.value.length),this.focus(),a.selectionStart=o+t.length,a.selectionEnd=o+t.length,a.scrollTop=l,2==arguments.length&&(a.setSelectionRange(o-n,a.selectionEnd+n),this.focus())}else this.value+=t,this.focus()},selectionRange:function(e,t){var n="",a=this[0];if(void 0===e)n=/input|textarea/i.test(a.tagName)&&/firefox/i.test(navigator.userAgent)?a.value.substring(a.selectionStart,a.selectionEnd):document.selection?document.selection.createRange().text:document.getSelection().toString();else{if(!/input|textarea/.test(a.tagName.toLowerCase()))return!1;if(void 0===t&&(t=e),a.setSelectionRange)a.setSelectionRange(e,t),this.focus();else{var s=a.createTextRange();s.move("character",e),s.moveEnd("character",t-e),s.select()}}return void 0===e?n:this}})})(jQuery);
\ No newline at end of file
diff --git a/typecho/editor/joe.owo.js b/typecho/editor/joe.owo.js
new file mode 100644
index 0000000..68a9f7a
--- /dev/null
+++ b/typecho/editor/joe.owo.js
@@ -0,0 +1,84 @@
+class JoeOwO {
+    constructor(options) {
+        const defaultOption = {
+            contain: '.joe_owo__contain',
+            target: '.joe_owo__target',
+            seat: 'OωO',
+            api: '/usr/themes/Joe/assets/json/joe.owo.json'
+        };
+        this.options = Object.assign(defaultOption, options);
+        $.ajax({
+            url: this.options.api,
+            type: 'get',
+            dataType: 'json',
+            success: res => this.initHtml(res)
+        });
+    }
+    /* 初始化 */
+    initHtml(res) {
+        let barStr = '';
+        let scrollStr = '';
+        for (let key in res) {
+            barStr += `<div class="item" data-index="${res[key].index}">${key}</div>`;
+            scrollStr += `
+                <ul class="scroll" data-index="${res[key].index}">
+                    ${res[key].container.map(_ => `<li class="item" data-text="${_.data}">${_.icon}</li>`).join('')} 
+                </ul>
+            `;
+        }
+        $(this.options.contain).html(`
+            <div class="seat">${this.options.seat}</div>
+            <div class="box">
+                ${scrollStr}
+                <div class="bar">${barStr}</div>
+            </div>
+        `);
+
+        this.initEvent();
+    }
+    initEvent() {
+        /* 容器 */
+        const contain = this.options.contain;
+        const height = $(contain).height();
+
+        /* 点击页面关闭 */
+        $(document).on('click', function () {
+            $(contain + ' .box').removeClass('show');
+        });
+
+        /* 点击占位符，显示表情弹窗 */
+        const seat = contain + ' .seat';
+        $(seat).on('click', function (e) {
+            e.stopPropagation();
+            $(this).siblings('.box').css('top', height).toggleClass('show');
+        });
+
+        /* 点击tab栏，切换表情类型 */
+        const barItem = contain + ' .box .bar .item';
+        $(barItem).on('click', function (e) {
+            e.stopPropagation();
+            $(this).addClass('active').siblings().removeClass('active');
+            const scrollIndx = contain + ' .box .scroll[data-index="' + $(this).attr('data-index') + '"]';
+            $(scrollIndx).show().siblings('.scroll').hide();
+        });
+
+        /* 点击表情，向文本框插入内容 */
+        const items = contain + ' .scroll .item';
+        const textarea = $(this.options.target)[0];
+        $(items).on('click', function () {
+            const text = $(this).attr('data-text');
+            const cursorPos = textarea.selectionEnd;
+            const areaValue = textarea.value;
+            textarea.value = areaValue.slice(0, cursorPos) + text + areaValue.slice(cursorPos);
+            textarea.focus();
+        });
+
+        /* 默认激活第一个 */
+        $(barItem).first().click();
+    }
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = JoeOwO;
+} else {
+    window.JoeOwO = JoeOwO;
+}