*,::after,::before{box-sizing:border-box}html,body{margin:0;padding:0}ul,ol,li{list-style:none;margin:0;padding:0}h1,h2,h3{margin:0;padding:0}
body{background-color:var(--bg-body);color:var(--color-body);font-size:.9375rem;font-weight:300;line-height:1.5;font-family:"Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
a{color:var(--color-body);text-decoration:none}.main a:hover{color:#4493f8}
header{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 49;
    padding: .75rem 0;
    background-color: var(--bg-header);
    box-shadow: 0 12px 28px 0 rgb(27 26 49 / 5%), 0 5px 10px 0 rgb(27 26 49 / 2%);
    transition: all 0.3s ease-in-out, background-color 0s;
    display: flex;
}
.container{width:100%;max-width:1320px;margin:auto}
header .container{display:flex;align-items:center;justify-content:space-between;padding:0 .6rem;min-height:55px}
header .logo{max-height:40px;vertical-align:middle}
header.sticky{
    backdrop-filter: saturate(180%) blur(6px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: var(--bg-header-sticky);
}
header.overlay{transition:none}
nav{flex-grow:2}
nav ul{list-style:none;margin-left:3rem;margin-right:auto;display:flex;}
nav li a{color:var(--color-secondary);font-size:1rem;padding:0.75rem .5rem;}
nav li.current a{color:#3858f6}
header .bar{display:flex;align-items:center}


.t_switch{
	margin-right:1rem;cursor:pointer;position:relative;border-radius:11px;display:inline-block;width:40px;height:22px;
	border:1px solid var(--border-1);background-color:rgba(142,150,170,.14);transition:border-color .25s !important;
}
.t_switch:hover{border-color:#007bff}
.t_switch .check{
	position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--bg-body);
	box-shadow:0 1px 2px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);transition:transform .25s !important;
}
.dark .t_switch .check{transform:translate(18px)}
.t_switch .icon{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}
.t_switch .icon .t_i{
	position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--color-body);mask:var(--icon) no-repeat;-webkit-mask:var(--icon) no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%;background-color:currentColor;
}
.t_switch .icon .sun{
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
	opacity:1;
}
.dark .t_switch .icon .sun{opacity:0}
.t_switch .icon .moon {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
	opacity:0;
}
.dark .t_switch .icon .moon{opacity:1}


#menubtn {
	cursor: pointer;
	display: inline-grid;
	grid-auto-columns: max-content;
	width: 2.2rem;
	height: 2.2rem;
	color: #848d97;
	background: transparent;
	border:0;
	align-items: center;
	justify-content: center;
	position: relative;
}
#menubtn:hover {
    color: var(--color-body);
    background-color: var(--bg-light);
    transition-duration: 80ms;
    border-radius:2.2rem;
}
#menubtn svg{fill:currentColor;stroke:currentColor;stroke-width:0.8}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(120,129,147,.22);
    transition: opacity 0.3s ease;
    z-index: 50;
}
#overlay.show {
    display: block;
    opacity: 1;
}
#sidebar {
    width: 320px;
    height: 100vh;
    background-color: var(--bg-sidebar);
    color: #f0f6fc;
    position: fixed;z-index:90;
    top:0;
    bottom:0;
    left: -320px;
    transition: left 0.2s ease;
    padding:1rem;
}
#sidebar.open {
    left: 0;
}
#sidebar ul{list-style:none;padding:0}
#sidebar li{
    margin: 0 0 .75rem;
    padding: .8125rem 1rem;
    background-color: var(--bg-secondary);
    border-radius: 12px;
}
#sidebar .header{padding-bottom:1rem;text-align:right}
#closebtn{
    margin-left:auto;
    display: grid;
    cursor: pointer;
    color: var(--color-muted);
    background-color: var(--bg-light);
    border:0;
	border-radius:2.6rem;
    width:2.6rem;
    height:2.6rem;
    place-content: center;
}
#closebtn:hover{
    color: var(--color-muted-hover);
    transition-duration: 80ms;
}
#closebtn svg{fill:currentColor}


