body {
  background-image: url("../upload/bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

:root {
	--color-main:#000;/*主色*/
	--color-menu-bg:#f2f2f2;

}
.header{height: 60px;width: 100%;position: fixed;background: rgba(0,0,0,0.3); z-index: 19;}
.header .logo{float: left;width:300px; height: 60px; background: url("../Images/logoW.png") no-repeat left center; background-size: auto 60%;}
.header nav{width: 700px;float: right}
.header nav ul li{float: right;line-height: 60px; margin-left: 40px;font-size: 20px; color: #FFF;}
.header nav ul li.active a,nav ul li:hover a{text-decoration: underline;text-underline-offset: 4px;}

.header nav ul li a{ color: #fff;}
.header nav ul li a:hover{text-decoration:underline;}
.top{float: left;width:100%; height: 250px; background: url("../Images/top2.jpg") no-repeat left center; background-size: 100% auto;}
.topsmall{float: left;width:100%; height: 150px; background: url("../Images/top2.jpg") no-repeat left center; background-size: 100% auto;}


.topbg{width: 100%; height: 100vh;background: url("../Images/bg.jpg") no-repeat left center; background-size:auto 100%; position: relative}

.bg{width: 100%; background: #FFF;height: auto; overflow: hidden}
.textspace{padding: 30px;display:inline-block;width: 100%;}
.bg_space{width: 100%;height: 100vh;}
.bloglist,.blogdetail{width: 70%;float: left; padding: 100px 0 50px 0;min-height: 100vh;}
.bloglist>li,.blogdetail>li{float: left;width: 100%; margin: 0 0 40px 0; background: #FFF; clear: both;box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px;border-radius:12px; overflow: hidden;padding: 30px;}
.blogdetail article{padding: 30px 0 0 0;}
.bloglist img{width: 40%;float: left;}
.bloglist .textspace{width: 55%;float: right;padding:0 30px 10px 30px;}
.bloglist .textspace article{display: -webkit-box;/* -webkit-line-clamp: 1;*/-webkit-box-orient: vertical;overflow: hidden} 
.bloglist li h3{font-weight: bold; margin: 10px 0}
.bloglist li h5{font-size: 16px;color: #aaa;}

.botton_modify{float: left;width: 30%;padding-top: 30px; }
.more{width: 50%;clear: both;text-align: right; font-size: 16px;padding-top: 30px;float: right}


.goback{width:30px;height: 30px; border: 1px solid #000; border-radius: 50%;padding: 2px;font-size: 16px; clear: both;float: left;}

.go{width:30px;height: 30px; border: 1px solid #000; border-radius: 50%;padding: 2px;font-size: 16px; display: inline-block; text-align: center;}

.notelist{ width: 27%;float: right;display: inline-block;margin: 50px 0;position: relative}
.notelist li{background: #f7fbfe;margin: 0 0 20px 0;border-radius:12px;}

.notelist li h5{font-size: 16px;color: #aaa;margin-bottom:10px; border-bottom: 1px solid #DDD; line-height: 2;}
.notelist li article{line-height: 1.5;color: #000;}
ul h4{position: absolute;margin-top:-40px; padding: 3px 5px; border: 1px solid #ccc; font-size: 14px;cursor:pointer;}
ul h4:hover{background: #000; color: #FFF;}

.popup{display: none}
.popup form{ text-align: left;margin: 40px 15% 50px 15%;}
.popup form li{ margin-bottom: 10px;}
.popup form input[type="text"],.popup form input[type="password"]{width: 100%;}

.mark{color: #FF6600;font-size: 10px;}
.grey{color: #CCC;font-size: 10px;}

.copyright{width: 100%; line-height: 3; clear: both;overflow: hidden;position: absolute;bottom: 2rem;}
.bottom_manage_box{float: right;width: 50%;text-align: right;}

.divcenter{min-height: 100vh;        /* 占满视口高度 */
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */}

.divcenter article {
  text-align: center;       /* 文字居中（可选） */
	mix-blend-mode:difference; color:#FFF;
	font-size: 2.8rem;
}




.popup{ display: none; text-align: center; padding: 3rem 4rem 4rem 4rem; overflow: hidden;font-size: 1.4rem;}
.popup img{ width:100%;margin-bottom:1rem;}

@media (max-width:768px){
	.bloglist, .blogdetail{width: 100%}
	.bloglist>li, .blogdetail>li{padding: 0}
	.header nav{display: none}
	
	.bloglist img{width: 100%;float: left;padding: 15px;}
	.bloglist .textspace{width:100%;float: right;padding:15px;}
}
















