@charset "utf-8"; /**
 * style.css
 * http://chenziwen.cn
 * Copyright 2023, design by 陈子文
 */
html {height:100%}
* { margin: 0; padding: 0 }
body { font: 17px "HarmonyOS_Medium", Arial, Helvetica, sans-serif; color: #000; background: #ddd; line-height: 1.5; overflow-x: hidden; }
body { font: 17px "HarmonyOS-Sans", "微软雅黑", "Microsoft Yahei"; color: #000; background: #ddd; line-height: 1.5; overflow-x: hidden; }

img { border: 0; display: block }
ul, li { list-style: none; }
a { text-decoration: none; color: #000; }
a:hover { color: #0779a3; text-decoration: none; }
a:visited {border:none;text-decoration: none;}
a:hover,
a:active{outline:0;background:none} 
a img{border:0}

input, img, a, ul, li {outline:0;}
.m {
    max-width: 670px;
    margin: 0 auto;
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    position: relative;
    z-index: 100;
}
body { /* IOS禁止微信调整字体大小 */
    -webkit-text-size-adjust: 100% !important;
}

/*header*/
.header {position: relative;}
.head {max-width: 670px;width: 100%;height: 40px;background: #f6f6f6a3;position: fixed;display: flex;justify-content: space-between;align-items: center;z-index: 100;}
.head-a {display: flex;margin-left: 15px;}
.head-b {display: flex;margin-right: 15px;align-items: center;}


.header .mylink {
    display: flex;
    align-items: center;
    margin-right: 8px;
    background: #22982e;
    color: #fff;
    height: auto;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 20px;
}

.head-name {margin-left:10px;display: flex;align-items: center;}
.banner img {
    width: 100%;
    object-fit: cover;
}
.bloginfo {position: absolute;bottom: -18px;right: 10px;display: flex;}

.bloginfo {
    position: absolute;
    bottom: -45px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.bloginfo-b {
    color: rgb(156 163 175);
    font-size: 14px;
    margin-top: 10px;
    -webkit-line-clamp: 1;
    height: 20px;
}

.userimg img {width: 50px;height: 50px;border-radius: 5px;}
.username {margin-right: 10px;margin-top: 5px;color: #fff;font-weight: bold;}


/*横向导航*/
.content {
    position: relative;
}
.listnav {
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}
.listnav .active {
    margin-top: 2px;
}
.listnav ul {
    display: flex;
    align-items: center;
}
.listnav ul li {
    margin-right: 10px;
}
li.active a {
    color: #045b9f;
}
.listnav .active :after {
    position: relative;
    display: block;
    bottom: 0;
    margin-left: 7px;
    width: 18px;
    height: 3px;
    line-height: 0;
    font-size: 0;
    background: #045b9f;
    border-radius: 999px;
    content: "";
}

.listnav .active > .bi::after {
    background: none !important;
    display: inline-block !important;
    margin-left: 0 !important;
    width: 0px !important;
    height: 0px !important;
    border-radius: 0px !important;
}



/*content*/
.blog {
    line-height: 27px;
}
.blog a { color: #576b95; }

.content-blog {margin: 40px 0 20px 0px;padding-bottom: 0px;}
.content-blog-list {display: flex;border-bottom: 1px solid #dddddd80;margin-top: 15px;padding: 10px;}
.blog-list {margin-left: 10px;width: 100%;}
.blog-username {color: #045b9f;}
.blog strong { font-family: 'HarmonyOS_Regular'; font-weight: bold; }
.blog h1 { font-size: 20px; font-family: 'HarmonyOS_Medium'; line-height: normal; }
.blog h2 { font-size: 19px; font-family: 'HarmonyOS_Medium'; line-height: normal; }
.blog h3 { font-size: 18px; font-family: 'HarmonyOS_Medium'; line-height: normal; }
.blog-username a {color: #045b9f;}
.blog-content {
    margin-top: 0px;
    padding: 0;
    margin-bottom: 5px;
}
.blog-ip {font-size: 12px;color: #045b9f;margin-bottom:5px}
.blog-other {display: flex;justify-content: space-between;align-items: center;position: relative;margin-bottom: 5px;}
.blog-date {font-size: 12px;color: #9E9E9E;}
.blog-content-img img {max-width: 100%;}

.blog-content-img > ul {margin-top: 5px;display: flex;}
.blog-content-img > ul li {margin-right: 5px;}
.blog-comment {
    background: #f7f7f7;
    padding: 0 8px;
    border-radius: 3px;
    height: 20px;
    display: flex;
    align-items: center;
}
.blog-content video {
    width: 100%;
}
.other-zan {
    position: absolute;
    right: 50px;
    background: #484242;
    color: #fff;
    border-radius: 5px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    display: none;
}
.zan-data {
    display: flex; 
    align-items: center; 
    margin-top: 10px; 
    background: #f7f7f7; 
    padding: 5px 10px; 
    border-radius: 4px;
    flex-wrap: wrap;
}

.zan-data a {
    color: #5b6a91;
    margin-left: 8px;
}
.bofang {position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.bofang i {color: #fff; font-size: 50px;}
.bofangtime {
    position: absolute;
    color: #fff;
    font-size: 12px;
    background: rgba(0,0,0,.3);
    bottom: 5px;
    right: 5px;
    padding: 0 3px;
    border-radius: 3px;
}
/*
.comment-body {
    display: flex;
    align-items: center;
}
.comment-to {
    display: flex;
}
*/
.blog-emoji { display: inline-block; vertical-align: bottom;}
.blog-emoji { width: auto !important; height: auto !important; }
/*9图*/
.img-1 ul li:nth-child(1) {margin-right: 5px;width: 50%;}
.img-2 ul li {margin-right: 5px;width: 150px;height: 150px;}
.img-2 img {object-fit: cover;width: 150px;height: 150px;}

.img-1 ul li:nth-child(1) {margin-right: 5px;width: 50%;max-width: 200px;}
.img-3 ul li {margin-right: 5px;width: 130px;height: 130px;}
.img-3 img {object-fit: cover;width: 130px;height: 130px;}

.img-4 ul {display: flex;flex-wrap: wrap;width: 60%;}
.img-4 ul li {width: 120px;height: 120px;margin-top: 5px;}
.img-4 img {width: 120px;height: 120px;object-fit: cover;}

.img-5 ul {display: flex;flex-wrap: wrap;width: 100%;}
.img-5 ul li {width: 130px;height: 130px;margin-top: 5px;}
.img-5 img {width: 130px;height: 130px;object-fit: cover;}

.img-6 ul {display: flex;flex-wrap: wrap;width: 100%;}
.img-6 ul li {width: 130px;height: 130px;margin-top: 5px;}
.img-6 img {width: 130px;height: 130px;object-fit: cover;}

.img-7 ul {display: flex;flex-wrap: wrap;width: 100%;}
.img-7 ul li {width: 130px;height: 130px;margin-top: 5px;}
.img-7 img {width: 130px;height: 130px;object-fit: cover;}

.img-8 ul {display: flex;flex-wrap: wrap;width: 100%;}
.img-8 ul li {width: 130px;height: 130px;margin-top: 5px;}
.img-8 img {width: 130px;height: 130px;object-fit: cover;}

.img-9 ul {display: flex;flex-wrap: wrap;width: 100%;}
.img-9 ul li {width: 130px;height: 130px;margin-top: 5px;}
.img-9 img {width: 130px;height: 130px;object-fit: cover;}

/*隐藏3行*/
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    
    line-clamp: 3;
    word-break: auto-phrase;
}
.qw , .ss {width:20%}
/*公用样式*/
.hidden {display: none;}
.cursor-pointer {cursor: pointer;}
.cursor-help { cursor: help; }
.text-color-link {color: #576b95;}
.text-\[14px\] { font-size: 14px; }
.flex-ia-center{display: flex; align-items: center;}

.inline-flex-ia-center {display: inline-flex;align-items: center;}

.HarmonyOS500 {font-family: "HarmonyOS_Medium", Arial, Helvetica, sans-serifsans-serifsans-serif;}
.HarmonyOS400 {font-family: "HarmonyOS_Regular", Arial, Helvetica, sans-serifsans-serifsans-serif;}
.font-weight {font-weight: bold;}



/*评论列表*/
.index-comments {
    padding: 0;
    background: #f7f7f7;
}
.other-con {
    font: 16px "HarmonyOS_Medium", Arial, Helvetica, sans-serif;
}
.pos-rlt {
    font: 16px "HarmonyOS_Medium", Arial, Helvetica, sans-serif;
    margin-bottom: 0px;
    padding: 0px 10px 8px 10px;
}

.comment-form {
    font: 14px "HarmonyOS_Medium", Arial, Helvetica, sans-serif;
    margin-top: 5px;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    z-index: 1000;
    bottom: 0;
}

.comment-form-1 {
    border: 1px solid #07c160;
    padding: 10px;
    background: #fff;
    border-radius: 3px;
    position: relative;
}
.comment-form-2 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0.5em;
}
.comment-input {
    background: #f7f7f7;
    border: none;
    padding: 0.5rem 0.25rem;
    border-radius: 2px;
}
.input-text {
    width: 90%;
    margin-top: 5px;
    padding: 5px;
    border: none;
}
.comment-form-3 {
    display: flex;
    justify-content: flex-end;
}

.btn-comment {
    color: rgb(255 255 255);
    background: rgb(7 193 96);
    border: none;
    border-radius: 2px;
    padding: 1px 7px 3px 7px;
}
/*
.comment-close {
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-size: 24px;
    background: #07c160;
    color: #fff;
}*/
.comment-close {
    position: absolute;
    right:0 ;
    top: -27px;
    font-size: 24px;
    background: #07c160;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commentsauth {
    color: rgb(185 28 28);
    border: 1px solid rgb(185 28 28);
    margin: 0 2px;
    font-size: 12px;
    border-radius: 3px;
}
.index-comments ul li:nth-child(1) {padding-top: 5px;}