@charset "UTF-8";

* {
margin: 0;
    padding: 0;
    border: 0;
}

body {
background: var(--bg-primary);
    font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "\5B8B\4F53";
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 auto;
    overflow-x: hidden;
}

a {
text-decoration: none;
    color: var(--text-secondary);
}

ul {
list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
list-style: none;
    margin: 0;
    padding: 0;
}

input {
border: 0;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
}

.w-h-100 {
width: 100%;
    height: 100%;
}

/**********头部**********/
#active {
color: var(--text-link);
    /*border-bottom: 2px solid var(--text-link-hover);*/
}

.nav-bar-holder {
width: 100%;
    height: 40px;
    background-color: #63636320;
    border-bottom: 1px solid var(--border-light);
    text-align: right;
    /* position: fixed; */
    top: 0;
    z-index: 100;
    position:fixed;
    float: inline-start;
    transition: background-color 0.2s ease-in-out;
}

.nav-bar-holder:hover {
background-color: var(--nav-bg);
}

.nav-bar {
max-width: 1252px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}

.logo-box {
max-width: 270px;
    height: 100%;
    float: left;
}

.nav-bar .nb-a-holder {
width: 100px;
    height: fit-content;
    font-size: 14px;
    float: left;
}

.nav-bar .nb-a-holder a img {
width:20px;
    height:20px;
    display: inline-table;
}

.nb-a-holder-last {
width: 172px;
    height: 100%;
    float: left;
}

#search-nb {
max-width: 210px;
    height: 100%;
    float: left;
}

.nb-a-holder-small {
width: 40px;
    height: 100%;
    float: left;
}

.blog-title {
max-height: 100%;
    max-width: 270px;
    float: left;
    line-height: 60px;
    font-size: 25px;
    font-weight: bold;
}

.blog-title img {
margin: 4px 2px;
        height: 42px;
}

.nb-a {
display: inline-block;
    height: 40px;
    width: 120px;
    float: left;
    line-height: 40px;
    font-size: 16px;
    color: var(--nav-text);
    transition: all 0.3s;
}

.nb-a:hover {
color:#3aa4ff
}

.nb-a-hover {
color: var(--text-link);
    font-size: large;
    /*background-color: var(--bg-secondary);*/
}

/* .sub-nb-a-hover {
color: var(--text-link);
    font-size: large; */
    /*background-color: var(--bg-secondary);*/
/*
}

*/

.li-hover {
color: var(--text-link);
    background-color: #fafcfc;
}

.nav-ul-m {
position: absolute;
    width: 80px;
    z-index: 15;
    background-color: var(--bg-primary);
    color: var(--text-muted);
    margin-top: 60px;
}

.nav-li-m {
width: 80px;
    height: 60px;
    margin: 0;
    line-height: 60px;
    font-size: 16px;
}

.nav-li-m a {
display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    transition: all 0.3s ease-in-out;
}

.nav-li-m a:hover {
color: var(--text-link-hover);
    background-color: var(--bg-secondary);
}

.nav-ul {
position: absolute;
    width: 120px;
    z-index: 15;
    background-color: var(--bg-primary);
    color: var(--text-muted);
    margin-top: 60px;
    box-shadow: var(--shadow-card);
    -moz-box-shadow: var(--shadow-card);
}

.nav-li {
width: 120px;
    height: 60px;
    margin: 0;
    line-height: 60px;
    font-size: 16px;
}

.nav-li a {
display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    transition: all 0.3s ease-in-out;
}

.nav-li a:hover {
color: var(--text-link);
}

.nav-li-bd {
border-bottom: solid 1px var(--border-light);
}

.topsign-title {
padding: 15px;
    width: 100%;
    height:auto;
    background-color: var(--bg-primary);
    border-radius: 10px;
    transition:ease-in-out 0.3s;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.topsign-text {
text-align: left;
    color: var(--text-primary);
}

.search-s {
width: 70%;
        height: 30px;
        margin: 10px 15%;
        border: var(--border-light) solid 1px;
        background: var(--bg-secondary);
        transition: all 0.3s ease-in-out;
        border-radius: 10px;
}

.search-on {
border: var(--text-link) solid 1px;
    background-color: var(--bg-primary);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

#search-input {
width: 120px;
    height: 100%;
    padding-left: 8px;
    transition: width 0.8s;
}

#search-input:focus {
width: 150px;
}

.search-s a {
background-size: 100% 100%;
    background-repeat: no-repeat;
}

.search-icon {
float: right;
}

.icon-on {
background-image: url("../img/search-on.png");
}

.a-login {
width: 80px;
    height: 100%;
    padding: 0 3px;
    line-height: 60px;
    float: left;
    text-align: center;
    color: var(--text-link-hover);
    font-size: 16px;
    font-weight: 500;
    /*单行文本溢出显示省略号*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    transition: all 0.3s linear;
}

.a-login:hover {
color: var(--text-link);
    background-color: var(--bg-secondary);
}

/**icon**/
.icon-center {
width: 120px;
    height: 40px;
    margin: 0 auto;
    background-color: var(--bg-primary);
    border-radius: 10px;
}

.icon-box {
height: 40px;
    width: 40px;
    float: left;
}

.icon-box .foot-icon {
height: 26px;
    width: 26px;
    margin: 7px;
    float: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/**********尾部**********/
.footer {
width: 100%;
    background-color: var(--nav-bg);
    float: left;
    z-index: 20;
}

.footer-line {
font-size: 13px;
}

.footer-line a {
font-size: 14px;
    color: var(--text-link);
    text-decoration: none;
}

#github-icon {
background-image: url("../img/github-black.svg");
    transition: linear 0.5s;
}

#github-icon:hover {
background-image: url("../img/github-on.svg");
}

