.carousel{position:relative;box-sizing:border-box}.carousel *,.carousel *:before,.carousel *:after{box-sizing:inherit}.carousel.is-draggable{cursor:move;cursor:grab}.carousel.is-dragging{cursor:move;cursor:grabbing}.carousel__viewport{position:relative;overflow:hidden;max-width:100%;max-height:100%}.carousel__track{display:flex}.carousel__slide{flex:0 0 auto;width:var(--carousel-slide-width, 60%);max-width:100%;padding:1rem;position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.has-dots{margin-bottom:calc(0.5rem + 22px)}.carousel__dots{margin:0 auto;padding:0;position:absolute;top:calc(100% + 0.5rem);left:0;right:0;display:flex;justify-content:center;list-style:none;user-select:none}.carousel__dots .carousel__dot{margin:0;padding:0;display:block;position:relative;width:22px;height:22px;cursor:pointer}.carousel__dots .carousel__dot:after{content:"";width:8px;height:8px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:currentColor;opacity:.25;transition:opacity .15s ease-in-out}.carousel__dots .carousel__dot.is-selected:after{opacity:1}.carousel__button{width:var(--carousel-button-width, 48px);height:var(--carousel-button-height, 48px);padding:0;border:0;display:flex;justify-content:center;align-items:center;pointer-events:all;cursor:pointer;color:var(--carousel-button-color, currentColor);background:var(--carousel-button-bg, transparent);border-radius:var(--carousel-button-border-radius, 50%);box-shadow:var(--carousel-button-shadow, none);transition:opacity .15s ease}.carousel__button.is-prev,.carousel__button.is-next{position:absolute;top:50%;transform:translateY(-50%)}.carousel__button.is-prev{left:10px}.carousel__button.is-next{right:10px}.carousel__button[disabled]{cursor:default;opacity:.3}.carousel__button svg{width:var(--carousel-button-svg-width, 50%);height:var(--carousel-button-svg-height, 50%);fill:none;stroke:currentColor;stroke-width:var(--carousel-button-svg-stroke-width, 1.5);stroke-linejoin:bevel;stroke-linecap:round;filter:var(--carousel-button-svg-filter, none);pointer-events:none}html.with-fancybox{scroll-behavior:auto}body.compensate-for-scrollbar{overflow:hidden !important;touch-action:none}.fancybox__container{position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;margin:0;padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);box-sizing:border-box;display:flex;flex-direction:column;color:var(--fancybox-color, #fff);-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;z-index:1050;outline:none;transform-origin:top left;--carousel-button-width: 48px;--carousel-button-height: 48px;--carousel-button-svg-width: 24px;--carousel-button-svg-height: 24px;--carousel-button-svg-stroke-width: 2.5;--carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4))}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container :focus{outline:none}body:not(.is-using-mouse) .fancybox__container :focus{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--fancybox-accent-color, rgba(1, 210, 232, 0.94))}@media all and (min-width: 1024px){.fancybox__container{--carousel-button-width:48px;--carousel-button-height:48px;--carousel-button-svg-width:27px;--carousel-button-svg-height:27px}}.fancybox__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--fancybox-bg, rgba(24, 24, 27, 0.92))}.fancybox__carousel{position:relative;flex:1 1 auto;min-height:0;height:100%;z-index:10}.fancybox__carousel.has-dots{margin-bottom:calc(0.5rem + 22px)}.fancybox__viewport{position:relative;width:100%;height:100%;overflow:visible;cursor:default}.fancybox__track{display:flex;height:100%}.fancybox__slide{flex:0 0 auto;width:100%;max-width:100%;margin:0;padding:48px 8px 8px 8px;position:relative;overscroll-behavior:contain;display:flex;flex-direction:column;outline:0;overflow:auto;--carousel-button-width: 36px;--carousel-button-height: 36px;--carousel-button-svg-width: 22px;--carousel-button-svg-height: 22px}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}@media all and (min-width: 1024px){.fancybox__slide{padding:64px 100px}}.fancybox__content{margin:0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);padding:36px;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);position:relative;align-self:center;display:flex;flex-direction:column;z-index:20}.fancybox__content :focus:not(.carousel__button.is-close){outline:thin dotted;box-shadow:none}.fancybox__caption{align-self:center;max-width:100%;margin:0;padding:1rem 0 0 0;line-height:1.375;color:var(--fancybox-color, currentColor);visibility:visible;cursor:auto;flex-shrink:0;overflow-wrap:anywhere}.is-loading .fancybox__caption{visibility:hidden}.fancybox__container>.carousel__dots{top:100%;color:var(--fancybox-color, #fff)}.fancybox__nav .carousel__button{z-index:40}.fancybox__nav .carousel__button.is-next{right:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-next{right:40px}}.fancybox__nav .carousel__button.is-prev{left:8px}@media all and (min-width: 1024px){.fancybox__nav .carousel__button.is-prev{left:40px}}.carousel__button.is-close{position:absolute;top:8px;right:8px;top:calc(env(safe-area-inset-top, 0px) + 8px);right:calc(env(safe-area-inset-right, 0px) + 8px);z-index:40}@media all and (min-width: 1024px){.carousel__button.is-close{right:40px}}.fancybox__content>.carousel__button.is-close{position:absolute;top:-40px;right:0;color:var(--fancybox-color, #fff)}.fancybox__no-click,.fancybox__no-click button{pointer-events:none}.fancybox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px;color:var(--fancybox-color, currentColor)}.fancybox__slide .fancybox__spinner{cursor:pointer;z-index:1053}.fancybox__spinner svg{animation:fancybox-rotate 2s linear infinite;transform-origin:center center;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;height:100%}.fancybox__spinner svg circle{fill:none;stroke-width:2.75;stroke-miterlimit:10;stroke-dasharray:1,200;stroke-dashoffset:0;animation:fancybox-dash 1.5s ease-in-out infinite;stroke-linecap:round;stroke:currentColor}@keyframes fancybox-rotate{100%{transform:rotate(360deg)}}@keyframes fancybox-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.fancybox__backdrop,.fancybox__caption,.fancybox__nav,.carousel__dots,.carousel__button.is-close{opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop,.fancybox__container.is-animated[aria-hidden=false] .fancybox__caption,.fancybox__container.is-animated[aria-hidden=false] .fancybox__nav,.fancybox__container.is-animated[aria-hidden=false] .carousel__dots,.fancybox__container.is-animated[aria-hidden=false] .carousel__button.is-close{animation:.15s ease backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__backdrop,.fancybox__container.is-animated.is-closing .fancybox__caption,.fancybox__container.is-animated.is-closing .fancybox__nav,.fancybox__container.is-animated.is-closing .carousel__dots,.fancybox__container.is-animated.is-closing .carousel__button.is-close{animation:.15s ease both fancybox-fadeOut}.fancybox-fadeIn{animation:.15s ease both fancybox-fadeIn}.fancybox-fadeOut{animation:.1s ease both fancybox-fadeOut}.fancybox-zoomInUp{animation:.2s ease both fancybox-zoomInUp}.fancybox-zoomOutDown{animation:.15s ease both fancybox-zoomOutDown}.fancybox-throwOutUp{animation:.15s ease both fancybox-throwOutUp}.fancybox-throwOutDown{animation:.15s ease both fancybox-throwOutDown}@keyframes fancybox-fadeIn{from{opacity:0}to{opacity:1}}@keyframes fancybox-fadeOut{to{opacity:0}}@keyframes fancybox-zoomInUp{from{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes fancybox-zoomOutDown{to{transform:scale(0.97) translate3d(0, 16px, 0);opacity:0}}@keyframes fancybox-throwOutUp{to{transform:translate3d(0, -30%, 0);opacity:0}}@keyframes fancybox-throwOutDown{to{transform:translate3d(0, 30%, 0);opacity:0}}.fancybox__carousel .carousel__slide{scrollbar-width:thin;scrollbar-color:#ccc rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar{width:8px;height:8px}.fancybox__carousel .carousel__slide::-webkit-scrollbar-track{background-color:rgba(255,255,255,.1)}.fancybox__carousel .carousel__slide::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.2)}.fancybox__carousel.is-draggable .fancybox__slide,.fancybox__carousel.is-draggable .fancybox__slide .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel.is-dragging .fancybox__slide,.fancybox__carousel.is-dragging .fancybox__slide .fancybox__content{cursor:move;cursor:grabbing}.fancybox__carousel .fancybox__slide .fancybox__content{cursor:auto}.fancybox__carousel .fancybox__slide.can-zoom_in .fancybox__content{cursor:zoom-in}.fancybox__carousel .fancybox__slide.can-zoom_out .fancybox__content{cursor:zoom-out}.fancybox__carousel .fancybox__slide.is-draggable .fancybox__content{cursor:move;cursor:grab}.fancybox__carousel .fancybox__slide.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__image{transform-origin:0 0;user-select:none;transition:none}.has-image .fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px}.is-closing .has-image .fancybox__content{overflow:visible}.has-image[data-image-fit=contain]{overflow:visible;touch-action:none}.has-image[data-image-fit=contain] .fancybox__content{flex-direction:row;flex-wrap:wrap}.has-image[data-image-fit=contain] .fancybox__image{max-width:100%;max-height:100%;object-fit:contain}.has-image[data-image-fit=contain-w]{overflow-x:hidden;overflow-y:auto}.has-image[data-image-fit=contain-w] .fancybox__content{min-height:auto}.has-image[data-image-fit=contain-w] .fancybox__image{max-width:100%;height:auto}.has-image[data-image-fit=cover]{overflow:visible;touch-action:none}.has-image[data-image-fit=cover] .fancybox__content{width:100%;height:100%}.has-image[data-image-fit=cover] .fancybox__image{width:100%;height:100%;object-fit:cover}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.fancybox__carousel .fancybox__slide.has-iframe .fancybox__content,.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content{width:100%;height:80%}.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.fancybox__carousel .fancybox__slide.has-map .fancybox__content,.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,.fancybox__carousel .fancybox__slide.has-video .fancybox__content,.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.fancybox__carousel .fancybox__slide.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.fancybox__thumbs{flex:0 0 auto;position:relative;padding:0px 3px;opacity:var(--fancybox-opacity, 1)}.fancybox__container.is-animated[aria-hidden=false] .fancybox__thumbs{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__thumbs{opacity:0}.fancybox__thumbs .carousel__slide{flex:0 0 auto;width:var(--fancybox-thumbs-width, 96px);margin:0;padding:8px 3px;box-sizing:content-box;display:flex;align-items:center;justify-content:center;overflow:visible;cursor:pointer}.fancybox__thumbs .carousel__slide .fancybox__thumb::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-width:5px;border-style:solid;border-color:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));opacity:0;transition:opacity .15s ease;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:.92}.fancybox__thumbs .carousel__slide>*{pointer-events:none;user-select:none}.fancybox__thumb{position:relative;width:100%;padding-top:calc(100%/(var(--fancybox-thumbs-ratio, 1.5)));background-size:cover;background-position:center center;background-color:rgba(255,255,255,.1);background-repeat:no-repeat;border-radius:var(--fancybox-thumbs-border-radius, 4px)}.fancybox__toolbar{position:absolute;top:0;right:0;left:0;z-index:20;background:linear-gradient(to top, hsla(0deg, 0%, 0%, 0) 0%, hsla(0deg, 0%, 0%, 0.006) 8.1%, hsla(0deg, 0%, 0%, 0.021) 15.5%, hsla(0deg, 0%, 0%, 0.046) 22.5%, hsla(0deg, 0%, 0%, 0.077) 29%, hsla(0deg, 0%, 0%, 0.114) 35.3%, hsla(0deg, 0%, 0%, 0.155) 41.2%, hsla(0deg, 0%, 0%, 0.198) 47.1%, hsla(0deg, 0%, 0%, 0.242) 52.9%, hsla(0deg, 0%, 0%, 0.285) 58.8%, hsla(0deg, 0%, 0%, 0.326) 64.7%, hsla(0deg, 0%, 0%, 0.363) 71%, hsla(0deg, 0%, 0%, 0.394) 77.5%, hsla(0deg, 0%, 0%, 0.419) 84.5%, hsla(0deg, 0%, 0%, 0.434) 91.9%, hsla(0deg, 0%, 0%, 0.44) 100%);padding:0;touch-action:none;display:flex;justify-content:space-between;--carousel-button-svg-width: 20px;--carousel-button-svg-height: 20px;opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.4))}@media all and (min-width: 1024px){.fancybox__toolbar{padding:8px}}.fancybox__container.is-animated[aria-hidden=false] .fancybox__toolbar{animation:.15s ease-in backwards fancybox-fadeIn}.fancybox__container.is-animated.is-closing .fancybox__toolbar{opacity:0}.fancybox__toolbar__items{display:flex}.fancybox__toolbar__items--left{margin-right:auto}.fancybox__toolbar__items--center{position:absolute;left:50%;transform:translateX(-50%)}.fancybox__toolbar__items--right{margin-left:auto}@media(max-width: 640px){.fancybox__toolbar__items--center:not(:last-child){display:none}}.fancybox__counter{min-width:72px;padding:0 10px;line-height:var(--carousel-button-height, 48px);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased}.fancybox__progress{background:var(--fancybox-accent-color, rgba(34, 213, 233, 0.96));height:3px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:30;user-select:none}.fancybox__container:fullscreen::backdrop{opacity:0}.fancybox__button--fullscreen g:nth-child(2){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(1){display:none}.fancybox__container:fullscreen .fancybox__button--fullscreen g:nth-child(2){display:block}.fancybox__button--slideshow g:nth-child(2){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(1){display:none}.fancybox__container.has-slideshow .fancybox__button--slideshow g:nth-child(2){display:block}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#1e1e1e;color:#dcdcdc}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-symbol{color:#569cd6}.hljs-link{color:#569cd6;text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-class,.hljs-number{color:#b8d7a3}.hljs-meta .hljs-string,.hljs-string{color:#d69d85}.hljs-regexp,.hljs-template-tag{color:#9a5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{color:#dcdcdc}.hljs-comment,.hljs-quote{color:#57a64a;font-style:italic}.hljs-doctag{color:#608b4e}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-tag{color:#9b9b9b}.hljs-template-variable,.hljs-variable{color:#bd63c5}.hljs-attr,.hljs-attribute{color:#9cdcfe}.hljs-section{color:gold}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{color:#d7ba7d}.hljs-addition{background-color:#144212;display:inline-block;width:100%}.hljs-deletion{background-color:#600;display:inline-block;width:100%}:root {
--theme: #333;
--theme-op-3: rgba(255 255 255 / .3);
--post-cover: #00000000;
--scroll: rgba(0 0 0 / .2);
--title-color: rgba(0 0 0 / .1);
--menu-hover: #f5f5f5;
--social-hover: #fff;
--theme-bak: #333;
--code-bgc: rgba(0 0 0 / .05);
--tr3: .3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
-webkit-tap-highlight-color: rgba(0 0 0 / 0);
-webkit-text-size-adjust: none;
}
html {
background-color: #fff;
} 
body {
background-color: #f5f6f7;
height: 100%;
}
body::-webkit-scrollbar {
width: 0;
height: 0;
}
.container {
width: 1400px;
height: 100%;
margin: 0 auto;
background-color: #fff;
display: flex;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
user-select: none;
}
::-moz-selection {
background-color: var(--theme); 
color: #fff;
}
::-webkit-selection {
background-color: var(--theme); 
color: #fff;
}
::selection {
background-color: var(--theme); 
color: #fff;
}
.home *,
.search *,
.category *,
.tag *,
.archive *,
.link *,
.note *,
.single * {
-webkit-transition: all var(--tr3), height 0s;
transition: all var(--tr3), height 0s;
}
.single article {
scroll-padding-top: 20px; } header {
width: 100px;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #e2e2e2;
background-color: #fff;
z-index: 1000;
}
header .logo {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
header .logo a {
display: block;
width: 50px;
height: 50px;
}
header .logo a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
header .menu ul li a {
display: block;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 15px;
color: #333;
position: relative;
}
header .menu ul li a:hover {
background-color: var(--menu-hover);
}
header .menu ul li a > * {
color: #333;
font-size: 24px;
}
header .menu ul li {
margin-bottom: 30px;
}
header .menu ul li:last-child {
margin-bottom: 0;
}
header .menu ul li.current-menu-item a,
header .menu ul li.current-menu-item a:hover {
color: #fff;
background-color: #333;
box-shadow: 0 2px 20px 0 rgba(0 0 0 / .2);
}
header .menu ul li.current-menu-item a > * {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
header .menu .menu-item-has-children ul {
display: none;
}
header .menu ul li a .menu-item-title {
display: block;
position: absolute;
font-size: 14px;
color: #fff;
left: calc(100% + 10px);
transform: translateX(-5px);
opacity: 0;
visibility: hidden;
white-space: nowrap;
padding: 5px 12px;
border-radius: 6px;
background-color: rgba(0 0 0 / .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
pointer-events: none;
z-index: 1;
}
header .menu ul li a:hover .menu-item-title {
transform: translateX(0);
opacity: 1;
visibility: visible;
} main {
width: calc(100% - 100px);
position: relative;
}
main .nav {
height: 90px;
width: 100%;
border-bottom: 1px solid #e2e2e2;
background-color: #fff;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
z-index: 998;
}
main .nav .left {
display: flex;
align-items: center;
}
main .nav .left .menu-btn,
main .nav .left .search-btn {
margin-right: 20px;
display: none;
}
main .nav .left .menu-btn span,
main .nav .left .search-btn span {
font-size: 24px;
color: #333;
cursor: pointer;
}
main .nav .left .menu-btn {
margin-top: 2px;
}
main .nav .search-box {
width: 500px;
height: 40px;
position: relative;
display: flex;
align-items: center;
}
main .nav .search-box label {
font-size: 20px;
color: #999999;
position: absolute;
left: 15px;
}
main .nav .search-box input {
outline: 0;
width: 100%;
height: 100%;
border-radius: 30px;
border: 1px solid transparent;
padding: 0 20px 0 40px;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
}
.search-m {
display: none;
position: fixed;
top: 70px;
transform: translateY(-80px);
z-index: 999;
background-color: #fff;
width: 100%;
height: auto;
border-bottom: 1px solid #e2e2e2;
padding: 0 25px 25px 25px;
box-shadow: 0 0 10px rgba(0 0 0 / .05);
}
.search-m.active {
transform: translateY(0);
}
.search-m form {
width: 100%;
height: 40px;
}
.search-m form input {
border: none;
outline: 0;
width: 100%;
height: 100%;
font-size: 13px;
padding: 0 15px;
color: #333;
background-color: #f5f5f5;
border-radius: 50px;
border: 1px solid transparent;
}
main .nav .search-box input:hover,
main .nav .search-box input:focus,
.search-m form input:hover,
.search-m form input:focus {
border: 1px solid var(--scroll);
}
main .nav .search-box input:focus,
.search-m form input:focus {
background-color: var(--code-bgc);
box-shadow: 0 10px 20px 1px var(--menu-hover);
} main .nav .user-menu {
position: relative;
font-size: 0;
}
main .nav .user-menu span {
font-size: 24px;
color: #333;
cursor: pointer;
}
main .nav .user-menu .user-menu-box {
position: absolute;
right: 0;
top: 0;
width: 150px;
margin-top: 35px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
}
main .nav .user-menu .user-menu-box.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
main .nav .user-menu .user-menu-box ul {
background-color: #fff;
padding: 10px 0;
box-shadow: 0 2px 20px rgba(0 0 0 / .1) ;
border-radius: 8px;
}
main .nav .user-menu .user-menu-box ul li a {
padding: 7px 20px;
display: flex;
align-items: center;
font-size: 14px;
color: #333;
}
main .nav .user-menu .user-menu-box ul li a:hover {
background-color: var(--menu-hover);
}
main .nav .user-menu .user-menu-box ul li a i {
margin-right: 5px;
}
main .nav .user-menu .user-menu-box ul li .logout {
color: #dd2424;
}
main .nav .user-menu .user-menu-box ul li .logout:hover {
background-color: #dd24240d;
}
main .nav .user-menu #aside-btn {
display: none;
}
main .nav .user-menu .backtop {
visibility: hidden;
opacity: 0;
}
main .nav .user-menu .backtop.active {
visibility: visible;
opacity: 1;
}
main .nav .user-menu > span {
margin-left: 20px;
} main .content {
height: calc(100vh - 90px);
word-break: break-all;
display: flex;
}
main .content article {
width: calc(100% - 300px);
height: 100%;
padding: 25px;
position: relative;
background-color: #fff;
}
main .content article .bottom {
position: relative;
} main .content article,
main .content aside .aside-content .aside-page {
overflow: auto;
overflow: overlay;
}
main .content article::-webkit-scrollbar,
main .content aside .aside-content .aside-page::-webkit-scrollbar {
width: 6px;
height: 0;
}
main .content article:hover::-webkit-scrollbar-thumb,
main .content aside .aside-content .aside-page:hover::-webkit-scrollbar-thumb {
background: var(--scroll);
border-radius: 6px;
}
main .content aside .aside-content {
overflow: hidden;
} .home article .top {
padding-bottom: 20px;
margin-bottom: 25px;
border-bottom: 1px dashed #e2e2e2;
overflow: hidden;
}
.home article .top .regular {
margin-bottom: 10px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 25px;
position: relative;
}
.home article .top .regular .regular-box a {
width: 100%;
height: 180px;
display: block;
border-radius: 8px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.home article .top .regular .regular-box a::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top,rgba(0 0 0 / .3),rgba(0 0 0 / .05));
}
.home article .top .regular .regular-box a .regular-post-info {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
position: absolute;
bottom: 0;
padding: 0 20px 20px 20px;
}
.home article .top .regular .regular-box a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.home article .top .regular .regular-box h2 {
font-size: 14px;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home article .top .regular .regular-box h2:hover {
text-decoration: underline;
}
.home article .top .regular .regular-box p {
font-size: 13px;
color: #999;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
} .home article .top .swiper {
width: 100%;
height: 250px;
padding: 10px 0 40px 0;
position: relative;
}
.home article .top .swiper-slide {
background-color: #fff; border-radius: 8px;
transform: scale(0.8);
transition: all 0s;
user-select: none;
}
.home article .top .swiper-slide-active,
.home article .top .swiper-slide-duplicate-active {
transform: scale(1);
}
.home article .top .swiper-pagination-bullet-active {
background-color: #333;
}
.home article .top .swiper-button-prev,
.home article .top .swiper-button-next {
background-color: rgba(0 0 0 / .2);
color: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: -15px;
}
.home article .top .swiper-button-prev::after,
.home article .top .swiper-button-next::after {
font-size: 12px;
padding-top: 1px;
}
.home article .top .swiper-button-prev::after {
padding-right: 2px;
}
.home article .top .swiper-button-next::after {
padding-left: 2px;
}
.home article .top .swiper-button-prev { }
.home article .top .swiper-button-next { }
.home article .top .swiper:hover .swiper-button-prev,
.home article .top .swiper:hover .swiper-button-next {
visibility: visible;
opacity: 1;
}
.home article .top .swiper-slide a {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.home article .top .swiper-slide a::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top,rgba(0 0 0 / .3),rgba(0 0 0 / .05));
}
.home article .top .swiper-slide a img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
border-radius: 8px;
}
.home article .top .swiper-slide a .swiper-post-info {
color: #fff;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
position: absolute;
left: 0;
bottom: 0;
padding: 0 20px 20px 20px;
}
.home article .top .swiper-slide a .swiper-post-info h2 {
font-size: 15px;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home article .top .swiper-slide a .swiper-post-info h2:hover  {
text-decoration: underline;
}
.home main .content article .bottom .recommend-bar {
margin-bottom: 25px;
overflow: auto; }
.home main .content article .bottom .recommend-bar::-webkit-scrollbar {
width: 0;
height: 0;
}
.home main .content article .bottom .recommend-bar ul {
display: flex;
position: relative;
}
.home main .content article .bottom .recommend-bar ul .slider {
height: 100%;
border-radius: 6px;
background-color: #333;
position: absolute;
left: 0;
z-index: 1;
}
.home main .content article .bottom .recommend-bar ul li {
margin-right: 20px;
white-space: nowrap;
z-index: 2;
}
.home main .content article .bottom .recommend-bar ul li:last-child {
margin-right: 0;
}
.home main .content article .bottom .recommend-bar ul li a {
display: block;
color: #333;
padding: 6px 15px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
user-select: none;
}
.home main .content article .bottom .recommend-bar ul li a i,
.home main .content article .bottom .recommend-bar ul li a i::before {
font-size: 14px;
transition: all 0s !important;
}
.home main .content article .bottom .recommend-bar ul li a.active {
color: #fff;
}
.home main .content article .bottom .post-part {
display: none;
}
.home main .content article .bottom .post-part.active {
display: block;
}
.home main .content article .bottom .post-part ul li {
display: flex;
margin-bottom: 25px;
transition: all 0s !important;
padding-bottom: 25px;
border-bottom: 1px dashed #e2e2e2;
}
.home main .content article .bottom .post-part ul li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.home main .content article .bottom .post-part ul li .left {
width: 260px;
height: 170px;
position: relative;
margin-right: 20px;
overflow: hidden;
}
.home main .content article .bottom .post-part ul li .left a.cover {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
.home main .content article .bottom .post-part ul li .left a.cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
}
.home main .content article .bottom .post-part ul li .left .cate-view {
max-width: calc(100% - 20px);
position: absolute;
top: 0;
left: 10px;
padding: 3px 10px;
background-color: rgba(255 255 255 / .7);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 4px;
box-shadow: 0 0 10px rgb(0 0 0 / 5%);
transform: translateY(-100%);
opacity: 0;
color: #999;
font-size: 14px;
cursor: default;
}
.home main .content article .bottom .post-part ul li .left .cate-view a {
color: #333;
font-size: 14px;
}
.home main .content article .bottom .post-part ul li .left .cate-view a:hover {
text-decoration: underline;
}
.home main .content article .bottom .post-part ul li .left a.cover:hover ~ .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view:hover {
transform: translateY(10px);
opacity: 1;
}
.home main .content article .bottom .post-part ul li .left .cate-view:hover {
background-color: #fff;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 280px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px 0;
}
.home main .content article .bottom .post-part ul li .right .text .title {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 12px;
}
.home main .content article .bottom .post-part ul li .right .text .title a {
color: #333;
font-size: 18px;
font-weight: 700;  }
.home main .content article .bottom .post-part ul li .right .text .title a:hover { box-shadow: inset 0 -0.55em #e2e2e2;
}
.home main .content article .bottom .post-part ul li .right .text p {
color: #999;
font-size: 14px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home main .content article .bottom .post-part ul li .right .post-info {
display: flex;
justify-content: space-between;
}
.home main .content article .bottom .post-part ul li .right .post-info .time {
display: flex;
align-items: center;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i {
font-size: 14px;
color: #999;
margin-right: 5px;
}
.home main .content article .bottom .post-part ul li .right .post-info .time span {
font-size: 14px;
color: #999;
line-height: 1em;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a {
display: flex;
align-items: center;
padding: 0 10px 0 13px;
height: 30px;
border-radius: 4px;
position: relative;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:hover { }
.home main .content article .bottom .post-part ul li .right .post-info .read-more a::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 30px;
background: #ddd;
width: 30px;
height: 100%;
transition: all var(--tr3);
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:hover::before {
width: 100%;
background: #f2f2f2;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more span {
font-size: 14px;
color: #333;
margin-right: 3px;
z-index: 1;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more i {
font-size: 15px;
color: #333;
z-index: 1;
} .pagination,
.no-more-post {
padding-top: 25px;
}
aside .pagination,
aside .no-more-post {
padding-top: 0;
}
.pagination a,
.no-more-post a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 10px 0;
}
.pagination a,
.pagination a i,
.no-more-post a,
.no-more-post a i {
color: #999;
font-size: 14px;
}
.pagination a i,
.no-more-post a i {
margin-right: 5px;
}
.no-more-post a,
.no-more-post a i,
.no-more-post a:hover,
.no-more-post a:hover i {
background-color: transparent !important;
color: #999 !important;
}
.pagination a:hover,
.pagination a:hover i {
background-color: #f5f5f5;
color: #333;
} main .content aside {
width: 300px;
height: 100%;
border-left: 1px solid #e2e2e2;
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 997;
overflow: hidden;
}
main .content aside .aside-content,
main .content aside .aside-content .aside-page {
height: 100%;
}
main .content aside .author {
position: relative;
}
main .content aside .author .cover {
width: 100%;
height: 170px;
}
main .content aside .author .cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
main .content aside .author .author-info {
width: 100%;
margin-top: -40px;
padding: 25px;
padding-top: 0;
}
main .content aside .author .author-info .avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 10px auto;
box-shadow: 0 0 8px rgb(28 31 35 / 4%), 0 0 24px 8px rgb(28 31 35 / 6%);
}
main .content aside .author .author-info img {
width: 100%;
height: 100%;
border-radius: 50%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
border: 2px solid #fff;
}
main .content aside .author .author-info .name {
text-align: center;
font-size: 16px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
main .content aside .author .author-info .des {
font-size: 13px;
color: #999;
margin-bottom: 20px;
text-align: center;
}
main .content aside .author .post-info {
background-color: #f5f5f5;
border-radius: 8px;
display: flex;
justify-content: space-between;
padding: 10px 30px;
}
main .content aside .author .post-info div {
display: flex;
flex-direction: column;
align-items: center;
}
main .content aside .author .post-info i {
font-style: normal;
color: #999;
font-size: 13px;
margin-bottom: 5px;
}
main .content aside .author .post-info span {
font-size: 18px;
font-weight: 700;
color: #333;
} main .content aside .toc {
padding: 0 25px;
margin-bottom: 25px;
}
main .content aside .toc h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .toc h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .toc ul {
background-color: #f5f5f5;
border-radius: 8px;
padding: 8px;
}
main .content aside .toc ul li {
margin-bottom: 4px;
}
main .content aside .toc ul li:last-child {
margin-bottom: 0;
}
main .content aside .toc ul li a {
display: block;
padding: 5px 8px;
border-radius: 5px;
font-size: 14px;
color: #333;
}
main .content aside .toc ul li a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .toc ul li[id='H3'] a {
padding-left: 15px;
font-size: 13px;
} main .content aside .aside-content {
width: 200%;
transform: translateX(0);
display: flex;
position: relative;
}
main .content aside .aside-content.active {
transform: translateX(-50%);
}
main .content aside .aside-content .aside-page { width: 100%;
}
main .content aside .aside-content .aside-page.active {
opacity: 1;
}
main .content aside .aside-content .aside-btn-open,
main .content aside .aside-content .aside-btn-close {
position: absolute;
top: 10px;
border-radius:  5px;
color: var(--theme-bak);
background-color: rgba(255 255 255 / .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
font-size: 14px;
cursor: pointer;
user-select: none;
display: flex;
align-items: center; }
main .content aside .aside-content .aside-btn-open {
right: 10px;
padding: 4px 8px 4px 14px;
}
main .content aside .aside-content .aside-btn-close {
left: 10px;
padding: 4px 14px 4px 8px;
}
main .content aside .aside-content .aside-btn-open:hover,
main .content aside .aside-content .aside-btn-close:hover {
background-color: rgba(255 255 255 / .7);
box-shadow: 0 0 20px rgba(0 0 0 / .1);
}
main .content aside .sub-page .author {
margin-bottom: 25px;
}
main .content aside .author .author-info-sub {
width: 100%;
padding: 20px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
main .content aside .sub-page .cover::before {
content: '';
display: block;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
}
main .content aside .author .author-info-sub .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
border: 2px solid #fff;
overflow: hidden;
}
main .content aside .author .author-info-sub img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
main .content aside .author .author-info-sub .author-name {
width: calc(100% - 75px);
}
main .content aside .author .author-info-sub .name {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 5px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main .content aside .author .author-info-sub .des {
font-size: 13px;
color: #eee;
margin-bottom: 3px;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} main .content aside .sub-page .menu_sidebar_box {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .menu_sidebar_box h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .menu_sidebar_box h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .menu_sidebar > ul > .menu-item-has-children > ul > .menu-item-has-children > ul {
display: none;
}
main .content aside .sub-page .menu_sidebar ul li {
}
main .content aside .sub-page .menu_sidebar > ul > li {
margin-bottom: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children {
overflow: hidden;
transition: all var(--tr3);
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > a > .arrow.active {
transform: rotate(-90deg);
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul {
background-color: var(--code-bgc);
padding: 8px;
margin-top: 5px;
border-radius: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul.active {
padding: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul > li {
margin-bottom: 5px;
}
main .content aside .sub-page .menu_sidebar > ul > li.menu-item-has-children > ul > li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .menu_sidebar ul li a {
display: block;
padding: 5px 10px;
border-radius: 5px; }
main .content aside .sub-page .menu_sidebar ul li a,
main .content aside .sub-page .menu_sidebar ul li a * {
font-size: 14px;
color: #333;
}
main .content aside .sub-page .menu_sidebar ul li a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .sub-page .menu_sidebar ul li a:hover * {
color: var(--theme-bak);
} main .content aside .sub-page .new-comments {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .new-comments h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .new-comments h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul > p,
main .content aside .sub-page .new-comments ul > p i {
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul > p {
display: flex;
align-items: center;
justify-content: center;
}
main .content aside .sub-page .new-comments ul > p i {
margin-right: 3px;
}
main .content aside .sub-page .new-comments ul li {
width: 100%;
padding: 10px;
background-color: #f5f5f5;
border-radius: 8px;
margin-bottom: 15px;
}
main .content aside .sub-page .new-comments ul li:last-child {
margin-bottom: 0;
}
main .content aside .sub-page .new-comments ul li .top {
display: flex;
align-items: center;
}
main .content aside .sub-page .new-comments ul li .avatar {
width: 40px;
height: 40px;
margin-right: 10px;
overflow: hidden;
}
main .content aside .sub-page .new-comments ul li .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
border-radius: 6px;
}
main .content aside .sub-page .new-comments ul li .user {
max-width: calc(100% - 50px);
}
main .content aside .sub-page .new-comments ul li .user .name {
font-size: 13px;
margin-bottom: 3px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main .content aside .sub-page .new-comments ul li .user .name a {
color: #333;
transition: all var(--tr3);
}
main .content aside .sub-page .new-comments ul li .user .name a:hover {
color: var(--theme);
}
main .content aside .sub-page .new-comments ul li .user .rdate,
main .content aside .sub-page .new-comments ul li .user .rdate i {
font-size: 12px;
color: #999;
}
main .content aside .sub-page .new-comments ul li .user .rdate {
display: flex;
align-items: center;
}
main .content aside .sub-page .new-comments ul li .user .rdate i {
margin-right: 2px;
}
main .content aside .sub-page .new-comments ul li .text {
border-radius: 4px;
margin-top: 8px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
}
main .content aside .sub-page .new-comments ul li .text,
main .content aside .sub-page .new-comments ul li .text a,
main .content aside .sub-page .new-comments ul li .text .at {
font-size: 13px;
color: #999;
}
main .content aside .sub-page .new-comments ul li .text a:hover {
color: var(--theme-bak);
}
main .content aside .sub-page .new-comments ul li .text .at {
color: var(--theme-bak);
font-style: italic;
user-select: none;
margin-right: 5px;
cursor: default;
}
main .content aside .sub-page .new-comments ul li .text .at:hover {
text-decoration: underline;
} main .content aside .sub-page .about {
padding: 25px;
padding-top: 0;
}
main .content aside .sub-page .about h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .sub-page .about h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .sub-page .about p {
font-size: 14px;
color: #333;
white-space: pre-wrap;
}
main .content aside .sub-page .about p * {
max-width: 100%;
}
main .content aside .sub-page .about p a {
color: #333;
text-decoration: underline;
}
main .content aside .sub-page .about p img,
main .content aside .sub-page .about p video {
border-radius: 5px;
} main .content aside .social {
padding: 0 25px;
margin-bottom: 25px;
}
main .content aside .social h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .social h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .social .social-content {
background-color: #f5f5f5;
border-radius: 8px;
padding: 10px;
}
main .content aside .social .social-content ul {
display: flex; overflow: auto;
}
main .content aside .social .social-content ul::-webkit-scrollbar {
width: 0;
height: 0;
}
main .content aside .social .social-content ul li a {
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
border-radius: 6px;
margin-right: 5px;
}
main .content aside .social .social-content ul li:last-child a {
margin-right: 0;
}
main .content aside .social .social-content ul li a:hover {
background-color: var(--social-hover);
box-shadow: 0 0 10px rgba(0 0 0 / .05);
}
main .content aside .social .social-content ul li a > * {
font-size: 24px;
color: #333;
} main .content aside .notes-box {
padding: 0 25px 25px 25px;
}
main .content aside .notes-box > h2 {
font-size: 17px;
color: #333;
margin-bottom: 15px;
}
main .content aside .notes-box > h2 span {
font-weight: 400;
font-size: 12px;
color: #999;
}
main .content aside .notes-box ul li {
background-color: #f5f5f5;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
main .content aside .notes-box ul li .notes-content {
margin-bottom: 10px;
max-height: 200px;
overflow: hidden;
position: relative;
}
main .content aside .notes-box ul li .notes-content::before {
content: '';
display: block;
width: 100%;
height: 30px;
position: absolute;
top: 170px;
left: 0;
background: linear-gradient(to top, #f5f5f5, rgba(0 0 0 / 0));
z-index: 1;
}
main .content aside .notes-box ul li .view-detail {
text-align: center;
}
main .content aside .notes-box ul li .view-detail a {
display: block;
font-size: 12px;
color: #999;
background-color: rgba(0 0 0 / .05);
padding: 4px 0;
border-radius: 6px;
margin-top: 10px;
}
main .content aside .notes-box ul li .view-detail a:hover {
color: var(--theme-bak);
background-color: var(--code-bgc);
}
main .content aside .notes-box ul li .notes-info {
display: flex;
justify-content: space-between;
align-items: center;
}
main .content aside .notes-box ul li .notes-info .time,
main .content aside .notes-box ul li .notes-info .new {
display: flex;
}
main .content aside .notes-box ul li .notes-info .time span::before,
main .content aside .notes-box ul li .notes-info .new span::before {
font-size: 12px;
color: #999;
margin-right: 2px;
}
main .content aside .notes-box ul li .notes-info .time span,
main .content aside .notes-box ul li .notes-info .new span {
font-size: 12px;
color: #999;
}
main .content aside .notes-box ul li .notes-info .time span::before {
content: '\e6ab';
font-family: 'iconfont';
}
main .content aside .notes-box ul li .notes-info .new span::before {
content: '\e6a1';
font-family: 'iconfont';
}
main .content aside .notes-box ul li .notes-info .new span::before,
main .content aside .notes-box ul li .notes-info .new span {
color: var(--theme-bak);
} main .content .notes-content * {
margin-bottom: 5px;
font-size: 13px;
color: #333;
line-height: 1.5;
}
main .content .notes-content *:last-child {
margin-bottom: 0;
}
main .content .notes-content a {
color: var(--theme-bak);
text-decoration: underline;
}
main .content .notes-content h1 {
font-size: 17px;
color: #333;
position: relative;
}
main .content .notes-content h2 {
font-size: 16px;
color: #333;
position: relative;
}
main .content .notes-content h3 {
font-size: 15px;
color: #333;
position: relative;
}
main .content .notes-content h4 {
font-size: 14px;
color: #333;
position: relative;
}
main .content .notes-content h5 {
font-size: 13px;
color: #333;
position: relative;
}
main .content .notes-content h6 {
font-size: 12px;
color: #333;
position: relative;
}
main .content .notes-content pre {
display: inline-block; white-space: pre-wrap;
word-wrap: break-word;
border-radius: 6px;
background-color: var(--code-bgc);
color: var(--theme-bak);
font-size: 12px;
padding: 2px 8px;
font-family: 'PingFang SC','Consolas','Courier New';
}
main .content .notes-content img,
main .content .notes-content video {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 0;
vertical-align: middle;
}
main .content .notes-content .wp-video {
width: 100% !important;
}
main .content .notes-content ul, 
main .content .notes-content ol {
margin-left: 30px;
}
main .content .notes-content ul li, 
main .content .notes-content ol li { width: calc(100% - 30px);
word-break: break-all;
word-wrap: break-word;
padding: 0;
}
main .content .notes-content ul li {
list-style: disc;
}
main .content .notes-content ol li {
list-style: auto;
} .pagination-aside a,
.no-more-note a {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #999;
border-radius: 8px;
padding: 8px 0;
}
.pagination-aside a i,
.no-more-note a i {
font-size: 12px;
color: #999;
margin-right: 3px;
}
.pagination-aside a:hover,
.pagination-aside a:hover i {
background-color: #f5f5f5;
color: #333;
} .note main .content article .note-page li {
border-radius: 8px;
background-color: #f5f5f5;
margin-bottom: 25px;
padding: 15px;
overflow: hidden;
}
.note main .content article .note-page li:last-child {
margin-bottom: 0;
}
.note main .content article .note-page li .top {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.note main .content article .note-page li .top .left {
width: 50px;
height: 50px;
margin-right: 15px;
}
.note main .content article .note-page li .top .left img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
vertical-align: middle;
pointer-events: none;
}
.note main .content article .note-page li .top .right {
width: calc(100% - 65px);
}
.note main .content article .note-page li .top .right .note-author {
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 5px;
}
.note main .content article .note-page li .top .right .note-date {
font-size: 13px;
font-weight: 400;
color: #999;
}
.note main .content article .note-page li .center {
margin-bottom: 15px;
}
.note main .content article .note-page li .bottom {
display: flex;
justify-content: right;
}
.note main .content article .note-page li .bottom a {
display: inline-block;
padding: 5px 10px;
border-radius: 6px;
}
.note main .content article .note-page li .bottom a i {
margin-right: 3px;
}
.note main .content article .note-page li .bottom a,
.note main .content article .note-page li .bottom a i {
font-weight: 400;
font-size: 13px;
color: #999;
}
.note main .content article .note-page li .bottom a:hover {
color: #333;
background-color: rgba(0 0 0 / .05);
}
.note main .content article .note-page li .bottom a:hover i {
color: #333;
} footer {
position: sticky;
bottom: 0;
width: 100%;
padding: 15px 25px;
background-color: #fff;
border-top: 1px solid #e2e2e2;
} footer .copyright a,
footer .copyright {
font-size: 13px;
color: #999;
}
footer .copyright > * {
margin-bottom: 5px;
}
footer .copyright > *:last-child {
margin-bottom: 0;
}
footer .copyright a:hover {
color: var(--theme);
}
footer .copyright p {
text-align: center;
} .single main .content article {
padding: 0;
z-index: 1;
}
.single main .content article .post-cover {
width: 100%;
height: 350px;
position: relative; }
.single main .content article .post-cover .cover {
width: 100%;
height: 100%;
}
.single main .content article .post-cover .cover::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, var(--post-cover), rgba(0 0 0 / 0));
z-index: 1;
}
.single main .content article .post-cover .cover::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(0 0 0 / .5), rgba(0 0 0 / 0));
z-index: 2;
}
.single main .content article .post-cover .cover img {
width: 100%;
height: 100%;
vertical-align: middle;
object-fit: cover;
pointer-events: none;
}
.single main .content article .post-cover .cover .get_img_url,
.single main .content article .post-cover .cover .thumbnail_loading {
object-fit: contain;
position: absolute;
top: 0;
}
.single main .content article .post-cover .shortcuts {
position: absolute;
top: 25px;
right: 25px;
z-index: 3;
display: flex;
align-items: center;
}
.single main .content article .post-cover .shortcuts a {
display: flex;
align-items: center;
color: #fff;
background-color: var(--scroll);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-shadow: 0 0 5px rgba(0 0 0 / .2);
padding: 5px 15px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
user-select: none;
margin-left: 10px;
}
.single main .content article .post-cover .shortcuts a i {
font-size: 14px;
margin-right: 3px;
}
.single main .content article .post-cover .shortcuts a:hover {
background-color: var(--theme);
}
.single main .content article .post-cover .post-info {
width: 100%;
position: absolute;
bottom: 0;
padding: 0 25px 25px 25px;
z-index: 3;
}
.single main .content article .post-cover .post-info .title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.single main .content article .post-cover .post-info .title h2 {
display: inline;
font-size: 28px;
font-weight: 700;
color: #fff;
}
.single main .content article .post-cover .post-info .more {
display: flex;
align-items: center;
white-space: nowrap;
overflow: auto;
}
.single main .content article .post-cover .post-info .more::-webkit-scrollbar {
width: 0;
height: 0;
}
.single main .content article .post-cover .post-info .more div {
margin-left: 15px;
display: flex;
align-items: center;
}
.single main .content article .post-cover .post-info .more .time {
display: flex;
align-items: center;
color: #fff;
margin-left: 0;
}
.single main .content article .post-cover .post-info .more .time i {
font-size: 15px;
margin-right: 5px;
}
.single main .content article .post-cover .post-info .more .time span {
font-size: 14px;
}
.single main .content article .post-cover .post-info .more .cate a {
display: flex;
align-items: center;
color: #fff;
padding: 4px 10px;
margin-right: 5px;
border-radius: 6px;
font-size: 14px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
.single main .content article .post-cover .post-info .more .cate a:last-child {
margin-right: 0;
}
.single main .content article .post-cover .post-info .more .cate a:hover {
background-color: var(--theme-op-3);
color: #fff;
}
.single main .content article .post-cover .post-info .more .cate a::before {
content: '\e6b6';
font-family: 'iconfont';
margin-right: 5px;
font-size: 14px;
}
.single main .content article .post-cover .post-info .more .tag {
cursor: default;
}
.single main .content article .post-cover .post-info .more .tag a {
display: block;
color: #fff;
padding: 4px 10px;
margin-right: 5px;
border-radius: 6px;
font-size: 14px;
text-shadow: 0 0 5px rgba(0 0 0 / .2);
}
.single main .content article .post-cover .post-info .more .tag a:last-child {
margin-right: 0;
}
.single main .content article .post-cover .post-info .more .tag a:hover {
background-color: var(--theme-op-3);
color: #fff;
}
.single main .content article .post-cover .post-info .more .tag a::before {
content: '#';
font-size: 14px;
} .single main .content article .post-content {
padding: 30px 25px;
} .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 28px;
color: #333;
margin-bottom: 20px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-weight: 400;
font-size: 14px;
color: #999;
}
.category main .content article .categories,
.tag main .content article .tag-bar {
margin-bottom: 15px;
}
.category main .content article .categories ul,
.tag main .content article .tag-bar ul {
display: flex;
overflow: auto;
position: relative;
padding-bottom: 10px;
}
.category main .content article .categories ul .slider,
.tag main .content article .tag-bar ul .slider {
height: calc(100% - 10px);
border-radius: 6px;
background-color: #333;
position: absolute;
left: 0;
z-index: 1;
}
.category main .content article .categories ul::-webkit-scrollbar,
.tag main .content article .tag-bar ul::-webkit-scrollbar {
width: 0;
height: 0;
}
.tag main .content article .tag-bar ul li,
.category main .content article .categories ul li {
margin-right: 10px;
white-space: nowrap;
z-index: 2;
}
.category main .content article .categories ul li .children {
display: none;
}
.category main .content article .categories ul li:last-child,
.tag main .content article .tag-bar ul li:last-child {
margin-right: 0;
}
.category main .content article .categories ul li a,
.tag main .content article .tag-bar ul li a {
display: block;
color: #333;
padding: 6px 15px;
border-radius: 6px;
font-size: 14px;
user-select: none;
}
.category main .content article .categories ul li a:hover,
.tag main .content article .tag-bar ul li a:hover { }
.category main .content article .categories ul li a.active:hover,
.tag main .content article .tag-bar ul li a.active:hover { }
.category main .content article .categories ul li a.active,
.tag main .content article .tag-bar ul li a.active {
color: #fff;
}
.category main .content article .cate-box ul,
.tag main .content article .tag-box ul,
.search main .content article .search-box ul {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
.category main .content article .cate-box ul li,
.tag main .content article .tag-box ul li,
.search main .content article .search-box ul li {
display: flex;
width: 100%;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 150px;
height: 100px;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
}
.category main .content article .cate-box ul li .left a,
.tag main .content article .tag-box ul li .left a,
.search main .content article .search-box ul li .left a {
display: block;
width: 100%;
height: 100%;
}
.category main .content article .cate-box ul li .left img,
.tag main .content article .tag-box ul li .left img,
.search main .content article .search-box ul li .left img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: middle;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
display: flex;
flex-direction: column;
justify-content: space-between;
width: calc(100% - 160px);
}
.category main .content article .cate-box ul li .right p,
.tag main .content article .tag-box ul li .right p,
.search main .content article .search-box ul li .right p {
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.category main .content article .cate-box ul li .right p a,
.tag main .content article .tag-box ul li .right p a,
.search main .content article .search-box ul li .right p a {
font-size: 15px;
color: #333;
}
.category main .content article .cate-box ul li .right p a:hover,
.tag main .content article .tag-box ul li .right p a:hover,
.search main .content article .search-box ul li .right p a:hover {
text-decoration: underline;
}
.category main .content article .cate-box ul li .right span,
.category main .content article .cate-box ul li .right span i,
.tag main .content article .tag-box ul li .right span,
.tag main .content article .tag-box ul li .right span i,
.search main .content article .search-box ul li .right span,
.search main .content article .search-box ul li .right span i {
font-size: 13px;
color: #999;
}
.category main .content article .categories ul li a::before {
content: '\e6b6';
font-family: 'iconfont';
margin-right: 5px;
transition: all 0s !important;
}
.tag main .content article .tag-bar ul li a::before {
content: '#';
transition: all 0s !important;
}
.archive main .content article .archive-box h3 {
margin-top: 30px;
margin-bottom: 10px;
color: #333;
font-size: 17px;
}
.archive main .content article .archive-box h3:first-child {
margin-top: 0;
}
.archive main .content article .archive-box li {
padding: 10px 0; display: flex;
align-items: start;
}
.archive main .content article .archive-box li:last-child {
padding-bottom: 0;
}
.archive main .content article .archive-box li span {
font-size: 15px;
color: #333;
white-space: nowrap;
} .archive main .content article .archive-box li a,
.archive main .content article .archive-box li a::before {
color: #999;
font-size: 15px;
}
.archive main .content article .archive-box li a:hover,
.archive main .content article .archive-box li a:hover::before {
color: #333;
font-size: 15px;
text-decoration: underline;
}
.search main .content article h3 {
font-weight: 400;
margin-bottom: 25px;
font-size: 16px;
color: #999;
}
.search main .content article h3 span {
color: #333;
} .link main .content article .link-box ul {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.link main .content article .link-box ul li {
width: 100%;
overflow: hidden;
}
.link main .content article .link-box ul li a {
display: flex;
width: 100%;
height: 100%;
padding: 10px;
border-radius: 8px;
}
.link main .content article .link-box ul li a:hover {
background-color: #f5f5f5;
}
.link main .content article .link-box ul li a .left {
width: 50px;
height: 50px;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
}
.link main .content article .link-box ul li a .left img {
width: 100%;
height: 100%;
object-fit: cover;
}
.link main .content article .link-box ul li a .right {
width: calc(100% - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.link main .content article .link-box ul li a .right h3 {
font-weight: 400;
font-size: 14px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link main .content article .link-box ul li a .right p {
font-size: 12px;
margin-top: 5px;
padding-bottom: 2px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .response form > .emoji-btn,
main .content aside .social .social-content ul li a,
main .content aside .sub-page .menu_sidebar ul li a,
main .content aside .notes-box ul li .view-detail a,
.single main .content article .post-cover .post-info .more .cate a,
.single main .content article .post-cover .post-info .more .tag a,
.comments .comments-body ul li .user-avatar .change-comment a,
.comments .comments-body ul li .comment-info .info .reply-btn a,
.link main .content article .link-box ul li a,
.note main .content article .note-page li .bottom a,
.pagination a,
.home main .content article .bottom .post-part ul li .right .post-info .read-more a::before,
header .menu ul li a,
main .content aside .toc ul li a,
.comments .response .emoji span,
.comments .response .comment-component .comment-btns button {
border: 1px solid transparent !important;
}
.response form > .emoji-btn:active,
main .content aside .social .social-content ul li a:active,
main .content aside .sub-page .menu_sidebar ul li a:active,
main .content aside .notes-box ul li .view-detail a:active,
.single main .content article .post-cover .post-info .more .cate a:active,
.single main .content article .post-cover .post-info .more .tag a:active,
.comments .comments-body ul li .user-avatar .change-comment a:active,
.comments .comments-body ul li .comment-info .info .reply-btn a:active,
.link main .content article .link-box ul li a:active,
.note main .content article .note-page li .bottom a:active,
.pagination a:active,
.home main .content article .bottom .post-part ul li .right .post-info .read-more a:active:before,
header .menu ul li a:active,
main .content aside .toc ul li a:active,
.comments .response .emoji span:active,
.comments .response .comment-component .comment-btns button:active {
border: 1px solid var(--scroll) !important;
transition: all 0s;
}
.pagination.no-more-post a:active {
border: 1px solid transparent !important;
}
.comments .response .comment-component .comment-btns .cancal:active {
border: 1px solid #dd24243a !important;
}
@media screen and (max-width: 1400px) {
.container {
width: 100%;
border: 0;
}
.home article .top .swiper {
height: 230px;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 1200px) {
html,body {
background-color: #fff;
} 
header {
position: fixed;
height: calc(100vh - 90px);
top: 90px;
left: 0;
transform: translateX(-100%);
z-index: 998;
}
header.active {
transform: translateX(0);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
}
main .nav {
z-index: 1000;
}
main {
width: 100%;
}
main .nav {
position: fixed;
top: 0;
}
main .nav .left .menu-btn {
display: block;
}
main .content {
margin-top: 90px;
position: relative;
}
.home article .top .swiper {
height: 230px;
}
}
@media screen and (max-width: 1100px) {
.home article .top .swiper {
height: 220px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
}
@media screen and (max-width: 1000px) {
main .content aside {
position: fixed;
height: calc(100% - 90px);
right: 0;
top: 90px;
transform: translateX(100%);
}
main .content aside.active {
transform: translateX(0);
box-shadow: 0 0 10px rgba(0 0 0 / .1);
}
main .content article {
width: 100%;
}
main .nav .user-menu #aside-btn {
display: inline-block;
}
main .nav {
position: fixed;
top: 0;
}
#pagination-home,
#pagination-post,
.no-more-post {
padding-top: 25px;
}
.home article .top .swiper {
height: 240px;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 800px) {
header {
height: calc(100vh - 70px);
top: 70px;
}
main .content article::-webkit-scrollbar,
main .content aside .aside-content::-webkit-scrollbar {
width: 0;
height: 0;
}
main .nav .search-box {
display: none;
}
.search-m {
display: block;
}
main .nav .left .search-btn {
display: block;
}
main .nav {
height: 70px;
}
main .content {
height: calc(100% - 70px);
margin-top: 70px;
}
.home main .content article .bottom .post-part ul li .left {
width: 230px;
height: 150px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 250px);
}
.home main .content article .bottom .post-part ul li .left .cate-view {
transform: translateY(10px);
opacity: 1;
}
main .content aside {
height: calc(100% - 70px);
top: 70px;
}
.home article .top .swiper {
height: 250px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
.home article .top .regular .regular-box h2 {
font-size: 15px;
}
.pagination a:hover,
.pagination a:hover i,
.pagination-aside a:hover,
.pagination-aside a:hover i {
background-color: transparent;
color: #999;
}
.pagination a:active,
.pagination a:active i,
.pagination-aside a:active,
.pagination-aside a:active i {
background-color: #f5f5f5;
color: #333;
}
}
@media screen and (max-width: 700px) { .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 26px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-size: 13px;
}
.home main .content article .bottom .post-part ul li .left {
width: 200px;
height: 135px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 220px);
}
.home main .content article .bottom .post-part ul li .right .text .title a {
font-size: 16px;
}
.home main .content article .bottom .post-part ul li .right .text p {
font-size: 13px;
-webkit-line-clamp: 2;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i,
#pagination-home a i,
#pagination-post a i,
.no-more-post a i {
margin-right: 3px;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more span,
#pagination-home a, 
#pagination-home a i,
#pagination-post a,
#pagination-post a i,
.no-more-post a,
.no-more-post a i {
font-size: 13px;
}
.home main .content article .bottom .post-part ul li .left .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view a {
font-size: 13px;
} .category main .content article .cate-box ul,
.tag main .content article .tag-box ul,
.search main .content article .search-box ul {
grid-template-columns: 1fr;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 200px;
height: 135px;
margin-right: 20px;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
width: calc(100% - 220px);
}
.link main .content article .link-box ul {
grid-template-columns: 1fr 1fr;
}
.single main .content article .post-cover {
height: 240px;
}
.single main .content article .post-cover .shortcuts {
top: 10px;
right: 10px;
}
.single main .content article .post-cover .post-info {
padding: 0 25px 20px 25px;
}
.single main .content article .post-cover .post-info .title,
.single main .content article .post-cover .post-info .title h2 {
font-size: 22px;
}
.single main .content article .post-cover .post-info .more div {
margin-left: 10px;
}
.single main .content article .post-cover .post-info .more .time span,
.single main .content article .post-cover .post-info .more .cate a,
.single main .content article .post-cover .post-info .more .tag a {
font-size: 13px;
}
.single main .content article .post-cover .post-info .more .time i,
.single main .content article .post-cover .post-info .more .cate a::before,
.single main .content article .post-cover .post-info .more .tag a::before {
font-size: 14px;
}
.home article .top .swiper {
height: 240px;
}
.home article .top .regular {
grid-template-columns: 1fr 1fr;
}
.home article .top .regular .regular-box:last-child {
display: none;
}
.home article .top .regular .regular-box a {
height: 170px;
}
}
@media screen and (max-width: 600px) {
.home article .top .swiper {
height: 210px;
}
.home article .top .regular .regular-box a {
height: 150px;
}
}
@media screen and (max-width: 500px) {
header.active,
main .content aside.active {
box-shadow: none;
}
.home main .content article .bottom .post-part ul li .left {
width: 140px;
height: 100px;
}
.home main .content article .bottom .post-part ul li {
margin-bottom: 20px;
padding-bottom: 0;
border-bottom: 0;
}
.home main .content article .bottom .post-part ul li .left {
margin-right: 10px;
}
.home main .content article .bottom .post-part ul li .right {
width: calc(100% - 150px);
}
.home main .content article .bottom .post-part ul li .right .text .title {
-webkit-line-clamp: 3;
}
.home main .content article .bottom .post-part ul li .right .text .title a {
font-size: 15px;
}
.home main .content article .bottom .post-part ul li .right .text p {
display: none;
}
.home main .content article .bottom .post-part ul li .right .post-info .time i {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .right .post-info .time span,
#pagination-home a, 
#pagination-home a i,
#pagination-post a,
#pagination-post a i,
.no-more-post a,
.no-more-post a i  {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .right .post-info .read-more {
display: none;
}
.home main .content article .bottom .post-part ul li .left .cate-view {
font-size: 12px;
left: 5px;
padding: 2px 6px;
}
.home main .content article .bottom .post-part ul li .left .cate-view a {
font-size: 12px;
}
.home main .content article .bottom .post-part ul li .left .cate-view,
.home main .content article .bottom .post-part ul li .left .cate-view:hover,
.home main .content article .bottom .post-part ul li .left a.cover:hover ~ .cate-view {
transform: translateY(5px);
max-width: calc(100% - 10px);
} .home main .content article > h2,
.category main .content article .categories > h2,
.tag main .content article > h2,
.archive main .content article > h2,
.search main .content article h2,
.note main .content article > h2,
.link main .content article > h2 {
font-size: 24px;
}
.home main .content article > h2 span,
.category main .content article .categories > h2 span,
.tag main .content article > h2 span,
.archive main .content article > h2 span,
.search main .content article h2 span,
.note main .content article > h2 span,
.link main .content article > h2 span {
font-size: 12px;
}
.category main .content article .cate-box ul, 
.tag main .content article .tag-box ul, 
.search main .content article .search-box ul {
grid-gap: 20px;
}
.tag main .content article .tag-bar ul li,
.category main .content article .categories ul li {
margin-right: 10px;
}
.tag main .content article .tag-bar ul li a,
.category main .content article .categories ul li a {
padding: 5px 12px;
}
.category main .content article .cate-box ul li .left,
.tag main .content article .tag-box ul li .left,
.search main .content article .search-box ul li .left {
width: 140px;
height: 100px;
margin-right: 10px;
}
.category main .content article .cate-box ul li .right,
.tag main .content article .tag-box ul li .right,
.search main .content article .search-box ul li .right {
width: calc(100% - 150px);
}
.search main .content article h3 {
font-size: 15px;
}
.archive main .content article .archive-box h3 {
font-size: 16px;
margin-top: 20px;
}
.archive main .content article .archive-box li a,
.archive main .content article .archive-box li a::before {
color: #999;
font-size: 14px;
}
.archive main .content article .archive-box li span {
font-size: 14px;
}
.archive main .content article .archive-box li a:hover,
.archive main .content article .archive-box li a:hover::before {
color: #333;
font-size: 14px;
}
main .content aside .aside-content .aside-btn-open,
main .content aside .aside-content .aside-btn-close {
font-size: 13px;
}
main .content aside {
width: calc(100% - 99px);
}
main .content aside .toc > h2,
main .content aside .social > h2,
main .content aside .notes-box > h2,
main .content aside .menu_sidebar_box > h2,
main .content aside .new-comments > h2,
main .content aside .about > h2 {
font-size: 16px !important;
}
main .content aside .social .social-content ul li a {
margin-right: 4px;
}
.link main .content article .link-box ul {
grid-template-columns: 1fr;
grid-gap: 15px;
}
footer .copyright a, footer .copyright {
font-size: 12px;
}
.single main .content article .post-content {
padding: 30px 25px;
}
.note main .content article .note-page li {
margin-bottom: 20px;
}
.home article .top {
padding-bottom: 10px;
}
.home article .top .swiper {
height: 260px;
padding-top: 0;
overflow: hidden;
}
.home article .top .swiper-slide {
transform: scale(1);
}
.home article .top .swiper-button-prev,
.home article .top .swiper-button-next {
display: none;
}
.home article .top .swiper-slide a .swiper-post-info h2 {
-webkit-line-clamp: 3;
}
.home article .top .swiper-slide a .swiper-post-info h2:hover  {
text-decoration: none;
}
.home article .top .regular {
grid-template-columns: 1fr;
}
.home article .top .regular .regular-box {
display: none;
}
.home article .top .regular .regular-box:first-child {
display: block;
}
.home article .top .regular .regular-box a {
height: 180px;
}
.home article .top .regular .regular-box h2:hover {
text-decoration: none;
}
.home article .top .regular .regular-box p {
font-size: 14px;
}
.single main .content article .post-cover .post-info .title,
.single main .content article .post-cover .post-info .title h2 {
font-size: 18px;
}
} @media screen and (min-width: 500px) {
main article .note-page .notes-content * {
font-size: 15px;
}
main article .note-page .notes-content h1 {
font-size: 19px;
}
main article .note-page .notes-content h2 {
font-size: 18px;
}
main article .note-page .notes-content h3 {
font-size: 17px;
}
main article .note-page .notes-content h4 {
font-size: 16px;
}
main article .note-page .notes-content h5 {
font-size: 15px;
}
main article .note-page .notes-content h6 {
font-size: 15px;
font-weight: 400;
}
main article .note-page .notes-content pre {
font-size: 14px;
}
}
@media screen and (max-width: 400px) {
header {
width: 80px;
}
header .logo {
height: 80px;
}
header .logo a {
width: 40px;
height: 40px;
}
header .menu ul li {
margin-bottom: 20px;
}
header .menu ul li a {
width: 40px;
height: 40px;
font-size: 12px;
}
header .menu ul li a > * {
font-size: 20px;
}
main .nav .left .menu-btn.active {
margin-left: 80px;
}
main .content aside {
width: calc(100% - 79px);
}
footer {
padding: 10px 25px;
}
.home article .top .swiper {
height: 220px;
}
}
@media screen and (max-width: 400px) and (max-height: 600px) {
header .logo {
display: none;
}
}
@media screen and (min-width: 400px) and (max-height: 700px) {
header .logo {
display: none;
}
}  @keyframes FadeIn-Left {
from {
transform: translateX(-20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} @keyframes FadeIn-Right {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} @keyframes FadeIn-Top {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} @keyframes FadeIn-Enlarge {
from {
transform: scale(.98);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}@font-face {
font-family: "iconfont"; src: url(//sukebansa.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.woff2?t=1678985733454) format('woff2'),
url(//sukebansa.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.woff?t=1678985733454) format('woff'),
url(//sukebansa.com/wp-content/themes/iEmo-0.5.2/assets/static/iconfont/iconfont.ttf?t=1678985733454) format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-up:before {
content: "\e69b";
}
.icon-chevrons-up:before {
content: "\e6ac";
}
.icon-chevron-down:before {
content: "\e6aa";
}
.icon-chevron-left:before {
content: "\e6a8";
}
.icon-chevron-right:before {
content: "\e6a9";
}
.icon-message-circle:before {
content: "\e6c4";
}
.icon-map-pin:before {
content: "\e6c3";
}
.icon-flag:before {
content: "\e6b7";
}
.icon-message-square:before {
content: "\e6c2";
}
.icon-layout:before {
content: "\e6bf";
}
.icon-log-in:before {
content: "\e6c1";
}
.icon-file:before {
content: "\e6b4";
}
.icon-activity:before {
content: "\e691";
}
.icon-anchor:before {
content: "\e69a";
}
.icon-loader:before {
content: "\e6be";
}
.icon-user:before {
content: "\e6e0";
}
.icon-edit:before {
content: "\e6b3";
}
.icon-edit-:before {
content: "\e6bc";
}
.icon-power:before {
content: "\e6cc";
}
.icon-settings:before {
content: "\e6d2";
}
.icon-grid:before {
content: "\e6ba";
}
.icon-menu:before {
content: "\e6c0";
}
.icon-bookmark:before {
content: "\e6a1";
}
.icon-weixin:before {
content: "\e600";
}
.icon-tuitetwitter43:before {
content: "\e707";
}
.icon-telegram:before {
content: "\e731";
}
.icon-QQ:before {
content: "\e882";
}
.icon-Youtube-fill:before {
content: "\e883";
}
.icon-bilibili-line:before {
content: "\e75d";
}
.icon-github:before {
content: "\e673";
}
.icon-gitee:before {
content: "\e60c";
}
.icon-arrow-right:before {
content: "\e699";
}
.icon-clock:before {
content: "\e6ab";
}
.icon-search:before {
content: "\e6d1";
}
.icon-home:before {
content: "\e6bb";
}
.icon-archive:before {
content: "\e698";
}
.icon-hash:before {
content: "\e6b9";
}
.icon-link:before {
content: "\e6bd";
}
.icon-folder:before {
content: "\e6b6";
}#nprogress {
pointer-events: none;
position: fixed;
z-index: 99999;
top: 0;
}
#nprogress .bar {
background: #FD96B4;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 2px;
} #nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #FD96B4, 0 0 5px #FD96B4;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
} #nprogress .spinner {
display: block;
position: fixed;
z-index: 9999;
top: 15px;
right: 15px;
} .nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0%   { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}