.tabmenu,.content .article,.widget,.content .post{background-color:var(--bg-block);border:1px solid var(--border-block);border-radius:8px}


main{padding:2.25rem 0;margin-top:4.5rem}
.row{display:flex;}
.content{width:70%;flex: 0 0 auto;padding:0 .5rem}
.tabmenu{margin-bottom:1rem}
.tabmenu ul{display:flex;padding:.5rem;list-style:none;margin:0}
.tabmenu li{padding: .5rem .5rem;}
.tabmenu li a{display:block;color:var(--color-1);background-color:var(--bg-light);font-size:0.875rem;padding: 0.3125rem 1rem;border-radius:7px;text-align:center;cursor:pointer}
.tabmenu li.active a,.tabmenu li:hover a{background-color:var(--bg-1);border-color:var(--bg-1);color:#fff;}
.content .article{display:flex;align-items:flex-start;position:relative;padding:1rem;margin-bottom:1rem;overflow:hidden}
.content .article .thumb{flex-shrink:0;margin-right:1.25rem;width:25%;max-width:217px;max-height:145px;border-radius:6px;overflow:hidden;position:relative}
.content .article .thumb img{width:100%;max-height:100%;display:block;transition:all 300ms ease-in-out}
.content .article .thumb .item-badge{
    position: absolute;
    left: 0;
    top: 0;
    font-size: .6875rem;
    line-height: 1.3;
    padding: .125rem .375rem;
    color: #fff;
    background-color: rgb(0 0 0/60%);
    border-top-left-radius: inherit;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    display:none
}
.content .article .thumb .item-badge.top {
  background: linear-gradient(to right,#ff6737,#ff9f46);
}
.content .article:hover .thumb img{transform:scale(1.05)}
.content .article .body{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;padding:.25rem 0}
.content .article .sticky{
    position: absolute;
    width: 100px;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #ff5d34;
    transform: rotate(-315deg);
    top: 10px;
    right: -25px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
}
.content .article h2{font-size:1.25rem;font-weight:400;line-height:1.4}
.content .article .excerpt{margin-top:1.25rem;overflow:hidden;text-overflow:ellipsis;color:#a2a6b1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.content .article .meta{display:flex;justify-content:space-between;margin-top:1.25rem;font-size:.8125rem}
aside{width:30%;flex:0 0 auto;padding:0 .5rem}
footer{background-color:var(--bg-header);padding:1.5rem 0}
footer .container{padding:0 .75rem}
footer .menu{display:flex;flex-wrap:wrap;margin-bottom:1rem}
footer .menu li{position:relative;margin:.25rem 1rem .25rem 0;padding:0 1rem 0 0}
footer .menu li::after {content:'';position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:10px;background-color:#3858f6;transform:translate(50%, -50%)}
footer .menu li:last-child{margin-right:0;padding-right:0}
footer .menu li:last-child::after{display:none}
footer .copyright{color:#999;font-size:.8125rem}

.widget{padding:1.25rem;margin-bottom:1rem}
.widget h2{position:relative;font-weight:500;margin:0 0 1rem;padding-left:25px;color:var(--color-body);font-size:1.0625rem;line-height:1.4}
.widget-border{position:absolute;top:-3px;left:0;width:36px;height:30px;border-radius:4px}
.widget-border::before{content:'';position:absolute;left:0;top:50%;width:3px;height:18px;border-radius:10px;background-color:#3858f6;opacity:1;transform:translateY(-50%) rotate(15deg);transition:all .4s ease-in-out}
.widget-border::after{content:'';position:absolute;left:8px;top:50%;width:3px;height:16px;border-radius:10px;background-color:#3858f6;opacity:.6;transform:translateY(-50%) rotate(15deg);transition:all .4s ease-in-out}
.widget:hover .widget-border:before,.widget:hover .widget-border:after{transform:translateY(-50%) rotate(-165deg)}

.widget .article{display:flex;align-items:flex-start;margin:0 0 1.25rem}
.widget .article .body{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
.widget .article .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.widget .article .meta{margin-top:1rem;color:#a2a6b1;font-size:.8125rem}
.widget .article .thumb{width:33.33%;overflow:hidden;border-radius:5px;margin-left:.75rem}
.widget .article .thumb img{display:block;width:100%;max-height:100%;transition:all 300ms ease-in-out}
.widget .article:hover .thumb img{transform:scale(1.05)}

.list-overlay .list-item{position:relative;overflow:hidden;border-radius:8px;margin:0 0 1rem}
.media-content{transition:all 300ms ease-in-out}
.media-content img{display:block;width:100%}
.list-item:hover .media-content{transform:scale(1.05)}
.overlay-1 {width:100%;height:100%;background-color:#20232b;position:absolute;opacity:.4;top:0;left:0;transition:opacity .3s ease-in-out}
.list-item:hover .overlay-1{opacity:.6}
.list-overlay .list-content{display:block;position:absolute;left:0;right:0;top:0;bottom:0;padding:1rem 1.25rem;font-size:1.25rem;color:#fff;display:flex;align-items:center;z-index:1}
ul.contacts{margin:0 -.75rem;padding:0 1rem}
.contacts li{list-style:none;font-size:.875rem;padding:.75rem 0;border-top:1px solid rgba(38,38,38,0.05)}
ul.links{display:flex;flex-wrap:wrap;margin:0 -.75rem;padding:0 1rem}
.links li{list-style:none;flex:0 0 auto;width:50%;font-size:.875rem;padding:.75rem 0;border-top:1px solid rgba(38,38,38,0.05)}

.content .post{padding:2rem;margin-bottom:1rem}
.content .post h1{font-size:1.5rem;margin-bottom:1.5rem;font-weight:500}
.content .post-meta{display:flex;justify-content:space-between}
.content .post-content{margin-top:1.5rem;border-top:1px solid var(--border-light);padding-top:1.5rem;font-size:1rem;line-height:1.85;word-break:normal;word-wrap:break-word}

@media (max-width: 1023px) {
    header{padding:.5rem 0}
    main{margin-top:4rem}
    main .row{flex-direction:column}
    .content,aside{width:100%}
    header nav{display:none}
    .content .article .thumb{width:33.33%}
    .widget .article .thumb,.widget .article .meta{display:none}
    footer .menu{justify-content:center}
    footer .copyright{text-align:center}
}
@media (max-width: 767px) {
    header .container{min-height:40px}
    header .logo{max-height:30px}
    main{margin-top:3rem}
    .tabmenu{display:none}
    .content .article .excerpt{display:none}
    .content .article h2{font-size:1rem}
    .content .article .sticky{display:none}
    .content .article .thumb .item-badge{display:block}
    .content .post{padding:.875rem}
}

:root{
    --bg-body: #f7f7fb;
	--color-body: #20232b;
    --bg-header: #fff;
    --bg-header-sticky: rgba(255, 255, 255, 0.8);
    --bg-sidebar: #f3f3f3;
    --bg-block: #fff;
    --border-block: transparent;
    --color-secondary: #424a57;
    --bg-secondary: #fff;
    --bg-light: #ececec;
    --border-light: #f3f3f3;
    --color-muted: #999;
    --color-muted-hover: #20232B;
    --border-1: #d2d2d2;
    --color-1: #424a57;
    --bg-1: #20232b;
}
.dark{
    --bg-body: #131313;
    --color-body: #ececec;
    --bg-header: #000;
    --bg-header-sticky: rgba(0, 0, 0, 0.6);
    --bg-sidebar: #131313;
    --bg-block: #212121;
    --border-block: #212121;
    --color-secondary: #f3f3f4;
    --bg-secondary: #212121;
    --bg-light: #3e3e3e;
    --border-light: #3d3e3e;
    --color-muted: #c8c9cc;
    --color-muted-hover: #ececec;
    --border-1: #2c2c2c;
    --color-1: #a2a6b1;
    --bg-1: #3858f6;
}