#qq-icon {
background-image: url("../img/QQ.svg");
    transition: linear 0.5s;
}

#qq-icon:hover {
background-image: url("../img/QQ-on.svg");
}

#bili-icon {
background-image: url("../img/bili.svg");
    transition: linear 0.5s;
}

#bili-icon:hover {
background-image: url("../img/bili-on.svg");
}

/*********全局引用样式**********/
.fl {
float: left;
}

.fr {
float: right;
}

.ta-c {
text-align: center;
}

/* .sub-ta-c {
text-align: center; */
/*
}

*/

.c-666 {
color: var(--text-muted);
}

.c-29 {
color: var(--text-secondary);
}

.c-76 {
color: var(--text-muted);
}

.c-999 {
color: var(--text-light);
}

.b-b-ece {
border-bottom: 1px solid var(--border-light);
}

.justify-c-center {
justify-content: center;
}

.mar-top-20 {
margin-top: 20px;
}

.mar-top-5 {
margin-top: 5px;
}

.mar-top-10 {
margin-top: 10px;
}

.par-b-5 {
padding-bottom: 5px;
}

.one-line-overflow {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

pre {
font-family: "Microsoft Yahei", "微软雅黑", verdana, serif;;
}

.mobile-nav {
display: none;
        height: auto;
        width: 100%;
        background-color: var(--bg-primary);
        /* position: fixed; */
        z-index: 30;
}

#nav-m-list {
	width: 280px;
        height: 100%;
        position:fixed;
        top: 0;
        right: -280px;
        z-index: 1000;
        background: var(--bg-primary);
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        border-radius: 16px 0 0 16px;
        padding: 20px 0;
}


#mobile_cate { display: none; }

/*响应式尺寸*/
@media (max-width: 1200px) {
.mobile-nav {
        display: block;
}

.nav-bar-holder {
        display: none;
}

#mobile_cate {
position:fixed;
        right: 20px;
        bottom: 100px;
        z-index: 10000;
        height: 48px;
        width: 48px;
        border-radius: 50%;
        background: var(--bg-card);
        box-shadow: var(--shadow-card);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 24px;
        color: var(--text-primary);
        user-select: none;
}

#nav-m-list #cancel-li {
width: 100%;
        height: 40px;
}

#cancel-li #cancel {
height: 30px;
        width: 30px;
        margin: 5px;
        background-image: url("../img/cancel.svg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
}

#nav-m-list #m-img-li {
width: 100%;
        height: 100px;
        line-height: 100px;
}

#m-img-li #m-img {
max-height: 70px;
        max-width: 100%;
        margin: 15px auto;
        border: var(--border-light) solid 5px;
        border-radius: 50%;
        -webkit-transition: -webkit-transform 2s ease-out;
        -moz-transition: -moz-transform 2s ease-out;
        -o-transition: -o-transform 2s ease-out;
        overflow: hidden;
}

#m-img:hover {
-webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}

#nav-m-list li {
width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom: var(--border-light) solid 1px;
        background-color: var(--bg-primary);
    height: 48px;
    line-height: 48px;
    border-bottom: none;
        transition: all 0.3s ease-in-out;
}

#nav-m-list li a {
font-size: 16px;
        color: var(--text-muted);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1px;
}

#nav-m-list li:hover {
background: var(--bg-secondary);
}

#nav-m-list li a:hover {
font-size: 16px;
        color: var(--text-link);
}

#search-input-m {
line-height: 30px;
        width: 60%;
        padding-left: 5px;
}
}

/* Dark Mode Overrides */
[data-theme="dark"] body {
background: var(--bg-body);
    font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "\5B8B\4F53";
    font-size: 14px;
    color: var(--text-primary);
    margin: 0 auto;
    overflow-x: hidden;
}

[data-theme="dark"] .nav-bar .nb-a-holder {
width: 100px;
    height: auto;
    font-size: 14px;
    float: left;
}

[data-theme="dark"] .nav-bar .nb-a-holder a img {
width:20px;
    height:20px;
    display: inline-block;
}

[data-theme="dark"] .topsign-title {
padding: 15px;
    width: 100%;
    height:auto;
    background-color: var(--bg-card);
    border-radius: 10px;
    transition:ease-in-out 0.3s;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

[data-theme="dark"] .topsign-text {
text-align: left;
    color: var(--text-secondary);
}

[data-theme="dark"] */

.c-666 {
color: var(--text-secondary);
}

[data-theme="dark"] #nav-m-list {
    width: 280px;
    height: 100%;
    position:fixed;
    top: 0;
    right: -280px;
    z-index: 1000;
    background: var(--bg-card);
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
    border-radius: 16px 0 0 16px;
    padding: 20px 0;
}

[data-theme="dark"] #nav-m-list li {
width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom: var(--border-color) solid 1px;
        background-color: var(--bg-card);
        transition: all 0.3s ease-in-out;
}

[data-theme="dark"] #nav-m-list li a {
font-size: 16px;
        color: var(--text-muted);
        transition: all 0.3s;
}

[data-theme="dark"] .li-hover {
color: var(--text-link);
    background-color: #fafcfc;
}

[data-theme="dark"] .topsign-title p {
color: var(--text-secondary);
}