*{box-sizing:border-box;padding:0;margin:0}
:root{
    --gap:10px;
    --color:#07a4e8;
    --color-on:#008fcd;
    --input-focus-shadow: 0 0 5px 0 #0090cd52;
    --radius:3px;
    --bgc:rgba(255, 255, 255, .9);
    --sidebar-width: 300px;
}
li{list-style:none}
a{text-decoration:none;color:#222;transition:all .3s}
a:hover{color:var(--color)}
body{color:#222;background-color:#f4f5f5;font-family:PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif;font-size:14px;line-height:1.6;background-image:url(../img/mountain.webp);background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;display:flex;flex-direction:column;min-height: 100vh;overflow-x:hidden}
input[type=number],input[type=password],input[type=text],textarea{border:solid 1px rgba(0,0,0,.1);outline:0;padding:5px;transition:all .3s;color:#444;font-family:auto;}
input[type=number]:not([disabled]):hover,input[type=password]:not([disabled]):hover,input[type=text]:not([disabled]):hover,textarea:not([disabled]):hover{border-color:rgba(0,0,0,.3);}
input[type=number]:focus,input[type=password]:focus,input[type=text]:focus,textarea:focus{border-color:var(--color);}

h2{margin:20px 0 15px}
h3{margin:15px 0 10px}
h4{margin:10px 0 5px}
hr{border-top: solid 1px #eee;margin: 10px 0;}
table,th,td{border:solid 1px #d9d9d9;border-collapse: collapse;}
th,td{padding:8px}

.button-1{border:none;background-color:#f2f6fa;padding:3px 6px;color:#818e9b;cursor:pointer;transition:all .3s;border-radius:2px}
.button-1:hover{background-color: #dfe3e6;}

.button-2{padding:5px 15px;background-color:var(--color);font-size:16px;border-radius:16px;color:#fff;border:none;transition:all .3s;cursor: pointer;}
.button-2:hover{background-color: var(--color-on);}

.ellipsis{--line:1;overflow:hidden;white-space:normal;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line)}
.container{max-width:1400px;margin:0 auto}

.header{--height:50px;position:sticky;background-color:var(--bgc);top:0;height:var(--height);box-shadow:0 2px 4px 0 rgba(0,0,0,.05);z-index: 100;}
.header .in{display:flex;padding:0 10px;}
.header .container,.header .in{height:100%}
.header .in .logo{margin-right: 20px;max-width: 200px;}
.header .in .logo img{height:100%}
.header .in .nav ul li{display:inline-block}
.header .in .nav ul li a{position: relative;display:inline-block;padding:0 10px;line-height:var(--height);color:#333}
.header .in .nav ul li a:hover{background-color:#f0f0f5}
.header .in .nav ul li a.on::after{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 2px;background-color: var(--color);}
.header .in .menus{display: flex;align-items: center;margin-left: auto;}
.header .in .menus .login{color:var(--color);}
.header .in .menus .backend{display: flex;align-items: center;}
.header .in .menus .backend img{width:24px;height: 24px;border-radius: 50%;margin-right: 5px;}

.card{background-color:var(--bgc);border-radius:var(--radius)}
.card .card-head{font-size:16px;font-weight:500;line-height:48px;padding:0 16px;border-bottom:1px solid #e8e8ed}
.card .card-body{padding:15px;color:#555666}
.card+.card{margin-top:var(--gap)}

.personal-card .in{display:flex}
.personal-card .avatar{width:100px;height:100px;margin-right:20px;border:4px solid #f0f0f2;border-radius:50%;background-color:#fff;overflow:hidden}
.personal-card .avatar img{width:100%;height:100%}
.personal-card .name{font-size:18px;font-weight:600;color:#333}
.personal-card .desc{margin-top:10px}
.personal-card .desc p+p{margin-top:5px}

.main{margin:var(--gap) 0}
.main .in{display:flex;gap:var(--gap)}
.main .in .sidebar{flex:0 0 var(--sidebar-width)}
.main .in .right{flex:0 0 calc(100% - var(--gap) - var(--sidebar-width));width:calc(100% - var(--gap) - var(--sidebar-width))}
.main .in .right .list-empty{text-align: center;padding:10px 0}
.main-none-sidebar .in .right{flex:1;width: 100%;}

.friend-links{margin-bottom: var(--gap);}
.friend-links li{display: inline-block;margin-right: 20px;}

.post-multi{padding-bottom:15px;border-bottom:solid 1px #f0f0f2}
.post-multi+.post-multi{margin-top:15px}
.post-multi .title{font-size:18px;font-weight:500;line-height:24px;color:#222226;}
.post-multi .intro{--line:2;margin-top:5px}
.post-multi .post-meta{margin-top:10px}
.post-meta{display:flex;color:#999aaa;flex-wrap: wrap;}
.post-meta .dot{margin:0 5px}

.pagebar{margin:30px 0 20px;text-align:center}
.pagebar a{display:inline-block;width:30px;line-height:30px;border-radius:3px}
.pagebar a.current{color:#fff;background-color:var(--color)}

.footer{text-align:center;margin-top:auto;box-shadow:0 -1px 0 0 rgba(0,0,0,.05);background-color:var(--bgc);padding:20px;color:#666}
.footer a{color:#777}
.footer a:hover{color:var(--color)}

.breadcrumb{font-size:14px;line-height:1.7;padding:10px 0}
.breadcrumb span{color:#666}
.breadcrumb .aux{font-size: .8em;margin-left: 10px;}
.breadcrumb a::after{content:'';display:inline-block;width:12px;height:12px;margin:0 5px;transform:translateY(1px);background-image:url(../img/right.svg);background-size:cover;background-position:center;background-repeat:no-repeat}

.post h1{color:#333;font-size:28px;word-wrap:break-word;font-weight:600;word-break:break-all;margin-bottom: 10px;}
.post .content{padding-top:10px}
.post .content img{max-width:100%}
.post .content p{margin:10px 0}
.post .content li{list-style: inherit;margin-left: 20px;}

/* ue编辑器发布的内容的ol自带的class */
.list-paddingleft-2{padding-left:20px}

.post-info{background-color:#f8f8f8;padding:10px;border-radius:var(--radius);margin-bottom:10px;}
.post-info .post-tag{margin-top:10px}
.post-tag a{color:var(--color);background-color:#fff;border:solid 1px #eaeaef;display:inline-block;line-height:15px;font-size:12px;padding:3px 6px}

.type-index .personal-card{margin-top:var(--gap)}
.type-page .post h1{text-align:center;margin-bottom: 10px;}

.post-comment{--line-color:#f2f2f2}
.post-comment .card-head{display: flex;align-items: center;justify-content: space-between;}

.comment-list{padding:10px;}
.comment-list .empty{text-align: center;}
.comment-list .comment .in{display:flex;padding-bottom:20px;border-bottom:solid 1px var(--line-color)}
.comment-list .comment+.comment{margin-top:20px}
.comment-list .comment .avatar{margin-right:5px}
.comment-list .comment .avatar img{width:42px;height:42px;border-radius:50%}
.comment-list .comment .comment-main{flex:1}
.comment-list .comment .comment-main .info .name{color:#222}
.comment-list .comment .comment-main .info .time{color:#999;font-size:12px}
.comment-list .comment .comment-main .reply{margin-top:10px}
.comment-list .comment .comment-main .reply .button-1.on{background-color: #dfe3e6;}
.comment-list .comment .child{margin-top:20px;margin-left:60px}

.comment-form{position: relative;margin-top:20px}
.comment-form p{margin:5px 0}
.comment-form .textarea{font-size:0}
.comment-form .textarea textarea{width:100%;height:100px;}
.comment-form .textarea:focus-within textarea{border:solid 1px var(--color)}
.comment-form .submit{text-align:right;border:solid 1px rgba(0,0,0,.1);border-top:none;padding:10px}
.comment-form .no-post{position: absolute;top: 0;left: 0;width:100%;height: 100%;display: flex;flex-direction: column; justify-content: center;align-items: center;background-color: rgba(255,255,255,.9);z-index:10;}

.module-calendar table{width:100%;text-align: center;}
.module-comments li + li{margin-top: 10px;border-top:solid 1px #f2f2f2;padding-top: 10px;}
.module-comments li .title a{color:#888;}
.module-comments li .title a:hover{color:var(--color);}
.module-comments li .comment{margin-top: 5px;}
.module-comments li .comment .author{display: flex;align-items: center;float: left;}
.module-comments li .comment .author .avatar{margin-right:4px;width:18px;height: 18px;border-radius: 50%;}
.module-archives li+li,.module-catalog li+li,.module-navbar li+li,.module-previous li+li{margin-top:10px}
.module-archives a,.module-catalog a,.module-navbar a,.module-previous a{position: relative;padding-left: 10px;text-overflow:ellipsis;display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.module-archives a::before,.module-catalog a::before,.module-navbar a::before,.module-previous a::before{content:'';position: absolute;width: 3px;height: 3px;top: 50%;left: 0;background-color:var(--color);transform: translateY(-50%);border-radius: 50%;}
.module-searchpanel form{display:flex}
.module-searchpanel form label{flex:1}
.module-searchpanel form label input{width:100%}
.module-tags li{display:inline-block;margin-right:5px}
.module-favorite ul,.module-link ul{display:grid;grid-template-columns:1fr 1fr}
.module-statistics ul{display: grid;grid-template-columns: 1fr 1fr;}

.template-error .card-body{text-align:center;padding:50px 20px}
.template-error .card-body .err-icon{width:200px}
.template-error .card-body .err-msg{margin:50px 0 20px;font-size:24px}
.template-error .card-body .err-jump{margin-top:20px}

.header,.card{backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}

@media (max-width:1420px){
    .container{max-width:1200px}
}

@media (max-width:1200px){
    .container{padding-left:10px;padding-right:10px}
}

@media (max-width:1020px){
    .sidebar{display:none}
    .main .in .right{flex:1;width: 100%;}
}

@media (min-width:768px){
    .header .in .menus{display:flex}
    .header .in .m-menus{display:none}
}

@media (max-width:768px){
    body{--menu-width:200px;transition:transform .5s}
    .header .in{position:relative;padding-left:0}
    .header .in .nav{display:none;position:absolute;top:100%;left:-10px;width:calc(100% + 20px);padding:5px 0;border-top:solid 1px #f2f2f2;background-color:#fff;z-index:100}
    .header .in .nav ul li{display:block;margin:5px 0}
    .header .in .nav ul li a{padding:10px;width:100%;line-height:20px}
    .header .in .nav ul li a.on::after{width:4px;height:100%}
    .header .in .menus{display:none}
    .header .in .m-menus{display:flex;align-items:center;margin-left:auto}
    .header .in .m-menus .user{display:flex}
    .header .in .m-menus .user a{display:inline-block;width:30px;height:30px;background-image:url(../img/user.svg);background-size:cover;background-position:center;background-repeat:no-repeat}
    .header .in .m-menus .menu-btn{font-size:12px;width:3em;height:3em;float:right;position:relative;transform:translateX(.5em)}
    .header .in .m-menus .menu-btn span{display:block;width:2em;border:1px solid #999;position:absolute;left:.5rem}
    .header .in .m-menus .menu-btn span.m_1{top:.8em}
    .header .in .m-menus .menu-btn span.m_2{top:1.5em}
    .header .in .m-menus .menu-btn span.m_3{bottom:.7em}
    .header .in .m-menus .menu-btn.on span.m_1{-webkit-transform-origin:left;-moz-transform-origin:left;-ms-transform-origin:left;-o-transform-origin:left;transform-origin:left;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
    .header .in .m-menus .menu-btn.on span.m_3{-webkit-transform-origin:left;-moz-transform-origin:left;-ms-transform-origin:left;-o-transform-origin:left;transform-origin:left;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
    .header .in .m-menus .menu-btn.on span.m_2{opacity:0;filter:Alpha(opacity=0)}
    .type-index .personal-card{margin-top:70px}
    .personal-card .in{flex-direction:column;align-items:center}
    .personal-card .avatar{margin-right:0;margin-bottom:20px;margin-top:-70px}
    .personal-card .right .name{text-align:center}
    .menu-open::before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.2);z-index:50}
    .menu-open .header{background-color:#fff}
    .menu-open .header .in .nav{display:block}
}